DataTables表格库(一)

news2024/12/24 8:12:37

目录

1、零配置使用

1.2、代码

1.3、步骤

1.4、效果

2、禁用分页，排序等功能的配置

2.1、说明

2.2、代码

2.3、效果

3、默认排序配置

3.1、说明

3.2、代码

3.3、效果

4、多列排序

4.1、说明

4.2、代码示例

4.3、效果

5、多个表格

5.1、说明

5.2、代码示例

5.3、效果

 

1、零配置使用

1.2、代码

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>不使用任何配置项</title>
    <link rel="stylesheet" href="./css/jquery.dataTables.css">
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#zeroconfig').DataTable({
                language: {
                      "sProcessing": "处理中...",
                      "sLengthMenu": "显示 _MENU_ 项结果",
                      "sZeroRecords": "没有匹配结果",
                      "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                      "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                      "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                      "sInfoPostFix": "", // sInfo后面追加的内容
                      "sSearch": "搜索:",
                      "sUrl": "",
                      "sEmptyTable": "表中数据为空",
                      "sLoadingRecords": "载入中...",
                      "sInfoThousands": ",",
                      "oPaginate": {
                          "sFirst": "首页",
                          "sPrevious": "上页",
                          "sNext": "下页",
                          "sLast": "末页"
                      },
                      "oAria": {
                          "sSortAscending": ": 以升序排列此列",
                          "sSortDescending": ": 以降序排列此列"
                      }
                  }
            });
        });
    </script>
    <style>
        .dt-example{
            text-align: left;
            margin: 0px 80px;
        }
        th{
            padding: 8px 10px;
        }
        .maintitle{
            text-align: center;
        }
    </style>
</head>
<body class="dt-example">
    <h1 class="maintitle">除了初始化和中文化之外不使用任何配置项，只使用其样式和js</h1>
    <table id="zeroconfig" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>
                <td>$372,000</td>
            </tr>
            <tr>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012/08/06</td>
                <td>$137,500</td>
            </tr>
            <tr>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010/10/14</td>
                <td>$327,900</td>
            </tr>
            <tr>
                <td>Charde Marshall</td>
                <td>Regional Director</td>
                <td>San Francisco</td>
                <td>36</td>
                <td>2008/10/16</td>
                <td>$470,600</td>
            </tr>
            <tr>
                <td>Haley Kennedy</td>
                <td>Senior Marketing Designer</td>
                <td>London</td>
                <td>43</td>
                <td>2012/12/18</td>
                <td>$313,500</td>
            </tr>
            <tr>
                <td>Tatyana Fitzpatrick</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>19</td>
                <td>2010/03/17</td>
                <td>$385,750</td>
            </tr>
            <tr>
                <td>Timothy Mooney</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>37</td>
                <td>2008/12/11</td>
                <td>$136,200</td>
            </tr>
            <tr>
                <td>Jackson Bradshaw</td>
                <td>Director</td>
                <td>New York</td>
                <td>65</td>
                <td>2008/09/26</td>
                <td>$645,750</td>
            </tr>
            <tr>
                <td>Olivia Liang</td>
                <td>Support Engineer</td>
                <td>Singapore</td>
                <td>64</td>
                <td>2011/02/03</td>
                <td>$234,500</td>
            </tr>
            
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>
</body>
</html>

1.3、步骤

  1. 引入DataTable官方样式

  2. 引入jQuery3.5.1

  3. 引入DataTable官方JavaScript

  4. 初始化DataTab。

    $(document).ready(function () {
    $('#zeroconfig').DataTable({
        language: {
            "sProcessing": "处理中...",
            "sLengthMenu": "显示 _MENU_ 项结果",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "", // sInfo后面追加的内容
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        }
    });
});

    其中language部分是将程序原本的英文配置为中文。jQuery选择器中是表格的id名。

  5. 保存后在浏览器查看即可。

1.4、效果

 

2、禁用分页，排序等功能的配置

2.1、说明

和1中对比仅仅是初始化时，添加若干配置项。

2.2、代码

如下对比可知：

