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的強大功能展示的淋漓盡致，你還有什麼理由不用他呢？本次實例很簡單，但願某些大神能夠給點關注，給點評價，菜鳥一枚，還望各位海涵，若有代碼錯誤或者其餘漏點，請與我聯繫，我將會及時改正，但願與博客園的各位大佬共同進步！天天學習一點點小知識！