首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Datatables TableTools在同一页面上有多个表

在同一页面上有多个表格时,可以使用 DataTables 的 TableTools 插件来实现对每个表格的操作。以下是一些关于 DataTables 和 TableTools 的简要介绍和示例代码:

DataTables

DataTables 是一个用于 jQuery 的高度定制化的数据表格插件,它允许开发者轻松地将数据以表格的形式展示出来,并提供了丰富的功能和选项,例如分页、排序、搜索、固定列等。

TableTools

TableTools 是 DataTables 的一个扩展插件,它提供了一些额外的工具,例如导出表格数据为 CSV、Excel、PDF 等格式,以及打印表格等。

示例代码

以下是一个使用 DataTables 和 TableTools 的示例代码:

代码语言:html
复制
<!DOCTYPE html>
<html>
<head>
   <title>DataTables with TableTools</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/tabletools/2.2.5/css/dataTables.tableTools.min.css">
   <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
   <script type="text/javascript" src="https://cdn.datatables.net/tabletools/2.2.5/js/dataTables.tableTools.min.js"></script>
   <script type="text/javascript">
        $(document).ready(function() {
            // 初始化第一个表格
            $('#table1').DataTable({
                dom: 'T<"clear">lfrtip',
                tableTools: {
                    "sSwfPath": "https://cdn.datatables.net/tabletools/2.2.5/swf/copy_csv_xls_pdf.swf"
                }
            });

            // 初始化第二个表格
            $('#table2').DataTable({
                dom: 'T<"clear">lfrtip',
                tableTools: {
                    "sSwfPath": "https://cdn.datatables.net/tabletools/2.2.5/swf/copy_csv_xls_pdf.swf"
                }
            });
        });
    </script>
</head>
<body>
   <table id="table1" class="display">
       <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
            </tr>
        </thead>
       <tbody>
            <tr>
                <td>Row 1, Column 1</td>
                <td>Row 1, Column 2</td>
                <td>Row 1, Column 3</td>
            </tr>
            <tr>
                <td>Row 2, Column 1</td>
                <td>Row 2, Column 2</td>
                <td>Row 2, Column 3</td>
            </tr>
        </tbody>
    </table>

   <table id="table2" class="display">
       <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
            </tr>
        </thead>
       <tbody>
            <tr>
                <td>Row 1, Column 1</td>
                <td>Row 1, Column 2</td>
                <td>Row 1, Column 3</td>
            </tr>
            <tr>
                <td>Row 2, Column 1</td>
                <td>Row 2, Column 2</td>
                <td>Row 2, Column 3</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

在上面的示例代码中,我们使用了 DataTables 和 TableTools 插件来初始化两个表格,并且为每个表格添加了导出数据的工具栏。

需要注意的是,由于 TableTools 插件已经不再维护,因此需要使用一个替代的插件来实现类似的功能,例如 Buttons 插件。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的视频

领券