[DontWrapResult] 
public JsonResult GetAllTasks(int limit, int offset, string sortfiled, string sortway, string search, string status) {
 var sort = !string.IsNullOrEmpty(sortfiled) "{0} {1}", sortfiled, sortway) : "";
 TaskState currentState;
 if (!string.IsNullOrEmpty(status)) Enum.TryParse(status, true, out currentState);
 var filter = new GetTasksInput {
 SkipCount = offset,
 MaxResultCount = limit,
 Sorting = sort,
 Filter = search
 };
 if (!string.IsNullOrEmpty(status)) if (Enum.TryParse(status, true, out currentState)) filter.State = currentState;
 var pagedTasks = _taskAppService.GetPagedTasks(filter);
 return Json(new {
 total = pagedTasks.TotalCount,
 rows = pagedTasks.Items
 },
 JsonRequestBehavior.AllowGet);
}

@using Abp.Web.Mvc.Extensions
@{
 ViewBag.Title = L("BackendTaskList");
 ViewBag.ActiveMenu = "BackendTaskList"; //Matches with the menu name in SimpleTaskAppNavigationProvider to highlight the menu item
}
<!-- 加载bootstrap-tablel的样式 -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.css" rel="external nofollow" >
@section scripts{
 @Html.IncludeScript("~/Views/backendtasks/list.js");
 <!-- 加载bootstrap-tablel的script脚本 -->
 <script src="/UploadFiles/2021-04-02/bootstrap-table.min.js">

由于是demo性质，我直接使用的CDN来加载bootstrap table相关的css，js。
其中首先定义了过滤框，然后定义了bootstrap table专用的工具栏，其会在后续bootstrap table初始化指定。
接着使用<table id="tb-tasks"></table>来定义bootstrap-table表体。
3.3. 添加list.js初始化bootstrap table
初始化就是为bootstrap table指定数据来源进行数据绑定、列名定义、排序字段、分页，事件绑定等。
我们新建一个list.js来进行初始化：


$(function() {
 //1.初始化Table
 var oTable = new TableInit();
 oTable.Init();
 //2.初始化Button的点击事件
 var oButtonInit = new ButtonInit();
 oButtonInit.Init();
});
var taskService = abp.services.app.task;
var $table = $('#tb-tasks');
var TableInit = function() {
 var oTableInit = new Object();
 //初始化Table
 oTableInit.Init = function() {
 $table.bootstrapTable({
 url: '/BackendTasks/GetAllTasks', //请求后台的URL（*）
 method: 'get', //请求方式（*）
 toolbar: '#toolbar', //工具按钮用哪个容器
 striped: true, //是否显示行间隔色
 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
 pagination: true, //是否显示分页（*）
 sortable: true, //是否启用排序
 sortOrder: "asc", //排序方式
 queryParams: oTableInit.queryParams, //传递参数（*）
 sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
 pageNumber: 1, //初始化加载第一页，默认第一页
 pageSize: 5, //每页的记录行数（*）
 pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
 search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
 strictSearch: true,
 showColumns: true, //是否显示所有的列
 showRefresh: true, //是否显示刷新按钮
 minimumCountColumns: 2, //最少允许的列数
 clickToSelect: true, //是否启用点击选中行
 height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
 uniqueId: "Id", //每一行的唯一标识，一般为主键列
 showToggle: true, //是否显示详细视图和列表视图的切换按钮
 cardView: false, //是否显示详细视图
 detailView: false, //是否显示父子表
 columns: [
 {
 radio: true
 }, {
 field: 'Title',
 title: '任务名称',
 sortable: true
 }, {
 field: 'Description',
 title: '任务描述'
 }, {
 field: 'AssignedPersonName',
 title: '任务分配'
 }, {
 field: 'State',
 title: '任务状态',
 formatter: showState
 }, {
 field: 'CreationTime',
 title: '创建日期',
 formatter: showDate
 }, {
 field: 'operate',
 title: '操作',
 align: 'center',
 valign: 'middle',
 clickToSelect: false,
 formatter: operateFormatter,
 events: operateEvents
 }
 ]
 });
 };


这段JS中bootstrap table初始化配置的参数说明已经在代码中进行了注释。
下面对几个重要的参数进行讲解：
3.3.1. queryParams查询参数
初始化的时候我们指定了查询参数为：


queryParams: oTableInit.queryParams, //传递参数（*）


其中queryParams函数定义如下：


//指定bootstrap-table查询参数
oTableInit.queryParams = function(params) {
 var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
 limit: params.limit,
 //页面大小
 offset: params.offset,
 //页码
 sortfiled: params.sort,
 //排序字段
 sortway: params.order,
 //升序降序
 search: $("#txt-filter").val(),
 //自定义传参-任务名称
 status: $("#txt-search-status").val() //自定义传参-任务状态
 };
 return temp;
};


和控制器中的Action的函数命名进行比较public JsonResult GetAllTasks(int limit, int offset, string sortfiled, string sortway, string search, string status)，其中参数命名的大小写以及顺序与js中定义的查询参数保持一致，这也是必须要注意的一点。
3.3.2. 数据绑定
数据绑定包括以下三个部分：
url：就是用来指定请求后台的URL；
uniqueid：用来绑定每一行的唯一标识列，一般为主键列
columns：用来绑定每一列要显示的数据。
针对columns参数，其中field必须与你请求返回的json数据的key大小写保持一致；
title就是显示的列名；
align指定列的水平对其方式；
valign指定列的垂直对齐方式；
formatter用来指定列如何进行格式化输出，如操作列中指定formatter: operateFormatter,用来显示统一格式的操作组；


//指定操作组
 function operateFormatter(value, row, index) {
 return [
 '<a class="like" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="Like">',
 '<i class="glyphicon glyphicon-heart"></i>',
 '</a>',
 ' <a class="edit" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="Edit">',
 '<i class="glyphicon glyphicon-edit"></i>',
 '</a>',
 ' <a class="remove" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="Remove">',
 '<i class="glyphicon glyphicon-remove"></i>',
 '</a>'
 ].join('');
 }


events用来指定列的事件，比如操作列中指定events: operateEvents来指定每个操作对应的事件处理：


 //指定table表体操作事件
 window.operateEvents = {
 'click .like': function(e, value, row, index) {
 alert('You click like icon, row: ' + JSON.stringify(row));
 console.log(value, row, index);
 },
 'click .edit': function(e, value, row, index) {
 editTask(row.Id);
 },
 'click .remove': function(e, value, row, index) {
 deleteTask(row.Id);
 }
 };


3.3.3. 工具栏事件绑定
工具栏是我们在List.cshtml定义的新增、编辑、删除三个按钮，表格初始化时，直接为toolbar参数指定工具栏对应的id即可，如本例toolba: '#toolbar'。那工具栏按钮的事件在哪绑定呢？直接上代码吧：


//bootstrap-table工具栏按钮事件初始化
var ButtonInit = function() {
 var oInit = new Object();
 var postdata = {};
 oInit.Init = function() {
 //初始化页面上面的按钮事件
 $("#btn-add")
 .click(function() {
 $("#add").modal("show");
 });
 $("#btn-edit")
 .click(function() {
 var selectedRaido = $table.bootstrapTable('getSelections');
 if (selectedRaido.length === 0) {
 abp.notify.warn("请先选择要编辑的行！");
 } else {
 editTask(selectedRaido[0].Id);
 }
 });
 $("#btn-delete")
 .click(function() {
 var selectedRaido = $table.bootstrapTable('getSelections');
 if (selectedRaido.length === 0) {
 abp.notify.warn("请先选择要删除的行！");
 } else {
 deleteTask(selectedRaido[0].Id);
 }
 });
 $("#btn-query")
 .click(function() {
 $table.bootstrapTable('refresh');
 });
 };
 return oInit;
};


该方法会在页面加载初被调用：


var oButtonInit = new ButtonInit(); oButtonInit.Init();


另外函数中使用了bootstrap table预置的2个比较实用的函数：


$table.bootstrapTable('getSelections')：获取表格选择项
$table.bootstrapTable('refresh')：刷新表格


4. 总结
本文主要讲解了如何使用bootstrap table进行后台分页的一般用法，讲解了bootstrap table参数的配置和几个注意事项。其中有很多功能并未讲到，具体请自行查询文档。