Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
939 views
in Technique[技术] by (71.8m points)

jquery - DataTables with Dynamic Columns

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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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
    });
});

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...