//配置了中文，禁用了分页，排序，信息提示
$(document).ready(function () {
    $('#disable').DataTable({
        "paging":false,
        "ordering":false,
        "info":false,
        language: {
            "sProcessing": "处理中...",
            "sLengthMenu": "显示 _MENU_ 项结果",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "", // sInfo后面追加的内容
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        }
    });
});
​
// 只配置了中文，未配置其他内容
$(document).ready(function () {
    $('#zeroconfig').DataTable({
        language: {
            "sProcessing": "处理中...",
            "sLengthMenu": "显示 _MENU_ 项结果",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "", // sInfo后面追加的内容
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        }
    });
});

2.3、效果

效果如图所示：

 

标绿的部分为DataTable禁用的某些功能。

3、默认排序配置

3.1、说明

在DataTable初始化的时候，我们可以配置表格的默认排序，可以配置第几列为哪种排序。

"order":[[3,'desc']]，值为数组，配置每一列时也是数组。第一个值为表格中的哪一列，该示例中表示表格第4列(从零开始)；第二项值表示按倒序还是正序排列，该示例中为倒序。

3.2、代码

如下所示

$('#default-order').DataTable({
    "order":[[3,'desc']],
    language: {
        "sProcessing": "处理中...",
        "sLengthMenu": "显示 _MENU_ 项结果",
        "sZeroRecords": "没有匹配结果",
        "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
        "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
        "sInfoPostFix": "", // sInfo后面追加的内容
        "sSearch": "搜索:",
        "sUrl": "",
        "sEmptyTable": "表中数据为空",
        "sLoadingRecords": "载入中...",
        "sInfoThousands": ",",
        "oPaginate": {
            "sFirst": "首页",
            "sPrevious": "上页",
            "sNext": "下页",
            "sLast": "末页"
        },
        "oAria": {
            "sSortAscending": ": 以升序排列此列",
            "sSortDescending": ": 以降序排列此列"
        }
    }
});
});

3.3、效果

配置完成后的效果如图所示，第四列，也就是Age列为倒序排列：

 

4、多列排序

4.1、说明

DataTable可以通过配置对多个列进行排序，这可以通过多种不同的方式进行激活：

  • 用户使用 Shift 键点击了一列（将被点击的列添加为二级、三级等排序列）。

  • 在每个列的基础上（即按特定列排序，如果第一列中的数据相同，则按第二列排序），可以使用 columns.orderData 选项。

  • 使用 columns.orderData 选项默认指定多列排序顺序（例如 [0, 1]）。

  • 通过 order() API 方法。

请注意，用户使用 Shift 键点击以排序多个列的能力可以通过 orderMulti 选项禁用。

下面的示例显示了第一列在表格中对第二列应用了二级排序，反之亦然；第二列直接与第一列关联，而工资列则与名字列关联。

上述内容为我翻译的官网上的内容。

内容大致意思为：可以为表格设置多列排序，假如第一列为姓名列，第二列为地址列，第三列为办公地点列，第四列为工资列，

将第一列设为多列排序的一级，第二列设为多列排序的二级，第四列为多列排序的三级。当通过第一级进行排序出现许多相同姓名的数据时，这些相同的数据通过第二列进行排序，如果第二列出现了若干相同地点的数据，则通过第三级，也就是工资进行排序。

换言之：整个表格的数据排列是通过第一列，第二列，第四列同时决定的。

4.2、代码示例

代码示例：

<!DOCTYPE html>
<html>
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多列排序</title>
    <link rel="stylesheet" href="./css/jquery.dataTables.css">
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#multi-col').DataTable({
                columnDefs: [{
                    targets: [0],
                    orderData: [0, 1]
                }, {
                    targets: [1],
                    orderData: [1, 4]
                }],
                language: {
                    "sProcessing": "处理中...",
                    "sLengthMenu": "显示 _MENU_ 项结果",
                    "sZeroRecords": "没有匹配结果",
                    "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                    "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                    "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                    "sInfoPostFix": "", // sInfo后面追加的内容
                    "sSearch": "搜索:",
                    "sUrl": "",
                    "sEmptyTable": "表中数据为空",
                    "sLoadingRecords": "载入中...",
                    "sInfoThousands": ",",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "上页",
                        "sNext": "下页",
                        "sLast": "末页"
                    },
                    "oAria": {
                        "sSortAscending": ": 以升序排列此列",
                        "sSortDescending": ": 以降序排列此列"
                    }
                }
            });
        });
    </script>
    <style>
        .dt-example {
            text-align: left;
            margin: 0px 80px;
        }
