如何在数据表中显示 header 和 sub header

Question

我正在设计一个屏幕，想要使用 datatable 显示一些表格数据，并希望使用 sub header 显示 table header，如下所示：

以下是html和我正在使用的JS：

var datatbl = [
                    {id:1,name:"Deepak",location:"Surat",gender:"male", col:"red", dob:"07/02/1994"},
                    {id:2,name:"Ajinkya",location:"KP",gender:"male", col:"red", dob:"07/02/1994"},
                    {id:3,name:"Purv",location:"Ahm",gender:"male", col:"red", dob:"07/02/1994"},
                    {id:4,name:"Amol",location:"Pune",gender:"male", col:"red", dob:"07/02/1994"},
            ];
$(document).ready(function() {
    $('#example').DataTable( {
        data: datatbl,
        sWidth:"800px",
        columns: [
            { title:"ID",data: "id",name:"id",visible:false },
            { title:"Name",data: "name",name:"name",width:"30%" },
            { title:"Location",data: "location" },
            { title:"Gender",data: "gender" },
            { title:"Color",data: "col" },
            { title:"Date Of Birth",data: "dob" },
        ], 
    } );
} );

<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
    <link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" rel="stylesheet">
</head>
<body>
<table id="example" class="display nowrap cell-border"></table>
</body>
</html>

是否有任何插件或快速方法来获得所需的输出。

Answer 1

您不需要插件即可执行此操作。只需使用简单的 html 显式创建 header:

var datatbl = [{
    id: 1,
    name: "Deepak",
    location: "Surat",
    gender: "male",
    col: "red",
    dob: "07/02/1994"
  },
  {
    id: 2,
    name: "Ajinkya",
    location: "KP",
    gender: "male",
    col: "red",
    dob: "07/02/1994"
  },
  {
    id: 3,
    name: "Purv",
    location: "Ahm",
    gender: "male",
    col: "red",
    dob: "07/02/1994"
  },
  {
    id: 4,
    name: "Amol",
    location: "Pune",
    gender: "male",
    col: "red",
    dob: "07/02/1994"
  }
];
$(document).ready(function() {
    $('#example').DataTable({
      data: datatbl,
      sWidth: "800px",
      columns: [{
        title: "ID",
        data: "id",
        name: "id",
        visible: false
      }, {
        title: "Name",
        data: "name",
        name: "name",
        width: "30%"
      }, {
        title: "Location",
        data: "location"
      }, {
        title: "Gender",
        data: "gender"
      }, {
        title: "Color",
        data: "col"
      }, {
        title: "Date Of Birth",
        data: "dob"
      }, ],
    });
  }

);

th {
  border-top: 1px solid #aaaaaa;
  border-bottom: 1px solid #aaaaaa;
  border-right: 1px solid #aaaaaa;
}
 
th:first-child {
  border-left: 1px solid #aaaaaa;
}

<html>

<head>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>

  <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
  <link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" rel="stylesheet">
</head>

<body>
  <table id="example" class="display nowrap cell-border">
    <thead>
      <tr>
        <th colspan=3>Basic info</th>
        <th colspan=3>Additional data</th>
      </tr>
      <tr>
        <th></th>
        <th>Name</th>
        <th>Location</th>
        <th>Gender</th>
        <th>Color</th>
        <th>Date of Birth</th>
      </tr>
    </thead>
  </table>
</body>

</html>

如何在数据表中显示 header 和 sub header

How to show header with sub header in datatable

jquery

datatable

datatables

datatables-1.10