bootstrapTable实现与后端分页
时间: 2023-12-17 11:05:57 浏览: 119
bootstrap-table分别实现前端和后端的分页项目
Bootstrap Table 可以通过 AJAX 请求来获取后端分页数据。以下是一个简单的示例:
HTML 代码:
```html
<table id="table" data-toggle="table" data-url="/api/data" data-pagination="true" data-side-pagination="server">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Name</th>
<th data-field="price">Price</th>
</tr>
</thead>
</table>
```
在这个示例中,我们设置了数据源 URL 为 `/api/data`,并开启了分页功能和服务器端分页功能。
JavaScript 代码:
```javascript
$(function() {
$('#table').bootstrapTable({
queryParams: function(params) {
return {
limit: params.limit,
offset: params.offset / params.limit + 1
};
}
});
});
```
在这个示例中,我们使用了 `queryParams` 方法来设置请求参数。我们将每页的条数作为 `limit` 参数传递给后端,将当前页数转换为偏移量作为 `offset` 参数传递给后端。在后端接收到这些参数后,就可以通过 SQL 语句来实现分页查询了。
需要注意的是,`offset` 参数需要加 1,因为 Bootstrap Table 中的页数从 1 开始计数,而不是从 0 开始计数。
通过以上示例代码,就可以实现与后端分页了。
阅读全文