Bootstrap结合BootstrapTable的使用，分为两种模试显示列表。
引用的css：
<link href="@Url.Content("~/Css/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Css/bootstrap-table.css")" rel="stylesheet" type="text/css" />
引用的JS：
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap-table.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap-table-zh-CN.js" type="text/javascript"></script>
常用方法：
刷新表格：$table.bootstrapTable(\'refresh\');
获取选择的行：$table.bootstrapTable(\'getSelections\');
1.服务端请求：即当数据量大，千百万条数据的情况下，只获取当页条件下的数据。每点击分页或查询都向服务端重新获取分页数据。
前端代码：
function initTable() {
var queryUrl = \'@Url.Content("~/Welcome/QueryList")\' + \'?rnd=\' + +Math.random();
$table = $(\'#table-javascript\').bootstrapTable({
//method: \'get\',
method: \'post\',
contentType: "application/x-www-form-urlencoded",//必须的，操你大爷！！！！
url: queryUrl,
height: $(window).height() - 200,
striped: true,
pagination: true,
singleSelect: false,
pageSize: 50,
pageList: [10, 50, 100, 200, 500],
search: false, //不显示 搜索框
showColumns: false, //不显示下拉框（选择显示的列）
sidePagination: "server", //服务端请求
queryParams: queryParams,
minimunCountColumns: 2,
columns: [{
field: \'state\',
checkbox: true
}, {
field: \'Name\',
title: \'姓名\',
width: 100,
align: \'center\',
valign: \'middle\',
sortable: true,
formatter: nameFormatter
}, {
field: \'Gender\',
title: \'性别\',
width: 40,
align: \'left\',
valign: \'top\',
sortable: true,
formatter: sexFormatter,
sorter: priceSorter
}, {
field: \'Birthday\',
title: \'出生日期\',
width: 80,
align: \'left\',
valign: \'top\',
sortable: true
}, {
field: \'CtfId\',
title: \'身份证\',
width: 80,
align: \'middle\',
valign: \'top\',
sortable: true
}, {
field: \'Address\',
title: \'地址\',
width: 180,
align: \'left\',
valign: \'top\',
sortable: true
}, {
field: \'Tel\',
title: \'固定电话\',
width: 100,
align: \'left\',
valign: \'top\',
sortable: true
}, {
field: \'Mobile\',
title: \'手机号码\',
width: 100,
align: \'left\',
valign: \'top\',
sortable: true
}, {
field: \'operate\',
title: \'操作\',
width: 100,
align: \'center\',
valign: \'middle\',
formatter: operateFormatter,
events: operateEvents
}],
onLoadSuccess:function(){
},
onLoadError: function () {
mif.showErrorMessageBox("数据加载失败！");
}
});
}
//传递的参数
function queryParams(params) {
return {
pageSize: params.pageSize,
pageIndex: params.pageNumber,
UserName: $("#txtName").val(),
Birthday: $("#txtBirthday").val(),
Gender: $("#Gender").val(),
Address: $("#txtAddress").val(),
name: params.sortName,
order: params.sortOrder
};
}
服务器端代码：
public ActionResult QueryList(int pageIndex = 1, int pageSize = 100)
{
try
{
string name = Request["UserName"];
string birthday = Request["Birthday"];
string gender = Request["Gender"];
string Address = Request["Address"];
Document docQuery = new Document();
if (!string.IsNullOrEmpty(name))
{
docQuery.Add("Name", new MongoRegex(".*" + name + ".*", MongoRegexOption.IgnoreCase));
}
if (!string.IsNullOrEmpty(birthday))
{
docQuery.Add("Birthday", new MongoRegex(".*" + birthday + ".*", MongoRegexOption.IgnoreCase));
}
if (!string.IsNullOrEmpty(gender))
{
docQuery.Add("Gender", gender);
}
if (!string.IsNullOrEmpty(Address))
{
docQuery.Add("Address", new MongoRegex(".*" + Address + ".*", MongoRegexOption.IgnoreCase));
}
if (this.HttpContext.Request.QueryString.AllKeys.Contains("ToExcel"))
{
List<OpenRoom> listExport = MongoDbHelper.GetList<OpenRoom>(MongoTables.OpenRoom, docQuery);
//List<string> listTilte = new List<string> { "" };
ExportMethod(listExport);
}
long totalCount = MongoDbHelper.GetTotalCount<OpenRoom>(MongoTables.OpenRoom, docQuery);
var list = MongoDbHelper.GetList<OpenRoom>(MongoTables.OpenRoom, docQuery, new Document(), pageIndex, pageSize);
string jsonString = JsonHelper.ObjToJson(list);
jsonString = "{\"total\":" + totalCount.ToString() + ",\"rows\":" + jsonString + "}";
return Content(jsonString);
}
catch (Exception ex)
{
return Content(ex.Message);
}
}
注意返回的格式：要返回总记录数total及分页后数据rows。
未解决问题：导出Excel时，超出65536行数据时，会异常。怎样解决这个问题？
2.客户端请求：当数据量较少，只有上千条数据时，一次性将所有数据返回给客户端，无论点下一页，或搜索条件时，不向服务端发请求，实现全文检索。
这个比较简单，将sidePagination属性设为 "client",因为客户端会处理分页和全文检索，无需向服务器端发请求，所以也无需传递参数。
前端JS:
function initTable() {
var queryUrl = \'@Url.Content("~/UserInfo/QueryList")\' + \'?rnd=\' + +Math.random();
$table = $(\'#table-javascript\').bootstrapTable({
method: \'get\',
url: queryUrl,
height: $(window).height() - 200,
striped: true,
pagination: true,
pageSize: 50,
pageList: [10, 25, 50, 100, 200],
search: true,
sidePagination: "client",
showColumns: true,
minimunCountColumns: 2,
columns: [{
field: \'state\',
radio: true
}, {
field: \'Id\',
title: \'ID\',
align: \'right\',
valign: \'bottom\',
sortable: true
}, {
field: \'UserName\',
title: \'姓名\',
width: 100,
align: \'center\',
valign: \'middle\',
sortable: true,
formatter: nameFormatter
}, {
field: \'Account\',
title: \'账号\',
align: \'left\',
valign: \'top\',
sortable: true
}, {
field: \'Address\',
title: \'家乡\',
align: \'middle\',
valign: \'top\',
sortable: true
}, {
field: \'Phone\',
title: \'电话\',
align: \'left\',
valign: \'top\',
sortable: true
}, {
field: \'QQ\',
title: \'QQ号码\',
align: \'left\',
valign: \'top\',
sortable: true
}, {
field: \'Remark\',
title: \'备注\',
align: \'left\',
valign: \'top\',
sortable: true
}, {
field: \'operate\',
title: \'操作\',
align: \'center\',
width: 100,
valign: \'middle\',
formatter: operateFormatter,
events: operateEvents
}]
});
}
后台直接返回Json数据即可。
后台代码：
public ActionResult QueryList()
{
try
{
List<sys_user> list = accessHelper.GetUserList();
string jsonString = JsonHelper.ObjToJson(list);
return Content(jsonString);
}
catch (Exception ex)
{
return Content(ex.Message);
}
}