1. 加載一個表格
1.1.宣告表格，執行渲染，有三種渲染方式：1).方法渲染、用JS方法的配置完成渲染，無需寫過多的HTML，在JS中指定原始元素，再設定各項引數即可。2).自動渲染，HTML配置，自動U型安然，無需寫過多JS，可專注于HTML表頭部分。3).轉為靜態表格，轉化一段已有的表格元素，無需配置資料介面，在JS中指定表格元素，并簡單地給表頭加上自定義屬性即可
var layui表格名；
表名= layui表格名.render.render({
1.2.引數
elem: '#demo' //指定原始 table 容器的選擇器或 DOM，方法渲染方式必填（推薦id選擇器）
,height: Number/String //容器高度
Page：Boolean/Object //開啟分頁
Limit：Number //每頁顯示的條數（默認：10）
Limits：Array //每頁條數的選擇項，默認：[10,20,30,40,50,60,70,80,90]。
……
1.3. 設定表頭
,cols: [[//標題欄
{
field：String //（必填項）設定欄位名。欄位名的設定非常重要，且是表格資料列的唯一標識
Title：String //（必填項）設定標題名稱
Width：Number/String //設定列寬（默認自動分配）。支持填寫：數字、百分比
minWidth：Number //區域定義當前常規單元格的最小寬度（默認：60），一般用于列寬自動分配的情況
type：String //設定列型別。可選值有：normal（常規列，無需設定）、checkbox（復選框列）、space（空列）、numbers（序號列）
fixed：String //固定列。可選值有：left（固定在左）、right（固定在右）。一旦設定，對應的列將會被固定在左或右，不隨滾動條而滾動。
Style：String //自定義單元格樣式。即傳入 CSS 樣式
Align：String //單元格排列方式。可選值有：left（默認）、center（居中）、right（居右）……}
]]
});
2.到控制器分頁查詢學生資料
2.1.鏈表查詢出需要的資料
2.2.進行條件帥選：
if (條件){
變數名1= 變數名1.Where(自定義名 => 自定義名.需要查詢的資料.Contains(需要查詢的資料));
}
2.3.進行分頁查詢學生資料
List<自定義的表名> 變數名2= 變數名2
.OrderByDescending(自定義名=>自定義名.資料ID)//根據資料ID倒敘排序
.Skip(控制器傳的資料.GetStartIndex())//跳過前面頁數的資料
.Take(控制器傳的資料.limit)//查詢本頁資料的條數
.ToList();//回傳List集合
2.4.查詢學生資料的總條數
int 變數名3= myModel.自定義表名.Count();
2.5.準備Layui Table所需的資料格式（泛型）
LayuiTableData<自定義表名> 變數名4= new LayuiTableData<自定義表名>(){
count = 變數名2,//總條數 data = 變數名3,//本頁的資料
}
2.6.回傳Json： returnJson(變數名4, JsonRequestBehavior.AllowGet);
3.到視圖開始查詢table
3.1.獲取頁面輸入的資料
3.2.表格多載
表名.reload({
where: {
頁面輸入的資料1：頁面輸入的資料1，
頁面輸入的資料2：頁面輸入的資料2，
……},
page: {
curr: 1//重新從第一頁開始
}
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/17095.html
標籤：非技術區
下一篇：登錄