Bootstrap Table服务端分页方式的排序实现

主机之家测评 2020-07-07 00:00 主机之家测评 | 隐藏边栏 | 抢沙发 | 16 0

文章评分 0 次，平均分 0.0 ：

Bootstrap Table 中使用 sortable:true 可以开启分页，但是此种分页方式仅适用于客户端分页，如果应用在服务端分页上，只能重排当前页面的顺序，而并非整体重新排序，本文介绍一下 Bootstrap Table服务端分页方式的排序实现方法：

前端代码：

  function initTable(){    var $table = $('#table');    $table.bootstrapTable('destroy');    $table.bootstrapTable({        locale: 'zh-CN',        url : "{{ route('student-source') }}",        pagination : true,        sidePagination : 'server',        pageSize : 10,        pageList : [10],        queryParams : function(params) {            var temp = {                limit : params.limit,                offset : params.offset,                     <span style="color:#ff0000;">//服务端分页的排序参数</span>                <span style="color:#ff0000;">sortName:this.sortName,</span>                <span style="color:#ff0000;">sortOrder:this.sortOrder,</span>                                 //自定义搜索条件                keytype : $("#keytype").val(),                keyword : $("#keyword").val(),                name:$("#name").val(),                department_id:$("#department_id").val(),                subject_id:$("#subject_id").val(),                province_id:$("#province_id").val(),            };            return temp;        },        columns : [ {            title: "电子号",            field: "identifier",            sortable:true,        }, {            title : '姓名',            field : 'name',        }, {            title : '性别',            field : 'sex.title',        }, {            title : '民族',            field : 'nation.mtitle',        }, {            title : '出生日期',            field : 'birthday',        }, {            title : '身份证号',            field : 'cardno',        }, {            title : '省份',            field : 'province.title',        }, {            title : '专业',            field : 'subject.title',        }, {            title : '快递单号',            field : 'ems',        },{            field: 'operate',            title: '操作',            align: 'center',            events: operateEvents,            formatter: operateFormatter        }  ]    })  }

后端代码：

  public function source(Request $request){    $limit = $request->get('limit',10);    $offset = $request->get('offset',10);    $sortName = $request->get('sortName','identifier');    $sortOrder = $request->get('sortOrder','desc');    $student = new Student;    $total = $student->count();    $students = $student->orderBy($sortName,$sortOrder)->offset($offset)->limit($limit)->get();    $data = [      'total' => $total,      'rows' => $students,    ];    return $data;  }

打赏赞