​
        th {
            padding: 8px 10px;
        }
​
        .maintitle {
            text-align: center;
        }
    </style>
</head>
​
<body class="dt-example">
    <h1 class="maintitle">多列排序</h1>
    <table id="multi-col" class="display" style="width:100%">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger</td>
                <td>Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Airi</td>
                <td>Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Airi</td>
                <td>Kelly</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Airi</td>
                <td>Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi</td>
                <td>Kelly</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td>Brielle</td>
                <td>Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>$372,000</td>
            </tr>
            <tr>
                <td>Herrod</td>
                <td>Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>$137,500</td>
            </tr>
            <tr>
                <td>Airi</td>
                <td>Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>$327,900</td>
            </tr>
            <tr>
                <td>Colleen</td>
                <td>Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>$205,500</td>
            </tr>
            <tr>
                <td>Sonya</td>
                <td>Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>$103,600</td>
            </tr>
            <tr>
                <td>Jena</td>
                <td>Gaines</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>$90,560</td>
            </tr>
            <tr>
                <td>Quinn</td>
                <td>Flynn</td>
                <td>Support Lead</td>
                <td>Edinburgh</td>
                <td>$342,000</td>
            </tr>
            <tr>
                <td>Charde</td>
                <td>Marshall</td>
                <td>Regional Director</td>
                <td>San Francisco</td>
                <td>$470,600</td>
            </tr>
            <tr>
                <td>Haley</td>
                <td>Kennedy</td>
                <td>Senior Marketing Designer</td>
                <td>London</td>
                <td>$313,500</td>
            </tr>
            <tr>
                <td>Tatyana</td>
                <td>Fitzpatrick</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>$385,750</td>
            </tr>
            <tr>
                <td>Michael</td>
                <td>Silva</td>
                <td>Marketing Designer</td>
                <td>London</td>
                <td>$198,500</td>
            </tr>
            <tr>
                <td>Paul</td>
                <td>Byrd</td>
                <td>Chief Financial Officer (CFO)</td>
                <td>New York</td>
                <td>$725,000</td>
            </tr>
            <tr>
                <td>Gloria</td>
                <td>Little</td>
                <td>Systems Administrator</td>
                <td>New York</td>
                <td>$237,500</td>
            </tr>
            <tr>
                <td>Bradley</td>
                <td>Greer</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>$132,000</td>
            </tr>
            <tr>
                <td>Dai</td>
                <td>Rios</td>
                <td>Personnel Lead</td>
                <td>Edinburgh</td>
                <td>$217,500</td>
            </tr>
            <tr>
                <td>Jenette</td>
                <td>Caldwell</td>
                <td>Development Lead</td>
                <td>New York</td>
                <td>$345,000</td>
            </tr>
            <tr>
                <td>Yuri</td>
                <td>Berry</td>
                <td>Chief Marketing Officer (CMO)</td>
                <td>New York</td>
                <td>$675,000</td>
            </tr>
            <tr>
                <td>Caesar</td>
                <td>Vance</td>
                <td>Pre-Sales Support</td>
                <td>New York</td>
                <td>$106,450</td>
            </tr>
            <tr>
                <td>Doris</td>
                <td>Wilder</td>
                <td>Sales Assistant</td>
                <td>Sydney</td>
                <td>$85,600</td>
            </tr>
            <tr>
                <td>Angelica</td>
                <td>Ramos</td>
                <td>Chief Executive Officer (CEO)</td>
                <td>London</td>
                <td>$1,200,000</td>
            </tr>
            <tr>
                <td>Gavin</td>
                <td>Joyce</td>
                <td>Developer</td>
                <td>Edinburgh</td>
                <td>$92,575</td>
            </tr>
            <tr>
                <td>Jennifer</td>
                <td>Chang</td>
                <td>Regional Director</td>
                <td>Singapore</td>
                <td>$357,650</td>
            </tr>
            <tr>
                <td>Brenden</td>
                <td>Wagner</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>$206,850</td>
            </tr>
            <tr>
                <td>Fiona</td>
                <td>Green</td>
                <td>Chief Operating Officer (COO)</td>
                <td>San Francisco</td>
                <td>$850,000</td>
            </tr>
            <tr>
                <td>Shou</td>
                <td>Itou</td>
                <td>Regional Marketing</td>
                <td>Tokyo</td>
                <td>$163,000</td>
            </tr>
            <tr>
                <td>Michelle</td>
                <td>House</td>
                <td>Integration Specialist</td>
                <td>Sydney</td>
                <td>$95,400</td>
            </tr>
            <tr>
                <td>Suki</td>
                <td>Burks</td>
                <td>Developer</td>
                <td>London</td>
                <td>$114,500</td>
            </tr>
            <tr>
                <td>Prescott</td>
                <td>Bartlett</td>
                <td>Technical Author</td>
                <td>London</td>
                <td>$145,000</td>
            </tr>
            <tr>
                <td>Gavin</td>
                <td>Cortez</td>
                <td>Team Leader</td>
                <td>San Francisco</td>
                <td>$235,500</td>
            </tr>
            <tr>
                <td>Martena</td>
                <td>Mccray</td>
                <td>Post-Sales support</td>
                <td>Edinburgh</td>
                <td>$324,050</td>
            </tr>
            <tr>
                <td>Unity</td>
                <td>Butler</td>
                <td>Marketing Designer</td>
                <td>San Francisco</td>
                <td>$85,675</td>
            </tr>
            <tr>
                <td>Howard</td>
                <td>Hatfield</td>
                <td>Office Manager</td>
                <td>San Francisco</td>
                <td>$164,500</td>
            </tr>
            <tr>
                <td>Hope</td>
                <td>Fuentes</td>
                <td>Secretary</td>
                <td>San Francisco</td>
                <td>$109,850</td>
            </tr>
            <tr>
                <td>Vivian</td>
                <td>Harrell</td>
                <td>Financial Controller</td>
                <td>San Francisco</td>
                <td>$452,500</td>
            </tr>
            <tr>
                <td>Timothy</td>
                <td>Mooney</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>$136,200</td>
            </tr>
            <tr>
                <td>Jackson</td>
                <td>Bradshaw</td>
                <td>Director</td>
                <td>New York</td>
                <td>$645,750</td>
            </tr>
            <tr>
                <td>Olivia</td>
                <td>Liang</td>
                <td>Support Engineer</td>
                <td>Singapore</td>
                <td>$234,500</td>
            </tr>
            <tr>
                <td>Bruno</td>
                <td>Nash</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>$163,500</td>
            </tr>
            <tr>
                <td>Sakura</td>
                <td>Yamamoto</td>
                <td>Support Engineer</td>
                <td>Tokyo</td>
                <td>$139,575</td>
            </tr>
            <tr>
                <td>Thor</td>
                <td>Walton</td>
                <td>Developer</td>
                <td>New York</td>
                <td>$98,540</td>
            </tr>
            <tr>
                <td>Finn</td>
                <td>Camacho</td>
                <td>Support Engineer</td>
                <td>San Francisco</td>
                <td>$87,500</td>
            </tr>
            <tr>
                <td>Serge</td>
                <td>Baldwin</td>
                <td>Data Coordinator</td>
                <td>Singapore</td>
                <td>$138,575</td>
            </tr>
            <tr>
                <td>Zenaida</td>
                <td>Frank</td>
                <td>Software Engineer</td>
                <td>New York</td>
                <td>$125,250</td>
            </tr>
            <tr>
                <td>Zorita</td>
                <td>Serrano</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>$115,000</td>
            </tr>
            <tr>
                <td>Jennifer</td>
                <td>Acosta</td>
                <td>Junior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>$75,650</td>
            </tr>
            <tr>
                <td>Cara</td>
                <td>Stevens</td>
                <td>Sales Assistant</td>
                <td>New York</td>
                <td>$145,600</td>
            </tr>
            <tr>
                <td>Hermione</td>
                <td>Butler</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>$356,250</td>
            </tr>
            <tr>
                <td>Lael</td>
                <td>Greer</td>
                <td>Systems Administrator</td>
                <td>London</td>
                <td>$103,500</td>
            </tr>
            <tr>
                <td>Jonas</td>
                <td>Alexander</td>
                <td>Developer</td>
                <td>San Francisco</td>
                <td>$86,500</td>
            </tr>
            <tr>
                <td>Shad</td>
                <td>Decker</td>
                <td>Regional Director</td>
                <td>Edinburgh</td>
                <td>$183,000</td>
            </tr>
            <tr>
                <td>Michael</td>
                <td>Bruce</td>
                <td>Javascript Developer</td>
                <td>Singapore</td>
                <td>$183,000</td>
            </tr>
            <tr>
                <td>Donna</td>
                <td>Snider</td>
                <td>Customer Support</td>
                <td>New York</td>
                <td>$112,000</td>
            </tr>
        </tbody>
    </table>
