为了账号安全,请及时绑定邮箱和手机立即绑定

BootStrap-table 客户端分页和服务端分页的区别

/ 猿问

BootStrap-table 客户端分页和服务端分页的区别

慕婉清6462132 2019-06-07 11:06:22

BootStrap-table 客户端分页和服务端分页的区别


查看完整描述

1 回答

?
跃然一笑

前端代码块

  <table id="test-table" class="col-xs-12" data-toolbar="#toolbar">

  function initTable(){
  $('#test-table').bootstrapTable({
  method: 'get',
  toolbar: '#toolbar', //工具按钮用哪个容器
  striped: true, //是否显示行间隔色
  cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
  pagination: true, //是否显示分页(*)
  sortable: false, //是否启用排序
  sortOrder: "asc", //排序方式
  pageNumber:1, //初始化加载第一页,默认第一页
  pageSize: 10, //每页的记录行数(*)
  pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
  url: "/testProject/page4list.json",//这个接口需要处理bootstrap table传递的固定参数
  queryParamsType:'', //默认值为 'limit' ,在默认情况下 传给服务端的参数为:offset,limit,sort
  // 设置为 '' 在这种情况下传给服务器的参数为:pageSize,pageNumber

  //queryParams: queryParams,//前端调用服务时,会默认传递上边提到的参数,如果需要添加自定义参数,可以自定义一个函数返回请求参数
  sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
  //search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
  strictSearch: true,
  //showColumns: true, //是否显示所有的列
  //showRefresh: true, //是否显示刷新按钮
  minimumCountColumns: 2, //最少允许的列数
  clickToSelect: true, //是否启用点击选中行
  searchOnEnterKey: true,
  columns: [{
  field: 'id',
  title: 'id',
  align: 'center'
  }, {
  field: 'testkey',
  title: '测试标识',
  align: 'center'
  }, {
  field: 'testname',
  title: '测试名字',
  align: 'center'
  },{
  field: 'id',
  title: '操作',
  align: 'center',
  formatter:function(value,row,index){
  //通过formatter可以自定义列显示的内容
  //value:当前field的值,即id
  //row:当前行的数据
  var a = '<a href="" >测试</a>';
  }
  }],
  pagination:true
  });
  }
 
  在前端通过请求获取table数据时,bootstrap table会默认拼一个 searchText的参数,来支持查询功能。

  服务端代码

  @RequestMapping(value = "/page4list.json")
  public void page4list(Integer pageSize, Integer pageNumber, String searchText, HttpServletRequest request,
  HttpServletResponse response) {

  //搜索框功能
  //当查询条件中包含中文时,get请求默认会使用ISO-8859-1编码请求参数,在服务端需要对其解码
  if (null != searchText) {
  try {
  searchText = new String(searchText.getBytes("ISO-8859-1"), "UTF-8");
  } catch (Exception e) {
  e.printStackTrace();
  }
  }
  //在service通过条件查询获取指定页的数据的list
  List<MwmsgType> list = mwMsgQueueService.page4List(pageSize, pageNumber, searchText);
  //根据查询条件,获取符合查询条件的数据总量
  int total = mwMsgQueueService.queryCountBySearchText(searchText);
  //自己封装的数据返回类型,bootstrap-table要求服务器返回的json数据必须包含:totlal,rows两个节点
  PageResultForBootstrap page = new PageResultForBootstrap();
  page.setTotal(total);
  page.setRows(list);
  //page就是最终返回给客户端的数据结构,可以直接返回给前端

  //下边这段,只是我自己的代码有自定义的spring HandlerInterceptor处理返回值,可以忽略。
  request.setAttribute(Constants.pageResultData, page);

  }

  完成上述代码,即可实现服务器端自动分页,bootstrap-table根据服务器端返回的total,以及table设定的pageSize,自动生成分页的页面元素,每次点击下一页或者指定页码,bootstrap-table会自动给参数pageNumber赋值,服务器返回指定页的数据。

  如果发送的是post请求,因为bootstap table使用的是ajax方式获取数据,这时会将请求的content type默认设置为 text/plain,这样在服务端直接通过 @RequestParam参数映射是获取不到的。

  这时就需要在bootstrap-table的参数列表中显式设置

  contentType: "application/x-www-form-urlencoded"

  设置成form表单的形式,tomcat内部就会自动将requset payload中的数据部分解析放到request.getParameter()中,之后就可以直接通过@RequestParam映射参数获取



查看完整回答
反对 回复 2019-06-08

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信