Setting column Titles and quantity dynamically, after the first row creation

guilhermemaranhao

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

colin

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

guilhermemaranhao

Great, @colin ! I'll check it.

Thanks