bootstrap table实现点击翻页功能 可记录上下页选中

Bootstrap Table之点击翻页功能实现与行选中状态保持

在Web开发中，使用Bootstrap Table实现点击翻页功能是非常常见的需求。而如何在翻页后依然能记住之前选中的行，则是一个需要解决的难题。本文将详细介绍如何通过Bootstrap Table实现这一功能。

我们需要获取并存储用户选中的行的ID。这里我们使用一个textarea元素来存储数据。我们需要一个对象来存储每个页码选中的行的ID。

在复选框状态改变时，我们需要更新存储的选中状态。获取当前的页码，然后将当前页码与对应的选中行的ID存储到一个对象中。将这个对象转换为字符串并存储到textarea中。这样，即使页面跳转，我们也能通过textarea中的数据，恢复之前的选中状态。

以下是具体的代码实现：

HTML部分：

```html

```

JavaScript部分：

```javascript

// 获取并存储选中的ID

var productids = $('selected-ids');

var merge_order_object = {}; // 存储每个页码选中的行的ID

var jsonObj = {};

var current_page = ""; // 当前页码

table.on('post-body.bs.table', function (e, settings, json, xhr) {

// ...（与上文相同）

});

// 复选框状态改变时的操作

$('input[name="btSelectAll"], table tbody, input[name="btSelectItem"]').change(function () {

current_page = table.bootstrapTable('getOptions').pageNumber;

merge_order_object[current_page] = Table.api.selectedids(table); // 获取当前页的选中ID

productids.val(JSON.stringify(merge_order_object)); // 存储所有页面的选中状态

});

```

以上就是本文的全部内容。通过这种方法，我们可以实现Bootstrap Table的点击翻页功能，并在翻页后依然能记住之前选中的行。希望对大家的学习有所帮助，也希望大家多多支持我们的网站。