</body>
​
</html>

4.3、效果

效果如图所示：

 

如图所示，当第一列值相同时，按照第二列进行排序，第二列值相同的时候，按照第五列进行排序。

注意：使用多列排序的时候需要按住shift然后点击排序箭头。

5、多个表格

5.1、说明

有时候，我们希望使用一个初始化语句，来初始化两个表格。我们可以通过jQuery的id选择器来完成这个功能。

虽然一个初始化语句初始化了多个表格，但是两个表格是独立的，操作一个表格并不会影响另一个表格的状态。但是它们共享初始化参数，比如你想要两个表格都不分页的话，只需一个语句即可，因为两个表格是共享这条初始化语句的。

5.2、代码示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>多个表格</title>
    <link
      rel="stylesheet"
      href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css"
    />
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script>
      $(document).ready(function () {
        $("table.display").DataTable();
      });
    </script>
    <style>
      .dt-example {
        text-align: left;
        margin: 0px 80px;
      }
      th {
        padding: 8px 10px;
      }
      .maintitle {
        text-align: center;
      }
      div.dataTables_wrapper {
        margin-bottom: 3em;
      }
​
      .title-red {
        color: rgb(216, 106, 106);
      }
    </style>
  </head>
  <body class="dt-example">
    <h1 class="maintitle">一个初始化语句初始化两个表格</h1>
    <h3 class="title-red">表格1</h3>
    <table id="" class="display" style="width: 100%">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Salary</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tiger Nixon</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>$320,800</td>
        </tr>
        <tr>
          <td>Cedric Kelly</td>
          <td>Senior Javascript Developer</td>
          <td>Edinburgh</td>
          <td>22</td>
          <td>$433,060</td>
        </tr>
        <tr>
          <td>Sonya Frost</td>
          <td>Software Engineer</td>
          <td>Edinburgh</td>
          <td>23</td>
          <td>$103,600</td>
        </tr>
        <tr>
          <td>Quinn Flynn</td>
          <td>Support Lead</td>
          <td>Edinburgh</td>
          <td>22</td>
          <td>$342,000</td>
        </tr>
        <tr>
          <td>Dai Rios</td>
          <td>Personnel Lead</td>
          <td>Edinburgh</td>
          <td>35</td>
          <td>$217,500</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Salary</th>
        </tr>
      </tfoot>
    </table>
    <h3 class="title-red">表格2</h3>
    <table id="" class="display" style="width: 100%">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Salary</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Michael Silva</td>
          <td>Marketing Designer</td>
          <td>London</td>
          <td>66</td>
          <td>$198,500</td>
        </tr>
        <tr>
          <td>Bradley Greer</td>
          <td>Software Engineer</td>
          <td>London</td>
          <td>41</td>
          <td>$132,000</td>
        </tr>
        <tr>
          <td>Angelica Ramos</td>
          <td>Chief Executive Officer (CEO)</td>
          <td>London</td>
          <td>47</td>
          <td>$1,200,000</td>
        </tr>
        <tr>
          <td>Suki Burks</td>
          <td>Developer</td>
          <td>London</td>
          <td>53</td>
          <td>$114,500</td>
        </tr>
        <tr>
          <td>Prescott Bartlett</td>
          <td>Technical Author</td>
          <td>London</td>
          <td>27</td>
          <td>$145,000</td>
        </tr>
        <tr>
          <td>Timothy Mooney</td>
          <td>Office Manager</td>
          <td>London</td>
          <td>37</td>
          <td>$136,200</td>
        </tr>
        <tr>
          <td>Bruno Nash</td>
          <td>Software Engineer</td>
          <td>London</td>
          <td>38</td>
          <td>$163,500</td>
        </tr>
        <tr>
          <td>Hermione Butler</td>
          <td>Regional Director</td>
          <td>London</td>
          <td>47</td>
          <td>$356,250</td>
        </tr>
        <tr>
          <td>Lael Greer</td>
          <td>Systems Administrator</td>
          <td>London</td>
          <td>21</td>
          <td>$103,500</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Salary</th>
        </tr>
      </tfoot>
    </table>
  </body>
