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>\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 ) ：回调函数

转载于:https://www.cnblogs.com/yanxiaoge/p/10889876.html