jquery DataTable列名在表头中不可见[重复]

3gtaxfhh 于 2023-10-17 发布在 jQuery

关注(0)|答案(1)|浏览(98)

此问题已在此处有答案：

Jquery datatables not showing column headings（5个答案）
column name not displayed in datatables（1个答案）
17天前关闭
数据表显示正确，但DataTable列名在表头中不可见，但相应地，此链接example(https://datatables.net/manual/data/)没有错误。哪种方式可以显示列名？HTML index.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>

jquery

来源：https://stackoverflow.com/questions/77202821/datatable-column-names-is-invisible-in-header-of-table

1条答案

按热度按时间

5anewei61#

我从来没有使用过DataTables之前，所以我不得不环顾四周，我发现一个hint的国家，
如果你以对象数组的形式传入数据，那么你需要手动指定每一列的标题：
因此，下面的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
  })

赞(0）回复(0）举报 2023-10-17

我来回答

jquery DataTable列名在表头中不可见[重复]

1条答案

相关问题

热门标签

最新问答