Таблицы данных с динамическими столбцами

Я пытаюсь сделать datatable с динамическими столбцами, используя JSON, но продолжаю получать следующую ошибку:

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

Любая помощь будет принята с благодарностью.

Благодарю!!

JS:

<link href="#" onclick="location.href='http://cdn.datatables.net/1.10.4/css/jquery.dataTables.css'; return false;" 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>

Ответы

Ответ 1

Привет, в коде есть несколько проблем...

dataObject - это строка, а не json. поэтому вы можете сделать его json-объектом, используя eval() или удалив '
имя параметра, которое вы передаете в datatable, неверно. вам необходимо предоставить точный параметр.
Вы используете родительский объект json как массив. но вы не используете [], чтобы получить свой первый элемент.
ваш html-контент является неправильной таблицей. поскольку вы передаете имя столбца с помощью java-скрипта. вам не нужны заголовки html-таблицы. ошибка длины, возникающая из-за этого html-кода. если вы удалите html внутри таблиц, тогда ваш код не будет иметь ошибку длины. но все же вышеупомянутая ошибка, о которой я упоминал, будет там. пожалуйста, проверьте приведенный ниже код. Возможно, вы ищете этот код...

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

Ответ 2

Я думаю, что с этим было бы легче справиться

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">

Ответ 3

Те, кто получает предупреждение: запрошенную неизвестную ошибку, описанную на https://datatables.net/tn/4, проверьте свой формат данных json. Ниже приведен пример, который может вам помочь.

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

рабочая демонстрация: https://jsfiddle.net/ue6vqy77/

Ответ 4

Ваше объявление dataObject для String, а не объекта со свойствами "COLUMNS" и DATA - удаляет "[в начале и"] в конце, чтобы вы имели это (это будет объект):

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