DataTables中文网推出了 第一篇 关于DataTables和其余表格插件比较后，为了把让这个比较更有意义，更能帮助到你们，DataTables中文网 作了问卷调查，根据小伙伴们的填写我概括了一下，一个表格插件关注点在如下三个部分基础、高级的和进阶：javascript
- 基础
- 排序
- 分页
- 搜索
- 美观
- 合理的配置
- 高级
- 单击和双击行事
- 选择高亮显示
- 增删改查
- 列宽拖动
- 数据导出
- 添加序号
- 进阶
- 支持的数据类型
- 行内编辑
- 合并单元格
- 自定义表头
- 高扩展性
- 易用的API
- 模块化
因此根据以上列出的这些功能点，DataTables中文网至少还会推出三篇文章来说DataTables和DataGrid之间的“优劣”， 从而帮助你们选出适合本身的表格插件。php
因为我也是初次使用DataGrid，因此在某些方面可能还不能描述的很好， 如发现文章有说得不对或者能够改进的地方，但愿您还能在阅读完文章后在下方或者经过右下角的反馈发表下本身的见解。 若是以为本系列文章能帮助到小伙伴们， 但愿小伙伴能多多支持本站，多给DataTables中文网提建议，多宣传DataTables中文网。css
说以前插播一个广告html
x i
好了，咱们进入正题吧。java
前面一篇讲到了分别使用最简配置，使表格变得更强大，今天咱们要讲的就是基础部分， 对照API，Demo分别实现排序，分页，搜索，这三个基本功能。jquery
-
DataTables实现排序，分页，搜索
对于DataTables，其实以前的例子中已经作完了这个步骤，由于默认就开启了这部分功能，仍是直接看代码吧服务器
和以前同样，有以下表格：app
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<table>
<thead> <tr> <th>Code</th> <th>Name</th> <th>Price</th> </tr> </thead> <tbody> <tr> <td>001</td><td>name1</td><td>2323</td> </tr> <tr> <td>002</td><td>name2</td><td>4612</td> </tr> <tr> <td>003</td><td>name3</td><td>4612</td> </tr> <tr> <td>004</td><td>name4</td><td>4612</td> </tr> <tr> <td>005</td><td>name5</td><td>4612</td> </tr> <tr> <td>006</td><td>name6</td><td>4612</td> </tr> <tr> <td>007</td><td>name7</td><td>4612</td> </tr> <tr> <td>008</td><td>name8</td><td>4612</td> </tr> <tr> <td>009</td><td>name9</td><td>4612</td> </tr> <tr> <td>010</td><td>name10</td><td>4612</td> </tr> <tr> <td>011</td><td>name11</td><td>4612</td> </tr> </tbody> </table> |
第一步：引入 DataTables 的js和css模块化
1 2 3 4 5 6 |
<!--样式文件-->
<link rel="stylesheet" type="text/css" href="plugin/datatables/jquery.dataTables.min.css"> <!--jquery js--> <script src="plugin/datatables/jquery.js"></script> <!--DataTables 核心 js--> <script src="plugin/datatables/jquery.dataTables.min.js"></script> |
第二步：给表格加上id学习
1 2 3 |
<table id="example" class="display"> …… </table> |
第三步：初始化
1 2 3 4 5 6 7 8 9 10 11 |
<script> $(function () { $('#example').DataTable({ columns:[ {data:"firstname"}, {data:"lastname"}, {data:"phone"} ] }); }); </script> |
只需简单的一行代码，DataTables就会帮你把表格配备上排序，翻页，快速过滤。此次的代码比以前的要多了列配置，本次先卖个关子， 后面再告诉你们为何要这样配置？