动态列的DataTables

Question

我正在尝试使用JSON呈现具有动态列的数据表，但一直收到以下错误：

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

任何帮助将不胜感激。谢谢！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>

- New Dawn Fades

Answer 1

你好，代码中有几个问题...

• dataObject是一个字符串而不是json对象，你可以使用eval()函数将其转换成json对象或者删除掉'
• 你传递给datatable的参数名字是错误的，你需要提供准确的参数名。
• 你正在将父json对象作为数组使用，但你没有用[]来获取它的第一个元素。
• 你在表格中的html内容是错误的。由于你是使用javascript来传递列名的，所以不需要html表头。长度错误实际上是因为这段html代码引起的。如果你删除表格内部的html，那么你的代码就不会出现长度错误了。但上面我提到的错误仍然存在。请检查下面的代码，也许你在寻找这段代码...

Note: HTML tags are preserved.

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>

- user619237

---

这解决了我的所有问题！非常感谢您的技术建议和示例。 - New Dawn Fades

第三行的数组名称“columns”是什么意思？ - Jon Koeter

@user619237。我有同样的问题。我能够使用以上方法显示datatable。请问我们是否可以在上面的代码中实现CRUD操作。如果可能的话，您能否为我提供CRUD的链接。 - Ghanshyam Singh

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

- Bikal Basnet

Answer 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/

- hhk

Answer 4

你声明的dataObject是一个字符串，而不是一个具有属性“COLUMNS”和“DATA”的对象 - 删除开头的'['和结尾的']'，这样你就会得到一个对象：

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

- nril