</html>
 

有代码可知，通过标签类选择器，选中了两个类名为display的表格，然后进行初始化。
 

5.3、效果
 

这么做之后，在浏览器中我们可以看到：
 

 

 

 
 


                

        

        

            

            

            

              

                本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/582009.html
              

              如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！
            

            
            

              
            

          


            
相关文章

          
            
                  

                    

                      

                        

                          
                            【源码解析】SpringBoot使用DeferredResult实现长轮询的原理分析
                        

                      

                      

                        

                          【源码解析】SpringBoot使用DeferredResult实现长轮询的原理分析
                        

                        

                          使用背景 
在Nacos配置更新和Apollo的配置更新&#xff0c;我们可以看到长轮询&#xff08;长连接&#xff09;的身影。长连接的实现可以节约系统资源&#xff0c;长连接可以在连接建立后持续通信&#xff0c;避免频繁地建立和断开连接&#xff0c;减少系统开销。使用长连接可以…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            LAMP的运用
                        

                      

                      

                        

                          LAMP的运用
                        

                        

                          LAMP的运用 一、LAMP二、编译安装apache http服务三、编译安装mysqld服务四、编译安装PHP解析环境五、安装论坛 一、LAMP 
LAMP架构是目前成熟的企业网站应用模式之一&#xff0c;指的是协同工作的一整套系统和相关软件&#xff0c;能够提供动态Web站点服务及其应用开发环境。L…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            《痞子衡嵌入式半月刊》 第 77 期
                        

                      

                      

                        

                          《痞子衡嵌入式半月刊》 第 77 期
                        

                        

                          痞子衡嵌入式半月刊&#xff1a; 第 77 期 这里分享嵌入式领域有用有趣的项目/工具以及一些热点新闻&#xff0c;农历年分二十四节气&#xff0c;希望在每个交节之日准时发布一期。 本期刊是开源项目(GitHub: JayHeng/pzh-mcu-bi-weekly)&#xff0c;欢迎提交 issue&#xff0c…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            【JavaSE】Java基础语法(二十八)：HashSet集合
                        

                      

                      

                        

                          【JavaSE】Java基础语法(二十八)：HashSet集合
                        

                        

                          文章目录 1. HashSet集合概述和特点2. HashSet集合的基本应用3. 哈希值4. HashSet集合存储学生对象并遍历【应用】 1. HashSet集合概述和特点 
