具有动态列的数据表

Posted 2023-05-07

【中文标题】具有动态列的数据表

【英文标题】：DataTables with Dynamic Columns

【发布时间】：2015-03-24 07:23:50

【问题描述】：

我正在尝试使用 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>

【参考方案1】：

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

dataObject 是字符串，而不是 json。因此您可以使用 eval() 或删除 ' 使其成为 json 对象 您在数据表中传递的参数名称错误。您需要提供准确的参数。 您正在使用父 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
    );
);

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

【讨论】：

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

数组名称“columns”是怎么回事？第三行。

@user619237 。我也有同样的问题。我可以使用上面的方法显示数据表。请让我知道我们是否可以在上面的代码中实现 CRUD 操作。如果可能的话，你能否给我提供 CRUD 的链接。

【参考方案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 上描述的Warning: Requested unknown 错误的人，请检查您的 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 的声明是针对字符串，而不是具有属性“COLUMNS”和 DATA 的对象 - 删除开头的 '[ 和结尾的 ']，这样您就拥有了这个（这将是一个对象）：

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