Setting column Titles and quantity dynamically, after the first row creation
Setting column Titles and quantity dynamically, after the first row creation
Hi there,
I need to build a table that hasn't a fixed quantity of columns neither fixed titles.
It has 6 fixed columns and another group of columns that can vary from 1 to 5 columns, including their titles can be different, depends on the data response from the server, as follow:
table = $('#tabelaMunicipios').DataTable({
destroy: true,
ajax: {
url: "/myService",
dataSrc: function (result) {
var data = [];
// iterate over _result_ object and set _data_ array.
// result[0].myDynamicArray.size defines which dynamic columns should be rendered (between 1 and 5).
// the titles are also defined in specific property defined on each element of the result[0].myDynamicArray, for
// example, result[0].myDynamicArray[0].title = "My Dynamic Column title 1", etc
return data;
}
},
columns: [
{ data: "property1", title: "FixedTitle1"},
{ data: "property2", title: "FixedTitle2" },
{ data: "property3", title: "FixedTitle3" },
{ data: "property3", title: "DynamicTitle1" },
{ data: "property4", title: "DynamicTitle2" }, // maybe won't be shown
{ data: "property5", title: "DynamicTitle3" }, // maybe won't be shown
{ data: "property6", title: "DynamicTitle4" }, // maybe won't be shown
{ data: "property7", title: "DynamicTitle5" }, // maybe won't be shown
{ data: "property8", title: "FixedTitle4" },
{ data: "property9", title: "FixedTitle5" },
{ data: "property10", title: "FixedTitle6" }
],
columnDefs: [
{ targets: ['_all'], searchable: false },
{ targets: [0,1,2], type: 'diacritics-neutralise', searchable: true }
]
});
I know there are plenty of questions related to this topic, but some are very old and I do not know if the API has changed, like this here:
https://datatables.net/forums/discussion/6260/dynamic-column-names
Do I need to set this dynamic names inside a "createdRow" event? I've tested some approaches but none solved.
Or can I do it, in the ajax section?
Can I hide the columns that are not supposed to be shown?
Thanks,
Guilherme
This question has an accepted answers - jump to answer
Answers
Hi @guilhermemaranhao ,
This was asked recently and Kevin did a good response, see here. The solution is to initialise DataTables in the Ajax success callback, rather than have the Ajax under DataTables's control.
Cheers,
Colin
Great, @colin ! I'll check it.
Thanks