jquery----datatables

官方文档：http://www.datatables.club/manual/install.html

有下载地址

1、引入js 和 css

客户端模式(代码简单，直接初始化即可)

伪分页：将全部数据加载到页面上，利用分页功能进行分页（数据不要超过50000条，补充mysql数据库，一张表的数据不要超过1000w条）

2、初始化

$(document).ready( function () {
    $('#table_id_example').DataTable();  //table_id_example 是table的id(注意table要有thead和tbody)
} );

3、如果需要自定义配置

官网上有详细的说明

    $(function () {
        $('.table.table-hover').DataTable({
            'paging'      : true,
            'lengthChange': false,
            'searching'   : false,
            'ordering'    : false,  //使用排序
            'info'        : false,  //左下角提示信息
            'autoWidth'   : false,
        })
    })

服务端模式(代码复杂)

真分页

　　服务器端处理模式——此模式下如：过滤、分页、排序的处理都放在服务器端进行。

$(function () {
        $('.table.table-hover').DataTable({
            'paging'      : true,
            'lengthChange': false,
            'searching'   : false,
            'ordering'    : false,
            'info'        : false,
            'autoWidth'   : false,
            "serverSide": true,
            "pageLength": 5,
            "drawCallback": function( settings ) {
                App.init()
            },
            ajax: {
                url: '/user/page',
                type: 'POST'
            },
            "columns":[
                {data:function ( row, type, val, meta ) {
                        console.log(type)
                        console.log(val)
                        console.log(meta)
                        return "<td><input id="+row.id+" type="checkbox" class="flat-red"></td>
"+row.id
                    }},
                {data:"username"},
                {data:"phone"},
                {data:"email"},
                {data:"updated"},
                {data:function ( row, type, val, meta ) {
                        console.log(type)
                        console.log(val)
                        console.log(meta)
                        return "<button type="button" class="btn  btn-default"><i class="fa fa-fw fa-search"></i>查看</button>
"+"<button type="button" class="btn  btn-primary"><i class="fa fa-fw fa-edit"></i>编辑</button>
"+"<button type="button" class="btn  btn-danger"><i class="fa fa-fw fa-trash-o"></i>删除</button>
"
                    }},
            ]
        })
    })

参数

ajax ：发送ajax请求

columns：在表格中的显示格式 :{data:"username"}表示第二列显示data.username 数据 {data:function ( row, type, val, meta ){return ""} 表示第一列显示自定义的数据

"drawCallback": function( settings ) ：回调函数