如何在数据表中显示带有子标题的标题答案

【问题标题】：How to show header with sub header in datatable如何在数据表中显示带有子标题的标题
【发布时间】：2021-01-05 11:53:50
【问题描述】：

我正在设计一个屏幕，想使用 datatable 显示一些表格数据，并希望显示带有子标题的表格标题，如下所示：

下面是我正在使用的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>

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

【问题讨论】：

标签： jquery datatable datatables datatables-1.10

【解决方案1】：

您不需要插件来执行此操作。只需使用简单的 html 显式创建标题：

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>

【讨论】：

@DeepakSavani 很高兴我能提供帮助。如果它帮助您解决问题，请将此或任何其他答案标记为已接受。
如图所示（更新）我需要在标题中添加一个额外的行。我该怎么办...？
@DeepakSavani 我试图回答最初发布的问题。如果您还有其他问题，请单独发布。同时，请花一些时间学习 HTML 的基础知识。