頁面數據表的顯示和(分頁)查詢

開發工具與關鍵技術:Visual
Studio 與javascript和C#

作者:黃燦

撰寫時間:2019.4.2

以我剛入門正在學習的一個重慶郵電大學的一個項目來演示

學院信息維護頁面的數據查詢以及顯示到頁面中!

第一步:在javascript中使用layui這個插件(plugin)來創建一個動態數據表(table),申明layer和layuiTable這兩個變量,方便全局變量使用,再申明一個tabAcademe存放表格!
在這裏插入圖片描述

引入jquery-3.2.1插件,在javascript中的jquery代碼塊中使用layui插件來創建一個table,在jquery代碼塊中在先使用layui模塊,然後在layui模塊中說明layer和layuiTable等於layui的layer和table
在這裏插入圖片描述

初始化tabAcademe表格,render是layui插件中初始化表格的一個方法,elem獲取html那邊table的ID,url是數據查詢的接口,連接控制器,

在這裏插入圖片描述

cols表頭這段代碼可以layui官網中查詢出來粘貼複製,然後修改成自己想要的一個表頭。
在這裏插入圖片描述

type:’radio’是單選框,type:’checkbox’是複選框,fixed:’left’是把選框這個列固定在左邊,title是一個標題可以隨便更改,field:’XXX’這個是對應html的input標籤的name,這個hide:true是將這個列設爲隱藏列,對應html的一個隱藏inoput

在這裏插入圖片描述

顯示出來的數據需要和數據庫那邊相對應

在這裏插入圖片描述

最後面這個title則是一個固定在右邊的操作按鈕列,width:160和align:’center’是給定這個列的寬度爲160個像素和設置按鈕在這個列中居中,templet:setOperate是設置自定義按鈕的方法

在這裏插入圖片描述

這個自定定義操作按鈕系列需要申明一個數據的ID,和一個返回按鈕,這個返回按鈕的點擊事件中拼接是一個參數

最後再寫一個page分頁顯示數據

在這裏插入圖片描述

limit指定每頁顯示的條數

limits每頁條數的選擇項

第二步:到控制器寫查詢數據的方法

在這裏插入圖片描述

SelectAcademeAll這個方法對應初始化表格url的方法

LayuiTablePage是一個實體類,需要到控制器頂部using引用實體類這個文件

在這裏插入圖片描述
這個LayuiTablePage實體類有page當前頁面、limit每頁數據量、GetStartIndex分頁開始序號、GetEndIndex分頁結束序號在這裏插入圖片描述

使用linq的方法查詢數據

不知道數據是什麼類型就使用var,var是匿名數據類型,它在編譯的時候C#會把它翻譯成具體的數據類型。查詢學院from 自定義一個表名tbAcademe,數據來自model中的學院表,model需要在控制器頂部引入
在這裏插入圖片描述

和實例化

在這裏插入圖片描述

不需要where條件,然後根據學院ID排序orderby一下查詢出來的學院數據,select是查詢
在這裏插入圖片描述

計算一下查詢出來的學院數據的總行數

學院數據是int類型所以用int,也可以用var,但是知道具體類型還是用具體類型比較好

在這裏插入圖片描述

使用linq查詢之後分頁查詢數據

List是列表,把查詢的學院數據放到一個列表中,數據來源於linq查詢出來的數據,Skip是從哪裏開始查詢,layuiTablePage.GetStartIndex()是之前引入的一個實體類從分頁開始處查詢,Take是跳轉到哪裏,layuiTablePage.limit是跳轉到哪一頁數據,ToList()是查詢多條數據,這是查詢一整個學校有多少學院所以要使用ToList(),如果只查詢一條數據用Single()就可以了

在這裏插入圖片描述引入一個LayuiTableDate實體類,LayuiTableDate實體類中有數據狀態碼(可以不設置)、狀態信息(可以不設置)、總行數(必須設置)、數據(必須)在這裏插入圖片描述

實例化new一下這個LayuiTableDate<SYS_Academe>,然後把計算出來的數據的總行數放進LayuiTableDate實體類中的count和把分頁查詢的數據放到LayuiTableDate實體類中的data,最後把封裝好的數據返回到頁面顯示出來

在這裏插入圖片描述

運行起來打開頁面查看查詢到的數據返回到頁面的數據表格

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章