前端技术 手机教程
程序开发 平面动画
系统软件 运营推广
CMS教程 在线手册
资源下载 网络安全
精准搜索请尝试:精确搜索

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

2020-06-05 14:17:37 来源:原创 作者:寂静的神经

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,
   
              //服务端分页的排序参数
              sortName:this.sortName,
              sortOrder:this.sortOrder,
               
              //自定义搜索条件
              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;
}
分享到:
本文关键词:Bootstrap table 服务端 分页 排序

相关文章

零五科技,分享IT知识,国内顶级IT知识门户网站。

Copyright (C) www.02405.com, All Rights Reserved.

零五科技 版权所有 辽ICP备13002105号-1