layui table组件与php后端分页的排序功能

1、前端代码

  1. <table id="demo" lay-filter="test"></table>
  3. <script type="text/html" id="barDemo">
  4.     <a class="layui-btn layui-btn-xs" lay-event="edit">详情</a>
  5. </script>
  1. layui.use('table', function(){
  2.         var table = layui.table;
  3.         //第一个实例
  4.         table.render({
  5.             elem: '#demo'
  6.             ,autoSort: false //禁用前端自动排序
  7.             ,url: "{{route('image_get_user_list_ajax')}}" //数据接口
  8.             ,where:{
  9.                 timeType:"{{$_GET['timeType']}}",
  10.                 startTime:"{{$data['param']['startTime']}}",
  11.                 endTime:"{{$data['param']['endTime']}}",
  12.                 keyword:"{{$data['param']['keyword']}}"
  13.             }
  14.             ,page: true //开启分页
  15.             ,cols: [[ //表头  sort 表示分页
  16.                 {field: 'id', title: '会员ID', fixed: 'left',unresize: true,width:120}
  17.                 ,{field: 'phone', title: '手机号',unresize: true,width:150}
  18.                 ,{field: 'pur_amount', title: '消费金额',unresize: true,width:150,sort: true}
  19.                 ,{field: 'regtime', title: '注册时间',unresize: true,width:210}
  20.                 ,{field: 'last_pur', title: '最近支付时间',unresize: true,width:210}
  21.                 ,{field: 'vip_end_time', title: 'vip到期时间',unresize: true,width:250}
  22.                 ,{field: 'status_str', title: '会员状态', width: 100}
  23.                 ,{field: 'free_times', title: '剩余免费次数', width: 150,sort: true}
  24.                 ,{field: '', title: '操作', toolbar: '#barDemo',align:'center'}
  25.             ]]
  26.         });
  28.         //监听工具条 点击详情按钮
  29.         table.on('tool(test)', function(obj){
  30.             var data = obj.data;
  31.             if(obj.event === 'edit'){
  32.                 location.href="{{ route($data['route_prefix'].'_user_detail') }}?id="+data.id
  33.             }
  34.         });
  36.         //触发排序事件
  37.         table.on('sort(test)', function(obj){
  38.             table.reload('demo', {
  39.                 initSort: obj
  40.                 ,where: {
  41.                     field: obj.field //排序字段
  42.                     ,order: obj.type //排序方式
  43.                 }
  44.             });
  45.         });
  47.     });

2、php代码

  1. <?php
  3.   $res = $list->toArray()['data']; //分页之后的数据
  4.   if ($request->input('field') && $request->input('order')) { //排序
  5.     $res_order = array_column($res, $request->input('filed'));
  6.     if ($request->input('order') == 'asc') $order = SORT_ASC;
  7.     if ($request->input('order') == 'desc') $order = SORT_DESC;
  8.     array_multisort($res_order, $order, $res);
  9.   }
  10.   $ajax_data['code'] = 0;
  11.   $ajax_data['msg'] = '';
  12.   $ajax_data['count'] = $list->total();
  13.   $ajax_data['data'] = $res;
  14.   return json_encode($ajax_data);