Dynamic column header in datatable from json array

Question

I want to populate a Datatable with a dynamic column header and column data. I can populate dynamic column data successfully, but I can't achieve a dynamic column. I am using an array I get from a JSON AJAX request. My code is this:

<body>
    <table id="example" class="display" cellspacing="0" width="100%" border="1"></table>
</body>

var JSONResult = '{"column1":"data1","column2":"data2","column3":"data3","columnN":"dataN"}';
var row_dtable = new Array();
var dtable_api = $('#example').dataTable();

$.each(JSONResult , function(key, value) {
    row_dtable.push(value);
}); 
dtable_api.api().row.add(row_dtable).draw(false);

Thanks in advance.

What is attributes?

Rory McCrossan
– Rory McCrossan

2016-06-17 08:50:02 +00:00
Commented Jun 17, 2016 at 8:50 — Rory McCrossan
– Rory McCrossan, Commented Jun 17, 2016 at 8:50
Sorry,I have edited code..

Priyanka
– Priyanka

2016-06-17 08:52:45 +00:00
Commented Jun 17, 2016 at 8:52 — Priyanka
– Priyanka, Commented Jun 17, 2016 at 8:52

Community · Accepted Answer · 2017-05-23 12:15:58Z

0

Datatables doesn't have the ability to change it's structure once being created. You have to destroy it and then re-create with a new set of columns.

Additional reading: How to dynamically change Datatables multiple column headers using ajax and jquery without refreshing the webpage?

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Jun 17, 2016 at 11:54

Andrei Zhytkevich

8,1292 gold badges33 silver badges46 bronze badges

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

Comments

shubham · Accepted Answer · 2019-02-12 13:12:56Z

Ideally your JSONResult will always have the same columns and only data will be updated. For this the solution will be to create the columns once in the header of your table and then using the datatable API to add the data.

First you should change your table HTML like this, which shouldn't be a problem.

<body>
 <table id="example" class="display" cellspacing="0" width="100%" border="1">
   <thead>
     <tr></tr>
   </thead>
 </table>
</body>

Then you create the headers through jQuery

   var JSONResult = [{ "column1": "data1", "column2": "data2", "column3": "data3", "columnN": "dataN" },
            { "column1": "data1", "column2": "data2", "column3": "data3", "columnN": "dataN" }];

        $.each(JSONResult[0], function (key, value) {
            $('#example thead tr:first-child').append($('<th>', {
                text: key
            }));
        });

And last, add the data to dataTable

        var row_dtable = new Array();
        var dtable_api = $('#example').dataTable();
        $.each(JSONResult, function (i, l) {
            $.each(l, function (key, value) {
                console.log(key + " " + value);
                row_dtable.push(value);

            });
            dtable_api.api().row.add(row_dtable).draw(false);
        });

Avinash Joshi · Accepted Answer · 2025-07-20 15:05:36Z

This code worked for me.

I was getting an issue in the console with your code.

Uncaught TypeError: Cannot read properties of undefined (reading 'aDataSort')

Then I modified the code according to the code below.

I used THEAD with TR

And added few properties, and code worked

Output

Workable Code

<html>
<head>
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
   
</head>
<body>
     <table id="example" class="display" cellspacing="0" width="100%" border="1">
   <thead>
     <tr></tr>
   </thead>
 </table>
     <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript">
        var JSONResult = '{"column1":"data1","column2":"data2","column3":"data3","columnN":"dataN"}';
        var row_dtable = new Array();
        var dtable_api = $('#example').dataTable({

            bSort: false,
            aoColumns: [ { sWidth: "45%" }, { sWidth: "45%" }, { sWidth: "10%", bSearchable: false, bSortable: false } ],
        "scrollY":        "200px",
        "scrollCollapse": true,
        "info":           true,
        "paging":         true
        });

            $.each(JSON.parse(JSONResult) , function(key, value) {
                row_dtable.push(value);
            });     
            dtable_api.api().row.add(row_dtable).draw(false);  
    </script>
</body>
</html>

Collectives™ on Stack Overflow

Dynamic column header in datatable from json array

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related