DataTables中文网推出了 第一篇 关于DataTables和其他表格插件比较后，为了把让这个比较更有意义，更能帮助到大家，DataTables中文网 做了问卷调查，根据小伙伴们的填写我归纳了一下，一个表格插件关注点在以下三个部分基础、高级的和进阶：
- 基础
- 排序
- 分页
- 搜索
- 美观
- 合理的配置
- 高级
- 单击和双击行事
- 选择高亮显示
- 增删改查
- 列宽拖动
- 数据导出
- 添加序号
- 进阶
- 支持的数据类型
- 行内编辑
- 合并单元格
- 自定义表头
- 高扩展性
- 易用的API
- 模块化
所以根据以上列出的这些功能点，DataTables中文网至少还会推出三篇文章来讲DataTables和DataGrid之间的“优劣”， 从而帮助大家选出适合自己的表格插件。
由于我也是初次使用DataGrid，所以在某些方面可能还不能描述的很好， 如发现文章有说得不对或者可以改进的地方，希望您还能在阅读完文章后在下方或者通过右下角的反馈发表下自己的看法。 如果觉得本系列文章能帮助到小伙伴们， 希望小伙伴能多多支持本站，多给DataTables中文网提建议，多宣传DataTables中文网。
说之前插播一个广告
x i
好了，我们进入正题吧。
前面一篇讲到了分别使用最简配置，使表格变得更强大，今天我们要讲的就是基础部分， 对照API，Demo分别实现排序，分页，搜索，这三个基本功能。
-
DataTables实现排序，分页，搜索
对于DataTables，其实之前的例子中已经做完了这个步骤，因为默认就开启了这部分功能，还是直接看代码吧
和之前一样，有如下表格：
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就会帮你把表格配备上排序，翻页，快速过滤。这次的代码比之前的要多了列配置，本次先卖个关子， 后面再告诉大家为什么要这样配置？
