本文转自：https://www.cnblogs.com/zhangjd/p/7895453.html
效果如图：
一、声明talbe
<div class="container">
<table id="table" class="table table-bordered">
</table>
</div>
二、JS绑定Table值
当前使用的是服务端分页 sidePagination: "server" 。根据数据库的查询结果绑定table数据每次只查询当前显示的行，适合数据量大的程序；还有一种是客户端分页，是一次性查询出所有的内容，然后再分页，客户端分页的模式适合数据量小的程序。client模式的分页还没研究，这里就不演示了。
<script type="text/jscript">
$(function () {
$('#table').bootstrapTable({
//请求方法
method: 'get',
//是否显示行间隔色
striped: true,
//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
cache: false,
//是否显示分页（*）
pagination: true,
//是否启用排序
sortable: true,
//排序方式
sortOrder: "asc",
//初始化加载第一页，默认第一页
pageNumber: 1,
//每页的记录行数（*）
pageSize: 10,
//可供选择的每页的行数（*）
pageList: [10, 20, 30, 40],
//这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
url: "jgdx.ashx?action=GetJson",
//默认值为 'limit',传给服务端的参数为：limit, offset, search, sort, order Else
//queryParamsType:'',
//查询参数,每次调用是会带上这个参数，可自定义
queryParams: function (params) {
return {
rows: params.limit, //页面大小
page: (params.offset / params.limit) + 1, //页码
sort: params.sort, //排序列名
sortOrder: params.order //排位命令（desc，asc）
};
},
//分页方式：client客户端分页，server服务端分页（*）
sidePagination: "server",
//是否显示搜索
search: false,
strictSearch: true,
idField: "id",
columns: [{
field: 'rownum',
title: '序号',
align: 'center'
}, {
field: 'dm',
title: '代码',
align: 'center'
}, {
field: 'xm',
title: '姓名',
align: 'center'
}, {
field: 'xb',
title: '性别',
align: 'center'
},{
field: 'mid',
title: '操作',
align: 'center',
formatter: function (value, row, index) {
//通过formatter可以自定义列显示的内容
//value：当前field的值，即id
//row：当前行的数据
var a = '<a href="#" >编辑</a> ';
var b = '<a href="#" >删除</a>';
return a + b;
}
}, {
checkbox: true,
visible: true //是否显示复选框
}],
pagination: true
});
});
</script>
三、后台代码：分页需要加上total和row属性，另外需要获取前台传入的rows和page值，来查询需要的行数。
string sql = "";
DataSet ds = new DataSet();
public void ProcessRequest(HttpContext context)
{
string output = "";
string action = context.Request["action"].ToString();switch (action)
{
case "GetJson":
DataTable dt = getData(context);
string str = DataTableToJsonWithStringBuilder(dt);
output = "{\"total\":" + getCout(context) + ",\"rows\":" + str + "}";
break;default:
break;
} context.Response.ContentType = "text/plain";
context.Response.Write(output);
}public string GetJson(HttpContext context)
{
DataTable dt = getData(context);
return DataTableToJsonWithStringBuilder(dt);
}
public DataTable getData(HttpContext context)
{
int rows = Convert.ToInt32(context.Request["rows"]);//显示行数
int page = Convert.ToInt32(context.Request["page"]);//页码
int starNum = rows * page - rows + 1;//开始行数
int endNum = rows * page;//结束行数
string sql = "select * from (select row_number() over(order by @@servername) as rownum,* from yhgl)a where rownum between " + starNum + " and " + endNum + "";
DataSet ds = pub.GetDataset(sql, "xinxi");
return ds.Tables["xinxi"];
}
public int getCout(HttpContext context)
{
string sql = "select count(*) count from yhgl";
DataSet ds = pub.GetDataset(sql, "xinxi");
return Convert.ToInt32(ds.Tables["xinxi"].Rows[0]["count"]);
}
public string DataTableToJsonWithStringBuilder(DataTable table)
{
var jsonString = new StringBuilder();
if (table.Rows.Count > 0)
{
jsonString.Append("[");
for (int i = 0; i < table.Rows.Count; i++)
{
jsonString.Append("{");
for (int j = 0; j < table.Columns.Count; j++)
{
if (j < table.Columns.Count - 1)
{
jsonString.Append("\"" + table.Columns[j].ColumnName.ToString()
+ "\":" + "\""
+ table.Rows[i][j].ToString() + "\",");
}
else if (j == table.Columns.Count - 1)
{
jsonString.Append("\"" + table.Columns[j].ColumnName.ToString()
+ "\":" + "\""
+ table.Rows[i][j].ToString() + "\"");
}
}
if (i == table.Rows.Count - 1)
{
jsonString.Append("}");
}
else
{
jsonString.Append("},");
}
}
jsonString.Append("]");
}
return jsonString.ToString();
}