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 了!

posted @ 2016-12-16 14:56  还是小黑  阅读(1546)  评论(0编辑  收藏  举报