DataTables with Dynamic Columns

Question

I'm trying to render a datatable with dynamic columns using JSON but keep getting the following error:

Uncaught TypeError: Cannot read property 'length' of undefined.

Any help would be greatly appreciated.

Thanks!!

JS:

<link href="http://cdn.datatables.net/1.10.4/css/jquery.dataTables.css" rel="stylesheet" type="text/css"/>

<script src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.js" type="text/javascript"></script>

jQuery(document).ready(function() {
    var dataObject = '[{"COLUMNS":[{ "sTitle": "NAME"}, { "sTitle": "COUNTY"}],"DATA":[["John Doe","Fresno"],["Billy","Fresno"],["Tom","Kern"],["King Smith","Kings"]]}]';

    var columns = [];

    jQuery.each(dataObject.COLUMNS, function(i, value){
        var obj = { sTitle: value };
        columns.push(obj);
    });

    jQuery('#example').dataTable({
        "bProcessing": true,
        "bPaginate": true,
        "sPaginationType": "full_numbers",
        "aaData": dataObject.DATA,
        "aoColumns": columns
    });
});

HTML:

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
    <tr><thead>column1</thead></tr>
    <tbody></tbody>
</table>

user619237 · Accepted Answer · 2015-01-25 20:37:45Z

25

Hi there are several issue in the code...

dataObject is string, not a json. so you can make it json object using eval() or removing '
the parameter name you are passing in datatable is wrong. you need to provide the accurate parameter.
You are using the parent json object as array. but you are not using [] to get its first element.
your html content is the table is wrong. since you are passing the columns name using java script. you dont need the html table headers. the length error actually occurring because of this html code. if you remove the html inside the tables then your code will not have the length error. but still the above error i mentioned will be there. please check the code bellow. may be you are looking for this code...

jQuery(document).ready(function() {
    var dataObject = eval('[{"COLUMNS":[{ "title": "NAME"}, { "title": "COUNTY"}],"DATA":[["John Doe","Fresno"],["Billy","Fresno"],["Tom","Kern"],["King Smith","Kings"]]}]');
    var columns = [];
    $('#example').dataTable({
        "data": dataObject[0].DATA,
        "columns": dataObject[0].COLUMNS
    });
});

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
</table>

answered Jan 25, 2015 at 20:37

user619237

1,9023 gold badges19 silver badges19 bronze badges

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

3 Comments

New Dawn Fades Over a year ago

This fixed all my issues! Thanks so much for the technical advice and example.

Jon Koeter Over a year ago

Whats with the array names "columns"? 3rd line.

Ghanshyam Singh Over a year ago

@user619237 . I have the same problem. I am able to show the datatable using above. Could you please let me know if we can implement CRUD operations in above code. Also can you please provide me the link for CRUD if possible.

Bikal Basnet · Accepted Answer · 2015-09-22 08:51:49Z

I think life would have been easier with with this

jQuery(document).ready(function() {
  var dataObject = {
    columns: [{
      title: "NAME"
    }, {
      title: "COUNTY"
    }],
    data: [
      ["John Doe", "Fresno"],
      ["Billy", "Fresno"],
      ["Tom", "Kern"],
      ["King Smith", "Kings"]
    ]
  };
  var columns = [];
  $('#example').dataTable({
    "data": dataObject.data,
    "columns": dataObject.columns
  });
});

<link href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">

hhk · Accepted Answer · 2017-12-25 12:46:30Z

3

Those who get a Warning: Requested unknown error described on https://datatables.net/tn/4, do check your json data format. Below example may help you.

var dataObject = eval('[{"columns":[{ "title": "Id", "data":"Id"}, { "title": "Name", "data":"Name"}],"data":[{"Id":"123","Name":"John Doe Fresno"}, {"Id":"124","Name":"Alice Alicia"}]}]');    
$('#example').DataTable(dataObject[0]);

working demo: https://jsfiddle.net/ue6vqy77/

answered Dec 25, 2017 at 12:46

hhk

5367 silver badges15 bronze badges

Comments

nril · Accepted Answer · 2015-01-25 19:56:56Z

0

Your declaration of dataObject is for a String, not an object with the properties "COLUMNS" and DATA - remove the '[ at the beginning and '] at the end so you have this (which will be an object):

var dataObject = {"COLUMNS":[{ "sTitle": "NAME"}, { "sTitle": "COUNTY"}],"DATA":[["John Doe","Fresno"],["Billy","Fresno"],["Tom","Kern"],["King Smith","Kings"]]};

answered Jan 25, 2015 at 19:56

nril

5682 silver badges7 bronze badges

Collectives™ on Stack Overflow

DataTables with Dynamic Columns

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related