通过 Javascript 动态构建输入数据的 DataTables 不起作用

Question

我正在尝试动态填充表格。以下是我的代码。 dataTest 包含 dataSet 在 for 循环之后的最终输出。使用 dataTest 作为表格的输入，表格可以正常工作并填满。但是，使用 dataSet 会抛出错误 DataTables 警告：table id=example - Requested unknown parameter '1' for row 0, column 1.。我试过查看 https://datatables.net/manual/tech-notes/4 关于这个，但无法弄清楚。 dataSet 和 dataTest 本质上具有相同的值。为什么 dataTest 有效，而 dataSet 无效？

dataSet = "[";
for (prop = 0; prop < 26; prop++) 
{
   test = "['" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "'],";


    test = test.replace(/'/g, '"');
    // console.log(test);
    dataSet = dataSet.concat(test);
    // console.log(test.replace(/'/g, '"'));
    // test = "'" + String(array0[prop]) + "' : '"  + String(array1[prop]) + "'";
    // console.log(JSON.stringify(test));
}
  end = "]";
  dataSet = dataSet.concat(end);
  console.log(dataSet);
  
var dataTest = [["0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0"],["1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1"],["2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2"],["3","3","3","3","3","3","3","3","3","3","3","3","3","3","3","3","3","3","3","3"],["4","4","4","4","4","4","4","4","4","4","4","4","4","4","4","4","4","4","4","4"],["5","5","5","5","5","5","5","5","5","5","5","5","5","5","5","5","5","5","5","5"],["6","6","6","6","6","6","6","6","6","6","6","6","6","6","6","6","6","6","6","6"],["7","7","7","7","7","7","7","7","7","7","7","7","7","7","7","7","7","7","7","7"],["8","8","8","8","8","8","8","8","8","8","8","8","8","8","8","8","8","8","8","8"],["9","9","9","9","9","9","9","9","9","9","9","9","9","9","9","9","9","9","9","9"],["10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10"],["11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11"],["12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12"],["13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13"],["14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14"],["15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15"],["16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16"],["17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17"],["18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18"],["19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19"],["20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20"],["21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21"],["22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22"],["23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23"],["24","24","24","24","24","24","24","24","24","24","24","24","24","24","24","24","24","24","24","24"],["25","25","25","25","25","25","25","25","25","25","25","25","25","25","25","25","25","25","25","25"],]


  $(document).ready(function() {
    $('#example').DataTable({
      data: dataSet,
      columns: [{
          title: "C1"
        },
        {
          title: "C2"
        },
        {
          title: "C3"
        },
        {
          title: "C4"
        },
        {
          title: "C5"
        },
        {
          title: "C6"
        },
        {
          title: "C7"
        },
        {
          title: "C8"
        },
        {
          title: "C9"
        },
        {
          title: "C10"
        },
        {
          title: "C11"
        },
        {
          title: "C12"
        },
        {
          title: "C13"
        },
        {
          title: "C14"
        },
        {
          title: "C15"
        },
        {
          title: "C16"
        },
        {
          title: "C17"
        },
        {
          title: "C18"
        },
        {
          title: "C19"
        },
        {
          title: "C20"
        },
      ]
      // columns: [
      //     { title: "Name" },
      //     { title: "Position" },
      //     { title: "Office" },
      //     { title: "Extn." },
      //     { title: "Start date" },
      //     { title: "Salary" }
      // ]
    });
  });

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" width="100%"></table>

Answer 1

查看您的doc link，您似乎看到了一个数组并决定将数组标记为字符串（不好，因为数据表需要一个数组而不是看起来像数组的字符串）。您应该做的是使用JavaScript arrays 创建数组。

它与您的变量 dataTest 一起使用，因为它是一个实际的数组，并且（再次）不是一个看起来像数组的字符串

以下是如何为数据表正确创建数据的示例。

$(document).ready(function() {

  var dataSet = [];
  for (var prop = 0; prop < 5; prop++) {
    var innerArray = [];
    for (var innerProp = 0; innerProp < 3; innerProp++) {
      innerArray.push(innerProp);
    }
    dataSet.push(innerArray);
  }
  //console.log(dataSet);

  $('#example').DataTable({
    data: dataSet,
    columns: [{
        title: "C1"
      },
      {
        title: "C2"
      },
      {
        title: "C3"
      }
    ]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" width="100%"></table>