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);
}
}