Dynamic Column Names in JQuery DataTables

Question

Im not able to declare the table headers dynamically in the datatables. Here's what i've tried so far:

if (result != "[]") {

        var resultColumns = [];

        $.each(result.Columns, function(i, value){

            var obj = { sTitle: value };

            resultColumns.push(obj);
        });


        $('#trendingTable').dataTable({
            "aaData": result,
            //important  -- headers of the json
            "aoColumns": [ resultColumns ],
            "sPaginationType": "full_numbers",
            "aaSorting": [[0, "asc"]],
            "bJQueryUI": true,
            "bDestroy": true,

        });
    }

My JSON result:

{"Column1":["ABC","XYZ"],"Column2":[0.0,0.0],"Colum3":[0.0,0.0],,"Columns":["Column1","Column2","Colum3"]}

Ankesh · Accepted Answer · 2014-04-22 04:42:53Z

4

You have two options to achieve this.

1. Change your JSON result to below format:

{"COLUMNS":[{ sTitle: "COLUMN1"}, { sTitle: "COLUMN2"}, { sTitle: "COLUMN3"}], "DATA":[[" ABC","DEF","XYZ"],["0.0,"0.0","0.0"],["1","2","3"],["I","II","III"]]}

2. As jQuery Datatable is HTML table that render rows and columns, parse your JSON result
and append columns to table thead.

edited Apr 22, 2014 at 4:42

Ankesh

4,9055 gold badges41 silver badges78 bronze badges

answered Aug 12, 2013 at 15:23

Kiran

20.3k11 gold badges72 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamic Column Names in JQuery DataTables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related