BootStrap Table实现server分页序号连续显示功能（当

前言

Bootstrap Table作为一种常用的前端框架，为我们提供了两种分页方式：客户端分页和服务端分页。对于大量数据而言，服务端分页无疑是更优的选择，因为它不会造成客户端缓存爆炸。传统的服务端分页方式在序号显示上存在问题，每一页的序号都从1开始，而不是从上一页的结束序号开始。本文将详细介绍如何解决这一问题。

原始的分页结果

在客户端分页模式下，使用Bootstrap Table的formatter中的index索引值可以使得序号是连续的。而在服务端分页模式下，由于服务器每次只返回当前页的数据，导致序号不连续。我们需要寻找一种解决方案来解决这个问题。

解决步骤

这个问题的根源在于服务端的分页机制。由于服务器每次只返回当前页的数据，因此传统的formatter函数返回的index索引值只有当前页的索引值。为了解决这个问题，我们需要将服务端和客户端的页面数据关联起来。我们可以在原始的formatter函数的基础上进行改进，让它能够传递所需的参数。

我们可以参考Bootstrap Table的js源码中的写法，例如：BootstrapTable.prototype.showRow = function (params) { this.toggleRow(params, true); };然后我们可以自定义一个函数来实现我们的需求。我们可以定义一个新的函数getPage来返回我们需要的索引值。这个函数可以像下面这样定义：

BootstrapTable.prototype.getPage = function (options) {

return options.pageSize (options.pageNumber - 1) + 1; // 计算当前页的起始序号

};

以下是我们的允许方法列表：

```javascript

var allowedMethods = [

'getOptions',

'getSelections', 'getAllSelections', 'getData', 'getIndex',

'load', 'append', 'prepend', 'remove', 'removeAll',

'insertRow', 'updateRow', 'updateCell', 'updateByUniqueId', 'removeByUniqueId',

'getRowByUniqueId', 'showRow', 'hideRow', 'getHiddenRows',

'mergeCells',

// 其他方法...

];

```

在实际应用中，我们可以使用这些方法来操作数据表。比如，我们在formatter中使用了'getIndex'方法，实现了分页序号的连续显示。这个功能在表操作中是十分重要的。

```javascript

$("tb_departments").bootstrapTable({

// 配置项...

method: 'post', //请求方式

toolbar: 'toolbar', //工具按钮容器

striped: true, //行间隔色显示

cache: false, //禁用缓存

pagination: true, //开启分页

sortable: true, //启用排序

sortOrder: "asc", //排序方式

sidePagination: "server", //分页方式（客户端或服务端）

pageNumber: 1, //初始化加载第一页

pageSize: 4, //每页记录数

pageList: [4, 20, 25, 30], //可选择每页行数

// 其他配置...

columns: [

// 列配置...

{

title: '编号', //标题

formatter: function (value, row, index) {

// 在这里使用 getIndex 方法获取行索引

return $("tb_departments").bootstrapTable("getIndex");

}

},

// 其他列...

],

// 其他事件处理函数...

onPageChange: function(number, size) {

// 在分页事件触发时，传递分页参数给后台重新加载数据

// 设置新的查询参数并调用后台数据加载函数

},

onSort: function(name, order) {

// 传递排序参数给后台进行排序操作

// 设置新的排序参数并调用后台数据加载函数

}

});

```

在分页展示中，我们常常遇到的一个问题是序号的不连续性。传统的分页方式通常是从第一行开始重新编号，这对于用户来说可能会造成困扰，尤其是在跨页操作时，难以追踪数据的连续性。而BootStrap Table的server分页序号连续显示功能，则很好地解决了这一问题。

这一功能对于提升用户体验来说非常有帮助。用户在浏览数据时，能够更直观地理解数据的结构，追踪数据的连续性。这也体现了长沙网络推广所推崇的狼蚁SEO网站的精神——始终关注用户需求，提供实用、高效的解决方案。

在此，我们也要感谢所有支持狼蚁SEO网站的朋友们。你们的信任和支持是我们不断进步的动力。如果你在使用过程中有任何疑问或建议，欢迎留言，我们会及时回复并努力提供最好的服务。让我们一起更多可能，共同提升网络体验！

希望这次分享对大家有所帮助，让我们期待更多关于BootStrap Table的精彩功能和应用！