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 >
</table>
如果你想设置你的翻页,每页显示10个,可以加上下面这一段
$(function () {var dataTableOption = {
       pageLength: 10,
        language: {
            paginate: {
                previous: "上一页",
                next: "下一页"
            }
        },
        "order": [[ 0, "desc" ]]
    };
     $("#data_table").DataTable(dataTableOption);})

好了,现在你已经实现Datatable 了!