bootstrap table 前端分页(client)和服务端分页(server)的配置项差别

前端:

sidePagination: "client", //前端分页(客户端)
dataField: "count", // 返回的数据必须写死"count"
totalField: 'data', // 返回的数据必须写死"data"

说明:一般情况下都是用服务端分页方式,今天试了下前端方式,发现能接收到数据但是无法渲染加载到表格中,通过查看网文才知道前端分页方式是要求 返回的数据中 写死 count 和 data 的,用 其它都不行。

 

服务端:

sidePagination: "server", //后端分页(服务端)
dataField: "total", // 默认用"total",可自定义,前后端相同即可
totalField: 'rows', // 默认用"rows",可自定义,前后端相同即可

 

 

分页相关

// 当采用客户端分页时,直接返回“index+1”就是序号了。
{ title: 'No', field: '', align: 'center',
  formatter: function (value, row, index) { 
    return index+1;
  }
}


// 当采用服务端分页时,可以采用下面写法
{ title: 'No', field: '', align: 'center',
    formatter: function (value, row, index) {
        var pageSize = $('#table_datalist').bootstrapTable('getOptions').pageSize; //每页数量
        var pageNumber = $('#table_datalist').bootstrapTable('getOptions').pageNumber; //第几页
        return pageSize * (pageNumber - 1) + index + 1;
    }
}

 

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要实现前端分页,可以使用 Bootstrap Table 自带的分页插件。具体实现步骤如下: 1. 在表格初始化时,设置 pagination 属性为 true。 2. 在表格初始化时,设置 pageSize 属性为每页显示的数据量。 3. 在表格初始化时,设置 pageList 属性为可供选择的每页显示数据量。 4. 在表格初始化时,设置 pageNumber 属性为当前页码。 5. 在表格初始化时,设置 totalRows 属性为数据总数。 6. 在表格初始化时,设置 sidePagination 属性为 client。 7. 在表格初始化时,设置 paginationPreText 和 paginationNextText 属性为分页控件中的上一页和下一页的文本。 8. 在表格初始化时,设置 paginationLoop 属性为 false,禁止循环翻页。 9. 在表格初始化时,设置 paginationHAlign 和 paginationVAlign 属性为分页控件的水平和垂直对齐方式。 10. 在表格初始化时,设置 paginationDetailHAlign 和 paginationDetailVAlign 属性为分页详情的水平和垂直对齐方式。 注意事: 1. 由于是前端分页,所以需要在前端进行数据的处理和分页控件的渲染,所以在处理大量数据时可能会导致性能问题。 2. 如果数据量较大,建议使用后端分页,即通过 AJAX 请求后台 API 获取数据并进行分页处理,这样可以减轻前端的负担。 3. 在进行分页时,需要根据当前页码和每页显示数据量计算出当前页需要显示的数据,并且需要根据当前页码和数据总数计算出总页数。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值