DataTable 列名称在表标题中不可见[重复]

Question

数据表显示正确，但

DataTable

列名称在表标题中不可见，但根据此链接[示例]没有错误。哪种方式可以显示列名称？ HTML 索引.php

$(document).ready(function() {
      var data2 = [
        {
          "xx": "50",
          "yy": "30"
        },
        {
          "xx": "30",
          "yy": "20"
        }
      ];
      var table = $('#tbl').DataTable({
        columns: [
          { data: "xx" }, 
          { data: "yy" }
        ],
        data: data2
      })
});

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

<table id="tbl" width="100%"></table>

Answer 1

我以前从未使用过

DataTables

，所以我必须环顾四周，然后才发现提示指出，

如果您以对象数组的形式传递数据，那么 您需要手动指定每列的标题：

因此，下面的

cols

变量设置了一些无意义的列标题来说明上面的语句。

$(document).ready(function() {
      var data = [
        { "xx":80, "yy":30 },
        { "xx":30, "yy":20 },
        { "xx":28, "yy":560 },
        { "xx":340, "yy":120 },
        { "xx":130, "yy":820 },
        { "xx":350, "yy":920 },
        { "xx":3240, "yy":270 },
        { "xx":330, "yy":9720 },
        { "xx":4530, "yy":65420 },
        { "xx":860, "yy":30 },
        { "xx":30, "yy":230 },
        { "xx":238, "yy":5760 },
        { "xx":4340, "yy":120 },
        { "xx":1730, "yy":8920 },
        { "xx":350, "yy":920 },
        { "xx":3240, "yy":2740 },
        { "xx":3330, "yy":9720 },
        { "xx":4530, "yy":65420 }
      ];
      var cols=[
        { data: "xx", title:"Banana" }, 
        { data: "yy", title:"Mango" }
      ];
      var args={
        searching: true, 
        paging: true, 
        info: false,
        data:data,
        columns:cols
      };
      
      $('#dttbl').show();
      var table = $('#dttbl').DataTable(args)
});

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="//nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" />-
<script src="//nightly.datatables.net/js/jquery.dataTables.js"></script>

<table id="dttbl" width="100%">
</table>

为了避免手动添加自己的标题，您可以执行一些简单的数组修改来添加每个子对象中保存的值，如下所示：

  cols.forEach( obj=>{
    obj.title=obj.data
  })