jquery----datatables

 

 

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

有下載地址

一、引入js 和 css

 

客戶端模式(代碼簡單，直接初始化便可)

僞分頁：將所有數據加載到頁面上，利用分頁功能進行分頁（數據不要超過50000條，補充mysql數據庫，一張表的數據不要超過1000w條）

二、初始化

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

三、若是須要自定義配置

官網上有詳細的說明

    $(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>\n"+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>\n"+"<button type=\"button\" class=\"btn  btn-primary\"><i class=\"fa fa-fw fa-edit\"></i>編輯</button>\n"+"<button type=\"button\" class=\"btn  btn-danger\"><i class=\"fa fa-fw fa-trash-o\"></i>刪除</button>\n"
                    }},
            ]
        })
    })

參數

ajax ：發送ajax請求

columns：在表格中的顯示格式 :{data:"username"}表示第二列顯示data.username 數據 {data:function ( row, type, val, meta ){return ""} 表示第一列顯示自定義的數據

"drawCallback": function( settings ) ：回調函數