关于bootstrap-table服务端分页问题

最近在学习Node.js,想通过Node.js实现一个后台管理系统，数据展示部分不可避免的使用到了表格，又不可避免地设计到了分页问题。这里，我使用了bootstrap-table插件实现分页，bootstrap有两种分页方式，一种是前端分页，一种是后端分页。前端分页比较简单，只需要设置pagination:true即可。后端分页相对要复杂一些，而且里面设计到一些坑的问题，在这里我简单地总结一下，方便大家避免再踩这些坑。
前端js代码

  $('#table').bootstrapTable({
    method:'get',
    url: '/admin/student/getAllStudent',
    striped:true,
    pagination:true, //设置分页
    pageNumber:1,//初始化加载第一页，默认第一页
    queryParams : queryParams,//请求服务器时所传的参数,
    sidePagination:'server',
    pageSize:10,//单页记录数,
    pageList:[10,20,30,40],//分页进步值
    columns: [{  //列参数
      field: 'sid',
      title: 'sid',
    }, {
      field: 'name',
      title: 'name'
    }, {
      field: 'grade',
      title: 'grade'
    },{
        field: 'password',
        title: 'password'
    },{
        field: 'Button',
        title: '操作',
        events:operateEvents,
        formatter:AddFunctionAlty//表格中增加按钮
    },

    ]

  });
//前端向后端传递分页参数,包括每一页的数据和第几页
  function queryParams(params){
    return {
      pageSize:params.limit, //每一页的数据行数，默认是上面的10
      pageIndex:parseInt(params.offset/params.limit)+1,//当前页面，默认是上面的设置的1(pageNumber)
    }
  }

在这里有几个参数需要注意：

pageSize:设置每页的展示数目
pageIndex:设置当前展示的是第几页
queryParams:查询函数需要传递pageSize和pageIndex
后台处理
1 . 接收传递的参数:
后台在接收了参数以后，需要根据参数进行分页处理，首先需要接收参数，由于我使用的是get请求，因此pageSize和pageIndex保存在url中。

let query = url.parse(req.url,true).query;

注意：这里有一个小坑，我们得到的query对象都是string类型的，但是传递的参数pageSize和pageIndex必须是number类型。因此使用时记得转换。

根据参数进行分页操作
根据参数进行分页操作，使用mongoose分页的方法是skip和limit()。其实就是先禅熏所有的参数，然后再通过skip和limit进行筛选。

//分页查询
studentSchema.statics.pagination = function(pagesize,pageIndex) {
 return this.find({}).skip(pageSize*(pageIndex-1)).limit(pageSize).exec();
};

注意:这里也有一个小坑，那就是查询后返回的是一个promise，需要通过then来进行数据的获取。另外这里是分页的关键，skip是跳过多少条数据，limit是限制每页的数目。skip中的值应该是每页页数*(偏移量-1)

bootstrap-table获取查询后的数据进行展示

exports.getAllStudent = function(req,res){
  let query = url.parse(req.url,true).query;
  //获取分页数据
  Student.pagination(parseInt(query.pageSize),parseInt(query.pageIndex))
    .then(function(data){  //需要通过then来进行调用
      Student.count({},function(err,total){
        if(!err){
          //total数目必须必每一页分页数目更多才能够显示分页条
          res.json( {"total":total,"rows":data})
        }else{
          console.log('获取数据库长度失败')
        }
      })
    })
};

注意:这里有一个小坑，bootstrap-table获取的数据必须是有total和rows属性属性的json。但是我请求直接获取到的数据是[{},{}]由json组成的数组，因此返回时需要进行转化以后才能进行表格的展示。
数据的转化

res.json( {"total":total,"rows":data})

最后编辑于：2018.11.04 19:41:50