DataTables表格

首先分享一个DataTables实例：

https://www.jianshu.com/p/b3bce8b0c922

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

1>分页，即时搜索和排序

2>几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理

3>支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation

4>各式各样的扩展: Editor, TableTools, FixedColumns ……

5>丰富多样的option和强大的API

6>支持国际化

7>超过2900+个测试单元

8>免费开源 （ MIT license ）

中文官网：http://datatables.club/

官网不仅提供了各种版本免费的下载安装包，下面还有网友的技术讨论帖，开发中经常遇到的问题基本都可以找到解决方法。

中文使用手册：http://datatables.club/manual/

使用手册详细介绍了DataTables所支持的各种操作。

点击进入中文官网可以下载DataTables的一个包，如图：
包的内容
其中的example为其一个样例，当时用DataTables时引入的是media文件夹，里面包括DataTables的css,js,image文件，然后在html文档中引入即可(作为JQuery插件，jQuery1.7或更高版本将与DataTables一起工作，)
这里写图片描述
如果想要DataTables运行，首先必须得有语义化的thead部分，其次：
一、将表格写死的方法

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="media/css/jquery.dataTables.css">
    <script type="text/javascript" src="media/js/jquery.dataTables.js"></script>
    <script type="text/javascript">
        $(function () {
            // body...
            $("#example").dataTable()
        })
    </script>
</head>
<body>
<table id="example">
    <thead>
        <tr>
            <th>名称</th>
            <th>名称</th>
            <th>名称</th>
            <th>名称</th>
            <th>名称</th>
            <th>名称</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>csdn</td>
            <td>csdn</td>
            <td>csdn</td>
            <td>csdn</td>
            <td>csdn</td>
            <td>csdn</td>
        </tr>
    </tbody>
</table>
</body>
</html>

二、用数组的方法，进行

猜你喜欢