Question

我想显示类似W3的表格。

代码：

  $('table_1').DataTable({
        ajax:'ajax_table_1.php',
        paging:false,
        
    });

<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table_1">
  <caption>Delivery slots:</caption>
  <tr>
    <td></td>
    <th scope="col">Monday</th>
    <th scope="col">Tuesday</th>
    <th scope="col">Wednesday</th>
    <th scope="col">Thursday</th>
    <th scope="col">Friday</th>
  </tr>
  <tr>
    <th scope="row">Morning</th>
    <td>Closed</td>
    <td>Open</td>
    <td>Open</td>
    <td>Closed</td>
    <td>Closed</td>
  </tr>
  <tr>
    <th scope="row">Evening</th>
    <td>Open</td>
    <td>Open</td>
    <td>Closed</td>
    <td>Closed</td>
    <td>Closed</td>
  </tr>
</table>

HTML显示了我要实现的目标。

如何设置我的数据数组，使其看起来像带有2个标题的实现表，以用ajax调用填充所有表数据？

Answer 1

您可以简单地渲染列以实现check here for the docs

显示您可以做什么的一小段代码是：

"columnDefs": [
 {
    "createdCell":  function (td, cellData, rowData, row, col) {
       $(td).attr("scope", "row"); 
    }
    "targets": 0 //this is your column number, just change it if you need another column
 }

]

如何使用DataTables插件显示带有2个标题的表？

1 个答案: