dataTables - 使用服务器端排序、分页、搜索

1、引入

<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>

使用cdn引入，下载http://www.datatables.club/，别忘引入jquery。

html代码：

 <table id="table_id_example" class="display">
 <input type="hidden" id="url" value="{{ url('user') }}">//服务器端地址
       <thead>
             <tr>
                <th><span>ID</span></th>
                <th><span>用户名</span></th>
                <th><span>账号</span></th>
                <th><span>添加时间</span></th>
                <th><span>操作</span></th>
             </tr>
        </thead>
        <tbody>
		</tbody>
</table>

js代码：

  <script>
        $(document).ready(function () {
            var url = $('#url').val();
            $('#table_id_example').DataTable({
                "serverSide": true,
                "processing": true,
                "bStateSave": true,
                "searching":  true,
                "bAutoWidth": true,
                "searchDelay": 800,
                "ajax":{
                    url: url,
                    "data": function (d) {
                        d.type = 1;
                    }
                },
                "aLengthMenu": [10, 25, 50, 100],
                "order":[ [0,'asc'] ],
                language: {
                    "sProcessing"       : "处理中...",
                    "sLengthMenu"       : "显示 _MENU_ 项结果",
                    "sZeroRecords"      : "没有匹配结果",
                    "sInfo"             : "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                    "sInfoEmpty"        : "显示第 0 至 0 项结果，共 0 项",
                    "sInfoFiltered"     : "(由 _MAX_ 项结果过滤)",
                    "sInfoPostFix"      : "",
                    "sSearch"           : "搜索:",
                    "sUrl"              : "",
                    "sEmptyTable"       : "表中数据为空",
                    "sLoadingRecords"   : "载入中...",
                    "sInfoThousands"    : ",",
                    "oPaginate": {
                        "sFirst":       "首页",
                        "sPrevious":    "上页",
                        "sNext":        "下页",
                        "sLast":        "末页",
                        "sJump":        "跳转"
                    },
                    "oAria": {
                        "sSortAscending" : ": 以升序排列此列",
                        "sSortDescending": ": 以降序排列此列"
                    }
                },
                "columns": [
                    {   "data"      :"adminid",
                        "name"      :"adminid",
                        "orderable" : true,
                    },
                    {   "data"      :"name",
                        "name"      :"name",
                        "orderable" : true,
                    },
                    {   "data"      :"account_number",
                        "name"      :"account_number",
                        "orderable" : false,
                    },
                    {   "data"      : "update_time",
                        "name"      : "update_time",
                        "orderable" : true,
                    },
                    {
                        "data": "adminid",
                        "name": "adminid",
                        "orderable": false
                    },
                ],
                "fnRowCallback":function(nRow,aData,iDataIndex){
                    var id = $('td', nRow).eq(0).text();
                    var caozuo = '';
                    var up = "'"+ "操作数据 - " +name+"'" +",'"+url+"?id="+id+"'" +",'600px'," +"'500px'";
                    caozuo+= '+up+')">'
                        +'操作数据';
                    $('td:eq(-1)',nRow).html(caozuo);
                    return nRow;
                }
            });
        });
    </script>

服务器端
控制器：

 public function users(Request $request)
    {
        if ($request->type == 1) {
            $draw = $request->draw;//访问次数
            $start = $request->start;//分页起始
            $length = $request->length;//分页长度
            $name = request('columns.' .request('order.0.column', 0). '.name');//排序
            $dir = $request->order[0]['dir'];//排序方式
            $value = $request->search['value'];//搜索
            $regex = $request->regex;
            return  Admin::getLists($draw, $start, $length, $name, $dir, $value, $regex);
        }
        return view('admin.users', compact('res'));
    }

模型:

public static function getLists($draw, $start = 0, $length = 10,  $name, $dir, $value, $regex)
    {
        $lists = static::select('adminid','name', 'account_number', 'update_time');
        //模糊查询
        if ($value){
            $lists = $lists->where('name','like', "%{$value}%");
        }
		//总数
        $count = $lists->count();
        //排序分页
        $lists = $lists->orderBy($name,$dir)->offset((int)$start)->limit((int)$length)->get();

        return response()->json([
            'draw' => $draw,
            'recordsTotal' => $count,
            'recordsFiltered' => $count,
            'data' => $lists
        ]);
    }

请求参数：
draw:1 //请求次数，用于响应是也要带回来
columns[0][data]:0 //第一列绑定的数据源标识，二维数组就是数字，对象数组就是key
columns[0][name]:engine //第一列别名
columns[0][searchable]:false //不可搜索
columns[0][orderable]:true //不可排序
columns[0][search][value]: //搜索的条件
columns[0][search][regex]:false //搜索是否使用正则

… //有多少列就有多少个columns[n]

order[0][column]:0 //指定排序的列
order[0][dir]:asc //指定列的排序方式
start:0 //起始下标
length:10 //每页记录数
search[value]: //全局搜索条件
search[regex]:false //全局搜索是否使用正则
_:1492657609627 //自带标示不用理会