LayUI分頁基於ASP.NET MVC


---恢復內容開始---

今天寫了挺久的分頁,百度了很多都沒有很好的.Net實例,今天我來更新一期關於layuiTable分頁

首先你得理解layui的官方文檔的Table分頁部分,我在這里附上地址 https://www.layui.com/doc/modules/table.html 方便你們隨時邊看我的實例和lay文檔

其實我寫的很簡單

首先介紹我用到的東西,使用前段模板:layui的table和layui的表單(此處不細提),開發工具:Vs2017,數據庫:Sqlserver2008,ORM:EF,框架:ASP.NET MVC,簡單的三層架構

廢話不多說,直接上代碼

首先是cshtml的頁面部分:

<div class="table">
            <table class="layui-table" id="layui_table_id" lay-filter="dataTable"></table>
        </div>

定義一個table,此處我采用的三大渲染方式的--方法渲染

js代碼:

table.render({//申明table的實例(前面的layui.use,我直接省略,如有需要請直接觀看文檔)
                id: "dataTable",//此處可以看文檔
                elem: '#layui_table_id',//指定表格元素
                url: '/Release/PxbmbDataPaging',  //請求路徑
                where: { pxid: data.value}, //擴展參數,可以傳數據到后台
                title: '用戶數據表',
                limit: 5,//一頁能夠顯示的最大數目
                cellMinWidth: 20 //全局定義常規單元格的最小寬度,layui 2.2.1 新增    
                , page: true//允許分頁(一定要開啟這個!)
                , method: 'post'  //提交方式
                , cols: [[
                    {
                        field: 'lsh', //json對應的流水號
                        title: '流水號',   //列名
                        sort: true//是否允許排序
                    },
                    {
                        field: 'xm', //json對應的姓名
                        title: '姓名'  //列名
                    },
                    {
                        field: 'xb', //json對應的性別
                        title: '性別'   //列名
                    }
                    ,
                    {
                        field: 'gzdw', //json對應的工作單位
                        title: '工作單位'   //列名
                    }
                    ,
                    {
                        field: 'lxdh', //json對應的聯系電話
                        title: '聯系電話'   //列名
                    }
                ]]
            });

有的小伙伴很好奇我的where參數是什么,首先我要告訴你,我的這個pxid是根據下拉菜單去選擇我要呈現的數據,不去細細探究,你可以忽略

現在寫好了js和html,是不是就可以了?

當然不是,你的數據呢???

為了更直觀,我直接放出我的數據庫

我這個數據庫設計很粗糙,簡單的思路就是根據pxid(培訓id)去查詢學生,可以看到我的pxid為3的學生是最多的,那我們就拿這列去實現分頁功能

現在有了數據庫和前段頁面,現在就到寫controller的時候了,可能有的小伙伴還不是很懂MVC的工作原理,這個你就得去補課了哦,但是MVC很好理解的!

controller代碼:

 /// <summary>
        /// 學員報名表數據分頁
        /// </summary>
        /// <returns></returns>
        [HttpPost]
        public JsonResult PxbmbDataPaging(int page, int limit, int pxid)
        {            
            List<Ts_Pxbmb> list=BLLService.GetPagesPxbmb(limit,page,pxid);//根據pxid獲得的每頁學生
            int Count = BLLService.GetPagesPxbmbCount(pxid);//根據pxid獲得的學生總數
            return Json(new {code=0,count=Count,data=list,msg="Get Data Success!"}); //為什么要寫這種格式呢,可以去查看官方文檔去看看他的格式要求
        }

可以看到我的這個方法有了三個參數,第一個參數page是我們的頁面索引-代表了這是第一頁,第二個參數是limit就是我們每頁顯示的數據是多少,

我上面的js代碼標注了limit為5,所以當第一次用戶從下拉選擇框選擇pxid(培訓項目時)傳過來的值為1,5,pxid這個可以忽略。

可以看到,我使用了實體類列表list<Ts_Pxbmb>去獲得我的數據,現在讓我們轉到BLL(業務邏輯層去看看)我們是怎么獲得值的。

BLL代碼:

首先是GetpagesPxbmb的這個方法的代碼:

在你理解這段代碼之前,首先你的去了解分頁查詢的sql語句,比如我用的就是sqlserver2008的分頁查詢用的是ROW_NUMBER() over(order by ** asc這個函數!建議你去百度了解一下(針對初學者了解分頁的原理)

public static List<Ts_Pxbmb> GetPagesPxbmb(int pageSize,int pageIndex,int pxid)
        {
            var start = pageSize * pageIndex - pageSize + 1;//根據分頁的頁面去選擇數據的開始因素
            var end = pageSize * pageIndex;//獲得分頁的最后因素
            string sql = "select * from(select ROW_NUMBER()  over(order by id asc) as num ,* from Ts_Pxbmb) pxbmb where (lsh between "+start+" and "+end+") and pxid="+pxid+"";
            DALService<Ts_Pxbmb> Pxxx = new DALService<Ts_Pxbmb>();
            List<Ts_Pxbmb> list = Pxxx.SelectModelsBysql(sql).ToList();
            return list;
        }  
提示,我的兩個方法的參數順序不是一致的哦,所以你得注意!但這並不影響你的理解
至於為什么要這么寫start和end?你可以想象 當我們穿過來的pageIndex(頁數)為1時,pageSize為5時,pxid為3時,start為1,end為5,那么我執行sql語句得到的結果就是,培訓id為3的項目報名的學生的流水號從1到5(即從第一個到第五個)
在第二次傳入的時候,
pageIndex(頁數)為2時,pageSize為5時(pageSize是不變的),pxid為3時,那么我執行sql語句得到的結果就是,培訓id為3的項目報名的學生的流水號從6到10(即從第六個到第十個)
執行后返回數據

再接下來就是GetPagesPxbmbCount的這個方法的代碼
這個代碼就是獲得當pxid(培訓項目)為某個值的時候,報名該培訓項目學生的數量為多少。
public static int GetPagesPxbmbCount(int pxid) {
            string sql = string.Format("select * from Ts_Pxbmb where pxid='"+pxid+"'");
            DALService<Ts_Pxbmb> Pxxx = new DALService<Ts_Pxbmb>();
            int value = Pxxx.SelectCount(new Ts_Pxbmb(), sql);
            return value;
        }

很容易理解,具體的DAL執行方法我就不說了,和ADO.NET一樣

得到了數據后我們就整體的過一遍吧

提前說一句,我的測試pxid為3,它一共有13名學生!

現在我們運行看看

 

可以看到我們的數據已經出來了,Layui的強大功能展現的淋漓盡致,你還有什么理由不用他呢?
本次實例很簡單,希望某些大神可以給點關注,給點評價,菜鳥一枚,還望各位海涵,如有代碼錯誤或者其他漏點,請與我聯系,我將會及時改正,希望與博客園的各位大佬共同進步!每天學習一點點小知識!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM