add column headers from array to datatables jquery

Question

I am creating a Datatable in jquery. I have an array of strings which contain the titles for the headers. I want to add these titles to the datatable. How can I do this?

Here is my code:-

html code:-

<table border="1" id="mDataTable" class="display" cellspacing="1" cellpadding="1" width="100%">
        <thead>
            <tr>

            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

jquery code:-

 var columnArray = jsonArray[1];
                    var titleArray = [];
                    for (var j = 0; j < columnArray.length; j++) {

                        var parsedJson = $.parseJSON(JSON.stringify(columnArray[j]))
                        var mTitles = parsedJson["name"];
                        titleArray.push(mTitles);

                    }


                    $('#mDataTable').DataTable({

                        "columns": titleArray
                    });

the titleArray = ["America", "India", "China", "Japan"]

the

jquery[1] = "Columns":[{"name":"ID","field":"id"},{"name":"America","field":"america"},{"name":"India","field":"india"},{"name":"China","field":"china"},{"name":"Japan","field":"japan"}],

Doing the above I get the error

Uncaught TypeError: Cannot use 'in' operator to search for '10' in America

EDIT

With CerilBoss's answer I get a table like this

enter image description here

I am new to jquery and would appreciate any help.

whats inside jsonArray[1] ?

Cerlin
– Cerlin

2014-12-30 05:36:52 +00:00
Commented Dec 30, 2014 at 5:36 — Cerlin
– Cerlin, Commented Dec 30, 2014 at 5:36

Cerlin · Accepted Answer · 2014-12-30 07:38:38Z

4

append the header data before initializing the dataTable

FIDDLE

CODE

var jsonArray = {"Columns":[{"name":"ID","field":"id"},{"name":"America","field":"america"},{"name":"India","field":"india"},{"name":"China","field":"china"},{"name":"Japan","field":"japan"}]};
var columnArray = jsonArray['Columns'];
var titleArray = [];
$('table thead tr').empty();
for (var j = 0; j < columnArray.length; j++) {
    var parsedJson = $.parseJSON(JSON.stringify(columnArray[j]))
    var mTitles = parsedJson["name"];
    $('table thead tr').append("<th>"+ mTitles +"</th>");
};
$('table').DataTable();

UPDATED FIDDLE

UPDATED CODE

var jsonArray = {"Columns":[{"name":"ID","field":"id"},{"name":"America","field":"america"},{"name":"India","field":"india"},{"name":"China","field":"china"},{"name":"Japan","field":"japan"}]};
var columnArray = jsonArray['Columns'];
var titleArray = [];
for (var j = 0; j < columnArray.length; j++) {
    var temp = {};
    temp['title'] = columnArray[j]["name"];
    titleArray.push(temp);
};
$('table').DataTable({ "columns": titleArray});

UDPATE

Check this latest fiddle

edited Dec 30, 2014 at 7:38

answered Dec 30, 2014 at 6:08

Cerlin

6,7321 gold badge23 silver badges29 bronze badges

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

11 Comments

iam stack Over a year ago

Also, could you help me with how to add the table data which is in the same array format?

Cerlin Over a year ago

for data your array format has to be different. means, it should have array of array of objects

Cerlin Over a year ago

something like

{"Rows": [[{"name": "1", "field": "id"}, {"name": "America", "field": "america"}, {"name": "India", "field": "india"}, {"name": "China", "field": "china"}, {"name": "Japan", "field": "japan"} ], [{"name": "2", "field": "id"}, {"name": "America", "field": "america"}, {"name": "India", "field": "india"}, {"name": "China", "field": "china"}, {"name": "Japan", "field": "japan"} ] ] }

iam stack Over a year ago

I worked it out thanks. I had a doubt about your previous answer though. I was refering the link datatables.net/examples/data_sources/js_array.html . Can't I do sometihing like that to reduce the code? My table somehow looks different than the one in your Fiddle code

Cerlin Over a year ago

yes. you should disable datatable default sorting.. check this fiddle

|

Collectives™ on Stack Overflow

add column headers from array to datatables jquery

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related