fn使用colspan更新多td

时间:2019-02-12 06:25:37

标签: javascript jquery datatable

我使用X,Y根据来自数据库的数据生成.fnUpdate()http://legacy.datatables.net/ref

table的标头中有一些老师,table正文中的td中有一些信息。

我可以在table中生成数据,但是我想显示多个TDs下的一个td

问题

我可以为生成的th设置colspan,但是我如何通过fnupdate为每个子td分配数据。 注意:教师人数和colspan数量将从数据库分配,我们应该动态检查colspan的数量并生成相关的td。

我想通过th生成这样的输出 enter image description here

fnUpdate

2 个答案:

答案 0 :(得分:2)

解决方案

在创建bAutoWidth时将false设置为dataTable

const exampleTable = $('#example').dataTable({
  "bAutoWidth": false
});

使用fnAddData()将新行添加到dataTable或使用fnUpdate()来更新整个表。

请参见下面的示例

<!DOCTYPE html>
<html>
  <head>
    <script src="http://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>

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" border='1'>
        <thead>
          <tr>
            <th colspan="2">Name</th>
            <th>Position</th>
            <th>Office</th>
            <th colspan="3">Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td>Tiger Nixon</td>
            <td>Tiger Nixon2</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>62</td>
            <td>63</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
          </tr>

        </tbody>
      </table>
    </div>

    <script>
        const oTable = $('#example').dataTable({
            'bAutoWidth': false
        });
        // Adding New Row
        oTable.fnAddData( ['a', 'b', 'c', 'd', 'e','f','g','h','i']);

        // Update whole table with new data
        oTable.fnUpdate( ['a', 'b', 'c', 'd', 'e','f','g','h','i']);
    </script>
  </body>
</html>

使用fnAddData()添加新行的结果

Update dataTable using fnAddData()

使用fnUpdate()更新整个表的结果

Update dataTable using fnUpdate()

答案 1 :(得分:0)

以下是可以帮助您的解决方案:

buildGame