BootStrap-table 在asp.net中的應用
阿新 • • 發佈：2018-12-17
前臺UI：
<head>
<meta charset="utf-8" />
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">
</head>
<body>
<table json動態繪製表格
$('#table').bootstrapTable({
url: "test.ashx",
cache: false,//是否使用快取
method: "post",
toolbar: "#toolbar",
showRefresh: true,//重新整理按鈕
sortStable: true,//是否支援排序
contentType: "application/x-www-form-urlencoded",//post請求必須要有，否則後臺接受不到引數
pagination: true,//是否顯示分頁
sidePagination: "server",//設定在服務端還是客戶端分頁
pageNumber: 1,//首頁頁碼，預設為1
pageSize: 10,//頁面資料條數,預設為10
search: true,//是夠有搜尋框
clickToSelect: true,//點選是否選中行
queryParamsType: "",
queryParams: function (params) {
return {
pageSize: params.pageSize,//pageSize
pageNumber: params.pageNumber,//偏移量
sortName: params.sortName,//以哪個欄位排序
sortOrder: params.sortOrder,//降序還是升序,asc,desc
searchText: params.searchText//搜尋關鍵字
};
},
formatLoadingMessage: function () {
return "請稍後，正在載入....";
},
formatNoMatches: function () {
return "暫無匹配資料.";
},
columns: [{
field: "select",
title: "全選",
checkbox:true,
}, {
field: 'LAB_NO',
title: '實驗室賬號',
sortable:true
}, {
field: 'LAB_NAME',
title: '實驗室名稱'
}, {
field: 'PHONE',
title: '手機號'
}, {
field: 'MAIL',
title: '郵箱'
}, {
field: 'CONTACT',
title: '聯絡人'
}, {
field: 'USER_FUNC',
title: '使用者許可權'
}]
});後臺一般處理程式
/// <summary>
/// 測試呼叫bootstrap分頁
/// </summary>
public class test : IHttpHandler
{
SQLDatabase db = new SQLDatabase();
private int pageSize = 10;//一頁顯示的資料
private int pageNumber = 1;//頁碼
private string sortName = "";//排序欄位
private string sortOrder = "1";//asc or desc
private string searchText = "";//關鍵字
public void ProcessRequest(HttpContext context)
{
if (!string.IsNullOrEmpty(context.Request["pageSize"]))
pageSize = Convert.ToInt32(context.Request["pageSize"]);
if (!string.IsNullOrEmpty(context.Request["pageNumber"]))
pageNumber = Convert.ToInt32(context.Request["pageNumber"]);
if (!string.IsNullOrEmpty(context.Request["sortName"]))
sortName = (context.Request["sortName"]);
if (!string.IsNullOrEmpty(context.Request["sortOrder"]))
{
sortOrder = (context.Request["sortOrder"]);
if (sortOrder == "asc")
sortOrder = "1";
else if (sortOrder == "desc")
sortOrder = "0";
}
string strWhere = "";
if (!string.IsNullOrEmpty(context.Request["searchText"]))
{
searchText = (context.Request["searchText"]);
strWhere += string.Format(" (user_no like '%{0}%' or user_name like '%{0}%')", searchText);
}
string json = LoadTableByPagination("tb_user", "*", pageNumber, pageSize,Convert.ToInt32(sortOrder), strWhere, "user_no");
context.Response.Write(json);
context.Response.End();
}
/// <summary>
/// 呼叫分頁儲存過程，返回table的json資料
/// </summary>
/// <param name="table">資料庫表名</param>
/// <param name="fields">查詢的欄位</param>
/// <param name="pageNumber">當前頁碼</param>
/// <param name="pageSize">一頁顯示的資料</param>
/// <param name="orderSort">0降序，1升序</param>
/// <param name="strWhere">查詢條件</param>
/// <param name="orderName">排序欄位</param>
/// <returns></returns>
string LoadTableByPagination(string table,string fields,int pageNumber,int pageSize,int orderSort,string strWhere,string orderName )
{
string json = "";
SqlParameter[] parameters = {new SqlParameter("@TABLE",SqlDbType.VarChar,50),
new SqlParameter("@FEILDS",SqlDbType.VarChar,1000),
new SqlParameter("@PAGE_INDEX",SqlDbType.Int,4),
new SqlParameter("@PAGE_SIZE",SqlDbType.Int,4),
new SqlParameter("@ORDERTYPE",SqlDbType.Bit),
new SqlParameter("@ANDWHERE",SqlDbType.VarChar,1000),
new SqlParameter("@ORDERFEILD",SqlDbType.VarChar,100)
};
parameters[0].Value = table;//表格
parameters[1].Value = fields;//欄位
parameters[2].Value = pageNumber;
parameters[3].Value = pageSize;
parameters[4].Value = orderSort;//0是降序，1是升序
parameters[5].Value = strWhere;//條件
parameters[6].Value = orderName;//排序欄位
DataSet dataSet = db.RunProcDataSet("pagination", parameters);
if (dataSet != null)
{
DataTable dt = dataSet.Tables[0];
//後臺返回的json資料必須包含total，和rows屬性，否則前臺沒資料
if (dataSet.Tables[1] != null && dataSet.Tables[1].Rows.Count > 0)
json += "{\"total\":" + dataSet.Tables[1].Rows[0]["total"] + ",";
if (dt != null & dt.Rows.Count > 0)
json += "\"rows\":" + DataTableToJson(dt) + "}";
}
return json;
}
public bool IsReusable
{
get
{
return false;
}
}
#region Json&DataTable
/// <summary>
/// DataTable轉為json
/// </summary>
/// <param name="dt">DataTable</param>
/// <returns>json資料</returns>
public static string DataTableToJson(DataTable dt)
{
List<Dictionary<string, object>> list = new List<Dictionary<string, object>>();
foreach (DataRow dr in dt.Rows)
{
Dictionary<string, object> result = new Dictionary<string, object>();
foreach (DataColumn dc in dt.Columns)
{
result.Add(dc.ColumnName, dr[dc]);
}
list.Add(result);
}
int recursionLimit = 100;
JavaScriptSerializer serialize = new JavaScriptSerializer();
serialize.RecursionLimit = recursionLimit;
serialize.MaxJsonLength = Int32.MaxValue;
return serialize.Serialize(list);
}
#endregion Json&DataTable
}Sql Server 儲存過程
/*資料分頁*/
CREATE PROCEDURE [dbo].[PAGINATION]
@TABLE varchar(50),--資料庫表名
@FEILDS VARCHAR(1000),--要顯示的欄位
@PAGE_INDEX INT,--當前頁碼
@PAGE_SIZE INT,--頁面大小
@ORDERTYPE BIT,--當為0時 則為 desc 當為1 時 asc
@ANDWHERE VARCHAR(1000)='',--where語句 不用加where
@ORDERFEILD VARCHAR(100) --排序的欄位
as
DECLARE @EXECSQL VARCHAR(2000)
DECLARE @ORDERSTR VARCHAR(100)
DECLARE @ORDERBY VARCHAR(100)
BEGIN
set NOCOUNT on
IF @ORDERTYPE = 1
BEGIN
SET @ORDERSTR = ' > ( SELECT MAX(['+@ORDERFEILD+'])'
SET @ORDERBY = 'ORDER BY '+@ORDERFEILD+' ASC'
END
ELSE
BEGIN
SET @ORDERSTR = ' < ( SELECT MIN(['+@ORDERFEILD+'])'
SET @ORDERBY = 'ORDER BY '+@ORDERFEILD+' DESC'
END
IF @PAGE_INDEX = 1 --當頁碼是第一頁時直接執行，提高速度
BEGIN
IF @ANDWHERE=''
SET @EXECSQL = 'SELECT TOP '+STR(@PAGE_SIZE)+' '+@FEILDS+' FROM ['+@TABLE+'] '+@ORDERBY
ELSE
SET @EXECSQL = 'SELECT TOP '+STR(@PAGE_SIZE)+' '+@FEILDS+' FROM ['+@TABLE+'] WHERE '+@ANDWHERE+' '+ @ORDERBY
END
ELSE
BEGIN
IF @ANDWHERE=''
BEGIN --以子查詢結果當做新表時 要給表名別名才能用
SET @EXECSQL = 'SELECT TOP'+STR(@PAGE_SIZE)+' '+@FEILDS+' FROM ['+@TABLE+'] WHERE '+@ORDERFEILD+
@ORDERSTR+' FROM (SELECT TOP '+STR(@PAGE_SIZE*(@PAGE_INDEX-1))+' '+@ORDERFEILD+
' FROM ['+@TABLE+'] '+@ORDERBY+') AS TEMP) '+ @ORDERBY
END
ELSE
BEGIN
SET @EXECSQL = 'SELECT TOP'+STR(@PAGE_SIZE)+' '+@FEILDS+' FROM ['+@TABLE+'] WHERE '+@ORDERFEILD+
@ORDERSTR+' FROM (SELECT TOP '+ STR(@PAGE_SIZE*(@PAGE_INDEX-1))+' '+@ORDERFEILD+
' FROM ['+@TABLE+'] WHERE '+@ANDWHERE+' '+@ORDERBY+') AS TEMP) AND '+@ANDWHERE+' '+ @ORDERBY
END
END
--獲取table的總行數
IF @ANDWHERE=''
set @EXECSQL=@EXECSQL+'; select count(*) as total from ['+@TABLE+'] '
else
set @EXECSQL=@EXECSQL+'; select count(*) as total from ['+@TABLE+'] WHERE '+@ANDWHERE
EXEC (@EXECSQL)--這裡要加括號
END
GO官方文件介面：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/