CODEWITHSUNDEEP
jquerydatatable
iam stack
iam stack

Reputation: 97

add column headers from array to datatables jquery

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.

Upvotes: 1

Views: 13786

Answers (1)

Cerlin
Cerlin

Reputation: 6722

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

Upvotes: 4

Related Questions