推荐阅读：
Bootstrap Table使用整理(一) //www.jb51.net/article/115789.htm
Bootstrap Table使用整理(二) //www.jb51.net/article/115791.htm
Bootstrap Table使用整理（三） //www.jb51.net/article/115795.htm
Bootstrap Table使用整理（四）之工具栏 //www.jb51.net/article/115798.htm
一、分页组合查询
/*
* data-pagination 指定是否启用分页
* data-page-list 指定分
Bootstrap Table 是一个流行的前端组件，用于创建美观且功能丰富的表格。在本文中，我们将深入探讨 Bootstrap Table 的分页和组合查询功能，这是实现高效数据展示和管理的关键部分。
让我们了解一下分页功能。Bootstrap Table 提供了 `data-pagination` 属性来启用或禁用分页。将该属性设置为 `true` 可以启动分页功能。例如：
```html
<table id="table1" data-pagination="true">
```
`data-page-list` 属性则用于定义用户可以选择的每页显示数据的数量，如 `[5,10,20,50]`。这允许用户根据需要调整每页显示的行数。
`data-side-pagination` 参数用于指定分页是在服务器端还是客户端进行。设置为 `'server'` 表示在服务器端处理分页，而 `'client'` 则表示在客户端进行。在客户端分页时，所有数据需一次性加载到页面，适合数据量较小的情况；而服务器端分页则更适合大数据集，每次只请求和显示一部分数据。
在客户端分页的情况下，当用户在搜索框中输入内容或更改排序条件时，Bootstrap Table 将自动发送请求。请求的参数包括 `search`（文本框内容）、`order`（排序方式）、`sort`（排序列名）、`offset`（已滑过的条数）和 `limit`（要获取的数据条数）。这些参数可以通过 `queryParams` 函数自定义，以添加或修改请求参数。
下面是一个使用 `queryParams` 函数的例子：
```javascript
queryParams: function (params) {
params.name = '张三丰';
params.sex = $('input[name="sex"]:checked').val();
return params;
}
```
在服务端，你需要处理这些参数，根据它们来筛选、排序和计算数据。以下是一个简单的服务器端处理示例，使用 C# 编写：
```csharp
public JsonResult GetStuList(string sex, string search, string sort, string order, int offset, int limit) {
var query = _context.Students.AsQueryable();
if (!string.IsNullOrEmpty(search)) {
query = query.Where(s => s.Name.Contains(search));
}
if (!string.IsNullOrEmpty(sex)) {
query = query.Where(s => s.Sex == sex);
}
if (!string.IsNullOrEmpty(sort) && !string.IsNullOrEmpty(order)) {
query = order.ToLower() == "asc" ? query.OrderBy(sort) : query.OrderByDescending(sort);
}
var total = query.Count();
var data = query.Skip(offset).Take(limit).ToList();
return Json(new { total = total, rows = data });
}
```
这段代码首先构建了一个基本的查询，然后根据 `search` 和 `sex` 参数进行过滤，再根据 `sort` 和 `order` 进行排序。使用 `Skip` 和 `Take` 方法获取指定范围内的数据，并返回 JSON 结果，包含总记录数和实际返回的数据。
此外，Bootstrap Table 还提供了诸如搜索、刷新、列显示切换等功能。在 HTML 中，你可以通过 `data-search="true"`、`data-show-refresh="true"` 和 `data-show-columns="true"` 来启用这些功能，并通过 `data-toolbar` 添加自定义工具栏。例如：
```html
<table id="table1"
data-classes="table table-hover"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-toolbar="#toolbar">
</table>
```
Bootstrap Table 的分页和组合查询功能使得在网页上处理大量数据变得简单而直观。结合服务器端的处理，我们可以有效地实现动态数据过滤、排序和分页，提供用户友好的界面体验。通过灵活地配置各项参数和事件，开发者可以根据项目需求定制出功能强大的数据展示表格。
