jQuery Datatables使用总结

飞熊 • 2023年8月3日下午7:18 • 技术随笔 • 阅读 242

文章目录

引入
基本功能
- 搜索
- 排序
- 分页
- 自定义列
扩展选项
- 选中

参考链接

Datatables官网
 Datatables中文网

Datatables是一款jquery表格插件。
它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

优点如下：
分页，即时搜索和排序
几乎支持任何数据源：DOM， javascript， Ajax 和服务器处理
支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
各式各样的扩展: Editor, TableTools, FixedColumns ……
丰富多样的option和强大的API
支持国际化
超过2900+个单元测试
免费开源（ MIT license ）！商业支持

引入

简单案例：

<!--引入css-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
 
<!--引入JavaScript-->
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
 
<!--初始化代码-->
<script>
     $(document).ready(function() {
           $('#example').DataTable();
      });
</script>

<table id="example" class="row-border hover order-column" cellspacing="0" 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>
        ...
        </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>