浅谈bootstrap table分页的实现两种方式

1. 简介

Bootstrap table是一款基于bootstrap的表格插件，提供了大量的功能和样式。其中分页是常用的一个功能，本文将介绍两种分页的实现方式。

2. 分页方式

2.1 客户端分页

客户端分页是指前端通过data和pageSize参数控制表格数量并进行分页。

在调用bootstrap table时，可以通过设置pagination属性来设置客户端分页，如下所示：

<table id="table"
       data-pagination="true"
       data-page-size="10">

其中data-pagination="true"表示启用分页，data-page-size="10"表示每页显示10条数据。

客户端分页的优点是处理速度快，不需要与后台交互数据，但是当数据量较大时，会导致页面加载速度变慢和页面卡顿。

2.2 服务端分页

服务端分页是指前端通过发送ajax请求从后台获取分页数据。

在调用bootstrap table时，可以通过设置url和queryParams属性来设置服务端分页，如下所示：

<table id="table"
       data-locale="zh-CN"
       data-pagination="true"
       data-side-pagination="server"
       data-page-size="10"
       data-url="/table/getTableData"
       data-query-params="queryParams">

其中data-url="/table/getTableData"是指bootstrap table从该url地址获取数据，data-query-params="queryParams"是额外参数，可以在该方法中给请求实体添加额外参数，如下所示：

function queryParams(params) {
  params.more = "moreInfo";
  return params;
}

服务端分页的优点是能够处理大数据量，不会影响页面加载速度和卡顿问题，但是需要与后台交互数据，如果后台没有正确处理分页查询，会出现查询数据错误或者查询数据速度慢等问题。

3. 总结

本文介绍了bootstrap table的两种分页方式：客户端分页和服务端分页。客户端分页适用于数据量较小的情况，服务端分页适用于数据量较大的情况。根据实际需求，可以选择不同的分页方式来满足页面需求。