Dynamic columns with Datatables javascript

Question

js in order to display a json file. I extract the name of my columns and build an array like this one :

columns = ["Date", "C2R", "CM", "Total"]

My sTitle and mData have the same name so I try to do that but fail.

    jQuery('#result_example').dataTable( {
        "data": result_table,
        "columns": [
            jQuery.each(columns, function(i, value){
                //console.log(value); which give ["Date", "C2R", "CM", "Total"]
                { "sTitle": + value + , "mData": + value + },  
            })
        ],

        paging: true,
        searching: false,
        "bInfo" : false 
    } );

The objective is to have a result like this :

    jQuery('#result_example').dataTable( {
        "data": result_table,
        "columns": [
                { "sTitle": "Date" , "mData": "Date" },
                { "sTitle": "C2R" , "mData": "C2R" },
                { "sTitle": "CM" , "mData": "CM" },
                { "sTitle": "Total" , "mData": "Total" }
        ],

        paging: true,
        searching: false,
        "bInfo" : false 
    } );

Amit Joki · Accepted Answer · 2014-12-15 08:04:34Z

3

You can build an object outside and then use it inside dataTable

var clmns = [];
jQuery.each(columns, function(i, value) {
    clmns.push({ "sTitle": value, "mData": value}); // push it in
});    
jQuery('#result_example').dataTable({
    "data": result_table,
    "columns": clmns, // use it here
    paging: true,
    searching: false,
    "bInfo": false
});

answered Dec 15, 2014 at 8:04

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

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

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Issue:

When you execute your datatable code it does not get the columns name because you are extracting it later but at that moment datatable code has been executed, so what you can do is this with jQuery.map() is to create an array filled with objects of each iteration of your columns array:

var colData = $.map(columns, function(colName) { // creates an array
   return { "sTitle": colName, "mData": colName};// fills with js objects
}); 

jQuery('#result_example').dataTable( {
     "data": result_table,
     "columns":colData, //<---------you can pass it here.
     // other code as is
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 15, 2014 at 8:18

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Collectives™ on Stack Overflow

Dynamic columns with Datatables javascript

2 Answers 2

Comments

Issue:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Issue:

Comments

Your Answer

Sign up or log in

Post as a guest

Related