底层数据结构是哈希表存取无序不可以存储重复元素没有索引,不能使用普通for循环遍历 2. HashSet集合的基本应用 
存储字符串并遍历 
…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            Pytorch深度学习之神经网络入门详解
                        

                      

                      

                        

                          Pytorch深度学习之神经网络入门详解
                        

                        

                          目录 
Pytorch 入门 
1.将每个图片的label作为txt文件写入另外一个文件夹&#xff08;txt文件名与图片文件名相同&#xff09; 
2.tensorboard的summary writer 
3.torchvision中的transforms 
4.DataLoader 
5.神经网络-卷积层Conv2d 
6.最大池化层 
7.非线性激活函数Relu 
9.…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            微信的大动作，很多人要颤抖了
                        

                      

                      

                        

                          微信的大动作，很多人要颤抖了
                        

                        

                          4月25日&#xff0c;微信团队发布关于微信公众号营销内容合规规范通知&#xff0c;要求公众号在投放商业广告时需要标注广告字样。 刚开始觉得也没啥&#xff0c;无非就是加个广告的字样&#xff0c;让消费者可以及时识别出来&#xff0c; 但从效果来看&#xff0c;似乎效果并不…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            华为OD机试真题B卷 Java 实现【猜密码】
                        

                      

                      

                        

                          华为OD机试真题B卷 Java 实现【猜密码】
                        

                        

                          一、题目描述 
