DataTables用法详解

引入CSS：

<!-- Data Tables -->
<link href="__ADMIN__/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">

引入JS：

<script src="__ADMIN__/js/jquery.min.js"></script>
<script src="__ADMIN__/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="__ADMIN__/js/plugins/dataTables/dataTables.bootstrap.js"></script>

Html：

<table id="dataTables-example" class="table table-striped table-bordered table-hover">
    <thead>
    <tr>
        <th><input type="checkbox" class="i-checks" id="isCheckAll" name="ids[]"></th>
        <th>ID</th>
        <th>标题</th>
        <th>发布人</th>
        <th>发布时间</th>
        <th>阅读量</th>
        <th>操作</th>
    </tr>
    </thead>
</table>

JS：

$(function () {

    var table = $("#dataTables-example").dataTable({
        "serverSide": true,  //服务端获取数据
        "processing": false, //加载延迟样式
        "searching": false,//搜索框
        "ajax": {
            "url": "{:url('getJsonData')}",
            "data": function (d) {
                //自定义搜索条件
                d.name = $("#name").val();
                d.phone = $("#phone").val();
            }

        },
        "ordering": true, // 字段排序 true 开启 false 关闭
        "aoColumnDefs": [{"bSortable": false, "aTargets": [0, 2, 5]}], //指定排序字段
        "lengthMenu": [2, 10, 15, 20], //自定义分页
        "language": {
            "Processing": "正在获取数据，请稍后...",
            "zeroRecords": "没有查询到数据",
            "lengthMenu": "显示 _MENU_ 条",
            "search": "搜索",
            "info": "共 _PAGES_ 页，_TOTAL_ 条记录，当前显示 _START_ 到 _END_ 条",
            "paginate": {
                "First": "第一页",
                "Previous": "上一页",
                "Next": "下一页",
                "Last": "最后一页"
            }
        },
        "columns": [  //数据列字段
            {
                render: function (data, type, row, meta) {
                    return '<input type="checkbox" class="i-checks" name="ids[' + row.id + ']">';
                }
            },
            {
                "data": 'id', //数据字段
                "orderable": false, //禁止排序
                "width": "6%", //表格宽度
            },
            {
                data: 'username',
                "render": function (data, type, full, meta) {
                    //显示开启关闭按钮
                    return data = '<button id="deleteOne" class="btn btn-danger btn-sm" data-id=' + data + '>删 除</button>';

                }
            },
            {
                data: 'status',
                "render": function (data, type, full, meta) {
                    return data ? '开启' : '关闭';
                }
            },
            {
                data: 'login_ip'
            },
            {
                data: 'login_time',
                "render": function (data, type, full, meta) {
                    //时间格式化

                }
            },
            {
                data: 'operate' //自定义修改 删除按钮
            },
        ],
        drawCallback: function () {
            //按钮全选
            $("#isCheckAll").on('click', function () {
                if ($(this).prop('checked')) {
                    $(".i-checks").prop('checked', true);
                } else {
                    $(".i-checks").prop('checked', false);
                }

            });
        }
    });

    //自定义搜索
    $("#sub").on('click', function () {
        table.dataTable().api().ajax.reload();
    });

});

后端代码：

public function getJsonData()
    {
        //请求数据参数
        $param = request()->param();
        $cat_id = $param['catid'];
        $search_name = $param['extra_search'];
        $search_value = $param['search']['value'];
        $draw = $param['draw'];

        //排序字段
        $order = [];
        $order_num = $param['order'][0]['column'];
        $order_sort = $param['order'][0]['dir'];

        switch ($order_num)
        {
            case 1 :
                $order = ['order','id'=>$order_sort];
                break;
            case 4 :
                $order = ['order','inputtime'=>$order_sort];
                break;
            case 5 :
                $order = ['order','views'=>$order_sort];
                break;
        }

        //搜索条件
        $where = [];
        if( !empty($search_name) && !empty($search_value))
        {
            $where = [
                $search_name => ['like','%'.$search_value.'%']
            ];
        }

        //总记录数
        $count = Db::name('article')->where('cat_id',$cat_id)->order($order)->count();
        //过滤后的总记录数
        if(empty($search_value))
        {
            $field_count = $count;
        } else {
            $field_count = Db::name('article')->where('cat_id',$cat_id)->where($where)->order($order)->count();
        }


        //分页参数
        $start = $param['start']; //起始页
        $len = $param['length']; //每页显示数量
        $page = intval($start/$len)+1;//当前页
        $config = [
            'page'=>$page,
            'list_rows'=>$len,
        ];


        //数据源
        $data = Db::name('article')->where('cat_id',$cat_id)->where($where)->order($order)->paginate(null,false,$config);
        $newData = [];
        foreach ($data as $key=>$value)
        {
            $newData[$key] = $value;
            $newData[$key]['operate'] = "<a target='_parent' href='".url('edit',['id'=>$value['id']])."'><i class='fa fa-edit text-navy'></i></a>&nbsp;&nbsp;
                                         <a data-name='delete' href='".url('delete',['id'=>$value['id'],'cat_id'=>$value['cat_id']])."'><i class='fa fa-trash text-navy'></i></a>&nbsp;

";
        }


        $returnData = [
            "draw"=>$draw, //请求次数
            "recordsTotal"=>$count, //总记录数
            "recordsFiltered"=>$field_count,//过滤后的总记录数
            "data"=>$newData //数据源
        ];

        return json($returnData);
    }

转载于:https://my.oschina.net/u/3483680/blog/1817600