Keen 2 : KTDatatable change column dynamically
Hello
How can i change all columns dynamically ?
Thanks in advance
Alexis
Replies (9)
Hi,
Could you please provide more info ? Do you want to change row column values for a row ? How actually are you trying to implement it?
Regards.
Hi !
I implemented my Keen Datatable like this :
_table = $(table).KTDatatable({
data: {
type: "remote",
source: {
read: {
url: window.origin + "/advanced/search",
params : {
name: $("input[]").val(),
query: $("input[]").val(),
spaces: $("input[]").val(),
categories :$("select[]").val(),
options: JSON.stringify(nameAttr),
blankSearch: blankSearch
},
method: "GET",
contentType: "application/json",
map: function(raw) {
if(blankSearch){
// Delete Blank search from the DOM
$("#gofastAdvancedSearchBlankSearch").remove();
}
// prevent JS error if no data after applying filter
if (raw == null) {
return [];
}
// update columns
searchAdvancedTable.columns = _createColumns(raw.columns);
// sample data mapping
var dataSet = raw;
if (typeof raw.data !== "undefined") {
dataSet = raw.data;
}
// REFRESH HISTORY Table //
$("#gofastAdvancedSearchHistory").KTDatatable("reload");
return dataSet;
},
},
},
serverPaging: true,
saveState : false,
},
// layout definition
layout: {
class: "GofastTable GofastTable--scroll",
scroll: false, // enable/disable datatable scroll both horizontal and vertical when needed.
footer: false, // display/hide footer
},
// column sorting
sortable: false,
pagination: true,
translate: {
records: {
processing: Drupal.t("Please wait..."),
noRecords: Drupal.t("No records found")
},
toolbar: {
pagination: {
items: {
default: {
first: Drupal.t("First"),
prev: Drupal.t("Previous"),
next: Drupal.t("Next"),
last: Drupal.t("Last"),
more: Drupal.t("More pages"),
input: Drupal.t("Page number"),
select: Drupal.t("Select page size")
},
info: Drupal.t("Displaying {{start}} - {{end}} of {{total}} records")
}
}
}
},
columns: searchAdvancedTable.columns,
});I want to change dynamically my column , i have a modal where i can choose what column , i make an other request but i need to do 2 times the request to have modifications.
Thanks in advance
Alexis
Hi Alexis,
You can try this approach. Begin by separating the configuration of the KTDatatable into a separate variable. This will allow you to modify the column configuration.
var option = {}; // Your original KTDatatable configurationNext, when you want update column, destroy the existing KTDatatable instance. This will remove the current table and prepare it for reinitialization.
var datatable = $(".datatable").KTDatatable(option);
datatable.KTDatatable("destroy");Update the column configuration: Modify the column configuration in the option variable to reflect the changes you want to make dynamically. You can update the column names, widths, visibility, or any other properties according to your requirements.
var option = {}; // update KTDatatable configuration
datatable = $(".datatable").KTDatatable(option);Finally, reinitialize the KTDatatable using the updated option variable. This will recreate the table with the new column configuration.
Thanks
Hi !
Thanks you for your answer !
It can't work because I'm using what I get from my query to format my columns.
As you can see in the map(), I'm trying to update the columns but without success.
Thanks in advance.
Alexis
Could you please share your function _createColumns() and the structure of raw.columns object? We could suggest an alternative.
Thanks
Hi !
Here is my _createColumns function
var _createColumns = function (columns) {
let finalColumn = [];
// Call hooks to declare new columns
if(typeof Gofast.hooks.gofast_advanced_search.hook_declare_columns == "object"){
Gofast.hooks.gofast_advanced_search.templates = {};
for(var i in Gofast.hooks.gofast_advanced_search.hook_declare_columns){
if(typeof Gofast.hooks.gofast_advanced_search.hook_declare_columns[i] == "function"){
let specColumn = Gofast.hooks.gofast_advanced_search.hook_declare_columns[i](columns);
// Check if the column name is in the cookie
let filtersColumns = window.getFiltersColumnsFromCookies();
if(filtersColumns.length > 0){
specColumn = specColumn.filter(function (el) {
return filtersColumns.includes(el.field);
});
}
finalColumn.unshift(...specColumn);
}
}
}
finalColumn.unshift({ selector: { class: "kt-checkbox--solid" }, field: "checkbox", title: "", autoHide: false, width: 25, });
return finalColumn;
};We implemented a Javascript hook , here is the hook_declare_column.push
Gofast.hooks.gofast_advanced_search.hook_declare_columns.push(function(fields){
let finalColumn = [];
for(var i in fields){
let field = fields[i];
let template;
let width = 200;
switch(field.field){
case "entity_id":
width = 100;
break;
case "sm_vid_Format_Type":
width = 50;
break;
case "label":
width = 400;
break;
case "formatedGroupes":
template = function(row) {
let result = "";
Object.entries(row[field.field]).forEach(([key, value]) => {
result += "<a href="/node/" + value.nid + "" data-n" data-toggle="search-tooltip" class=""><span class="label label-sm label-warning label-inline font-weight-bold mr-1 text-hover-white bg-hover-dark">" + value.title + "</span></a>";
});
return result;
};
break;
case "im_field_state":
case "im_field_criticity":
template = function(row) {
let result = "";
if(row[field.field] == undefined || row[field.field] == null){
return "-";
}
result = "<span class="hl-tag label label-inline">" + row[field.field] + "</span>";
return result;
};
break;
case "im_field_tags":
case "sm_vid_Category":
template = function(row) {
let result = "";
if(row[field.field] == undefined || row[field.field] == null){
return "-";
}
Object.entries(row[field.field]).forEach(([key, value]) => {
console.log(value);
result += "<span class="hl-tag label label-inline">" + Drupal.t(value) + "</span>";
});
return result;
};
break;
case "ss_language":
template = function(row) {
if(row[field.field] == undefined || row[field.field] == null){
return "-";
}
return "<div class="symbol symbol-20 document__editable--label position-relative py-2">"
+ "<img class="metadata-language-flag" alt="Pic" src="" + row[field.field] + "" />"
+ "</div>";
};
break;
default:
// Vérifiez si un template a déjà été défini pour ce `field.field`
if (Gofast.hooks.gofast_advanced_search.templates.hasOwnProperty(field.field) && Gofast.hooks.gofast_advanced_search.templates[field.field] != undefined){
continue;
} else {
// Sinon, définissez le template et ajoutez-le à l"objet `templates`
template = function(row) {
if(row[field.field] == undefined || row[field.field] == null){
return "-";
}
return "<span>" +row[field.field] + "</span>";
};
}
}
Gofast.hooks.gofast_advanced_search.templates[field.field] = template;
finalColumn = finalColumn.concat([{
field: field.field,
title: Drupal.t(field.title),
width: width,
autoHide: false,
template: template,
}]);
}
return finalColumn;
});I can see that your functions appears to be quite complex, and it seems that updating columns inside the `map` function might not be feasible unless you've predefined the columns prior to initialization. One potential approach could involve destroying the datatable and then reinitializing it in order to update the column configuration, as I mentioned in previous replies.
Alternatively, you might want to explore the possibility of using the datatables.net plugin, which could provide more flexibility for such tasks.
Ok, I'll try to instantiate the data before the GET request!
Thanks a lot.
When we move to Keen 3, we'll be using datatables.net, so I think it'll be easier to implement what I want.
Have a good day.
Alexis
Thank you for your understanding. datatables.net, it should make it easier to implement the functionality you're looking for. If you have any more questions or need further assistance in the future, feel free to reach out.