小杨申请了一个保密柜，但是他忘记了密码。只记得密码都是数字，而且所有数字都是不重复的。 
请你根据他记住的数字范围和密码的最小数字数量，帮他算下有哪些可能的组合，规则如下： 输出的组合都是从可选的数字范围中选取的，且不能重复；输出的密码数字要按照…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            意外的坚持，意外的收获！
                        

                      

                      

                        

                          意外的坚持，意外的收获！
                        

                        

                          前言&#xff1a; 转眼间&#xff0c;2023就快过了一半&#xff0c;回忆间感觉跟过完年没多久一样&#xff1b;时间是真的过的快...... 简单总结一下最近&#xff1a; 一、锻炼身体&#xff1a; 最近这段时间开始恢复锻炼身体&#xff0c;现在感觉一天下班回来&#xff0c;身体…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            Java 21 新特性和改进
                        

                      

                      

                        

                          Java 21 新特性和改进
                        

                        

                          Java 21 是 Java 17 之后的下一个 LTS 版本。虚拟线程在 Java 21 中将成为正式功能。可以预期的是&#xff0c;Java 21 会成为一个很流行的 Java 版本。 Java 21 将在 2023 年 9 月 19 日发布。目前 Java 21 包含的内容已经基本确定了。下面来梳理一下 Java 21 中会包含的内容。…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            【AI提示】ChatGPT提示工程课程（吴恩达OpenAI）转换文本（中文chatgpt版）
                        

                      

                      

                        

                          【AI提示】ChatGPT提示工程课程（吴恩达OpenAI）转换文本（中文chatgpt版）
                        

                        

                          设置 翻译 通用翻译器 语调变换 格式转换 拼写检查/语法检查。 转换 在本笔记中&#xff0c;我们将探索如何使用大型语言模型进行文本转换任务&#xff0c;例如语言翻译、拼写和语法检查、语气调整和格式转换。 设置 import openai
import osfrom dotenv import load_dotenv, f…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            Maven初级
                        

                      

                      

                        

                          Maven初级
                        

                        

                          Maven初级 
Maven简介 
传统项目管理状态分析 
jar包不统一&#xff0c;jar包不兼容工程升级维护过程操作繁琐 Maven是什么 
Maven的本质是一个项目管理工具&#xff0c;将项目开发和管理过程抽象成一个项目对象模型&#xff08;POM&#xff09;POM&#xff1a;项目对象模型 Ma…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            一图看懂 itsdangerous 模块：将受信任的数据传递到不受信任的环境的帮助工具，资料整理+笔记（大全）
                        

                      

                      

                        

                          一图看懂 itsdangerous 模块：将受信任的数据传递到不受信任的环境的帮助工具，资料整理+笔记（大全）
                        

                        

                          本文由 大侠(AhcaoZhu)原创&#xff0c;转载请声明。 链接: https://blog.csdn.net/Ahcao2008 一图看懂 itsdangerous 模块&#xff1a;将受信任的数据传递到不受信任的环境的帮助工具&#xff0c;资料整理笔记&#xff08;大全&#xff09; &#x1f9ca;摘要&#x1f9ca;模块…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            Ae：跟踪摄像机
                        

                      

                      

                        

                          Ae：跟踪摄像机
                        

                        

                          在时间轴面板上选择要跟踪的素材图层&#xff0c;在跟踪器面板中单击跟踪摄像机 Track Camera按钮之后&#xff0c;会向素材图层添加“3D 摄像机跟踪器” 3D Camera Tracker效果&#xff0c;并立即对视频画面逐帧分析以反求原始摄像机运动。 还有其它几种添加 3D 摄像机跟踪器效…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            GeForce RTX 3060 Ti+cuda 11.6+Anaconda3搭建Pytorch深度学习环境
                        

                      

                      

                        

                          GeForce RTX 3060 Ti+cuda 11.6+Anaconda3搭建Pytorch深度学习环境
                        

                        

                          室友新购入一个笔记本&#xff0c;笔记本的显卡是GeForce RTX 3060 Ti&#xff0c;记录一下使用GeForce RTX 3060 Ticuda 11.6Anaconda3搭建Pytorch深度学习环境。 
