jQuery Datatable 表格插件
Datatable 总体来说很好用,可以实现即时搜索和排序。但是只能用于数据量较少的情况下,如果数据量超过1K建议还是用表格加翻页,不然会很慢。
datatable 中文网 http://datatables.club/
开始使用DataTables很简单,只需要引入两个文件, 一个css样式文件和DataTables本身的脚本文件。在DataTables CDN上,可以使用下面这两个文件:
css cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css
js cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js
提到 CDN,这里稍微提一句,百度的CDN http://cdn.code.baidu.com/ 以及Bootstrap 的cdn 都是不错的选择 http://www.bootcdn.cn/
在引入这两个文件之后,怎样简单地使用DataTables?使用下方简单的几行代码,就可以初始化table。
$(document).ready(function(){ $('#data_table').DataTable(); });
其中#myTable 就是对应的 table id,如下所示
<table id="data_table" cellpadding="0" cellspacing="0" border="0"
class="data_table table table-striped table-bordered table-hover">
</table>
如果你想设置你的翻页,每页显示10个,可以加上下面这一段
$(function () {var dataTableOption = { pageLength: 10, language: { paginate: { previous: "上一页", next: "下一页" } }, "order": [[ 0, "desc" ]] }; $("#data_table").DataTable(dataTableOption);})
好了,现在你已经实现Datatable 了!