安装很简单&#xff0c;当你有了Python环境时记住一个核心命令即可&#xff0c;显卡驱动因该在之前已经安装过了…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            ChatGPT 与我合力开发 xargin blog archive 插件：曹大博客的新奇探险
                        

                      

                      

                        

                          ChatGPT 与我合力开发 xargin blog archive 插件：曹大博客的新奇探险
                        

                        

                          之前写的批量删除 chatGPT 对话的插件[1]&#xff0c;最近我收到了一个五星好评&#xff1a; 虽然不赚钱&#xff0c;交个朋友嘛&#xff0c;还是挺高兴的。而且借助 chatGPT&#xff0c;我是在与全世界的用户交流&#xff0c;想想就激动。 最近我发现自己让 chatGPT 帮忙写前端…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            jQuery其他方法及插件使用
                        

                      

                      

                        

                          jQuery其他方法及插件使用
                        

                        

                          1. 拷贝对象 
<!DOCTYPE html>
<html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width,…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            跨域 + 四种解决办法
                        

                      

                      

                        

                          跨域 + 四种解决办法
                        

                        

                          目录 同源策略 解决方案 
1、jsonp 
2、前端代理 
3、后端解决 
4、Nginx代理 同源策略 说到跨域就不得不提到同源策略&#xff0c;什么是同源策略&#xff1f; 请求的时候拥有相同的  协议 域名 端口 只要有一个不同就属于跨域 解决方案 
解决跨域问题一共有四种方式&#xff…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            chatgpt赋能python：Python中的Join方法详解：简化拼接字符串的操作
                        

                      

                      

                        

                          chatgpt赋能python：Python中的Join方法详解：简化拼接字符串的操作
                        

                        

                          Python中的Join方法详解&#xff1a;简化拼接字符串的操作 
在Python编程中&#xff0c;拼接字符串是一项常见的操作。在过去&#xff0c;我们通常使用“”符号来连接多个字符串。但是&#xff0c;这种方法不是很高效&#xff0c;特别是当需要拼接大量字符串时。这时候&#xf…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            基于html+css的图展示98
                        

                      

                      

                        

                          基于html+css的图展示98
                        

                        

                          准备项目 
项目开发工具 
Visual Studio Code 1.44.2 版本: 1.44.2 提交: ff915844119ce9485abfe8aa9076ec76b5300ddd 日期: 2020-04-16T16:36:23.138Z Electron: 7.1.11 Chrome: 78.0.3904.130 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Windows_NT x64 10.0.19044 
项目…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            python+django+vue学生在线选课系统93pul
                        

                      

                      

                        

                          python+django+vue学生在线选课系统93pul
                        

                        

                          随着信息化时代的到来&#xff0c;网络系统都趋向于智能化、系统化&#xff0c;选课系统也不例外&#xff0c;但目前国内的有些学校仍都使用人工管理&#xff0c;学校规模越来越大&#xff0c;同时信息量也越来越庞大&#xff0c;人工管理显然已无法应对时代的变化&#xff0c;…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
       
      
        

        

          

            



                
                
                

            

          

          

            



              
推荐文章

              
            

          


          

            


                
                
                
            

          

          

            

              
最新文章

              
            

          

          

            

            
            
            
            

          

        

      

    

    

      

        

                    Copyright @ 2022~2023