詳解MVC如何使用開源分頁插件（shenniu.pager.js）

更新時間：2016年12月16日 13:11:16 作者：神牛步行3

本文主要分享了shenniu.pager.js整個插件內(nèi)容，不多且清晰。具有很好的參考價值，需要的朋友一起來看下吧

最近比較忙，前期忙公司手機端接口項目，各種開發(fā)+調(diào)試+發(fā)布現(xiàn)在幾乎上線無問題了；雖然公司項目忙不過在期間抽空做了兩件個人覺得有意義的事情，一者使用aspnetcore開發(fā)了個人線上項目（要說線上其實只能ip訪問，沒有域名哈哈），其架構(gòu)組成由：aspnetcore1.0.0+redis+ postgressql+TaskMainForm服務，這個項目在后期會開源出來供大家分享學習，站點地址點這里心聲網(wǎng)；一者是目前正在做的后臺管理框架一葉子，現(xiàn)目前剛好吧js分頁插件shenniu.pager.js寫完，個人覺得還是可以的，這也是本章將要和大家分享的內(nèi)容；那么開始今天的分享內(nèi)容，希望各位多多掃碼支持：

為什么采用js分頁及效果圖
在view中如何使用及分享個后臺方法
開發(fā)者視角閱讀shenniu.pager.js代碼

下面一步一個腳印的來分享：

. 為什么采用js分頁及效果圖

首先，咋們來了解下市面上mvc兩種常用的分頁方式：跳轉(zhuǎn)分頁和ajax分頁；跳轉(zhuǎn)分頁意思就是頁面重定向到指定的頁面并通過傳遞分頁需要的參數(shù)，從而獲取數(shù)據(jù)后通過Modal來綁定數(shù)據(jù)，這個每次都會刷下頁面體驗上不是很好；ajax分頁通過異步js請求某個接口，然后從接口獲取到數(shù)據(jù)后，再賦值到展示的界面上，這種方式是不會刷新頁面，從而保證了用戶體驗；

下面來看下這次分享的js分頁插件效果圖：

圖一：

圖二：

圖三：

看效果圖好像看不出來什么東西，我只能說沒辦法，以后爭取弄個gif動態(tài)圖片吧，后面代碼才是關(guān)鍵

. 在view中如何使用及分享個后臺方法

首先，為了頁面樣式好看我使用了bootstrap+ace樣式框架，樣式效果就是如上面幾張圖所示(這里是樣式和js文件)；由于該插件是采用jquery格式書寫的所以需要引用jquery.js，如上面圖所示使用到了日期選擇框，因為我采用的樣式都是基于h5的設計所以這里引用的日期選擇插件bootstrap-datepicker.min.js和她的樣式bootstrap-datepicker3.min.css；該實例需要的引用文件都好了，下面看下截圖：

再來，咋們就開始使用shenniu.pager.js,我們需要在點擊“查詢”按鈕的時候去調(diào)用這個插件，然后通過插件去獲取后臺接口返回的數(shù)據(jù)，并綁定到頁面展示出來，所以有了如下代碼：

var snTool = new shenniuTool();
 $("button[id='btnSearch']").on("click", function () {
 var data = {
 txtName: $("input[name='txtName']").val(),
 nStatus: $("select option:selected").val(),
 dOperateTime: $("input[name='dOperateTime']").val()
 };
 snTool.listFun({
 showId: "divShowResult", //內(nèi)容顯示的div的Id
 url: "/Menu/Search",
 data: data,
 pageSize: 2, //每頁N條
 headText: [
 { nickName: "全選", name: "Id", colType: "checkbox" },
 { nickName: "名稱", name: "Name", colType: "label", isModalHeadText: true },
 { nickName: "鏈接", name: "Link" },
 { nickName: "狀態(tài)", name: "EnableDes" },
 { nickName: "操作人", name: "OperatorDes" },
 { nickName: "操作時間", name: "OperateTime", format: "yyyy-MM-dd" },
 { nickName: "操作", name: "Id", colType: "operate" }
 ],
 editeOption: {
 url: "/Menu/Edit",
 title: "編輯",
 height: 500
 },
 viewOption: {
 url: "/Menu/Details",
 title: "查看",
 height: 500
 },
 delOption: {
 url: "/Menu/Delete",
 title: "刪除",
 height: 500
 },
 modalExt: modalExt
 });
 });

注意參數(shù)url: "/Menu/Search"，這個指向的就是后臺接口，那么咋們來看下我后臺咋們寫的:

[HttpGet]
 public JsonResult Search()
 {
 var moPageResult = new StageModel.MoPageResult<dynamic>();
 try
 {
 var txtName = Request.Params["txtName"];
 var nStatus = string.IsNullOrWhiteSpace(Request.Params["nStatus"]) ? -1 : Convert.ToInt32(Request.Params["nStatus"]);
 var dOperateTime = string.IsNullOrWhiteSpace(Request.Params["dOperateTime"]) ? Convert.ToDateTime("1991-01-01") : Convert.ToDateTime(Request.Params["dOperateTime"]);
 var data = db.MoMenus.AsQueryable();
 if (!string.IsNullOrWhiteSpace(txtName))
 {
 data = data.Where(b => b.Name.Contains(txtName));
 }
 if (nStatus >= 0)
 {
 data = data.Where(b => b.IsEnable == (nStatus == (int)StageEnumHelper.ComStatus.啟用));
 }
 if (dOperateTime > Convert.ToDateTime("1991-01-01"))
 {
 data = data.Where(b => b.OperateTime >= dOperateTime && b.OperateTime < dOperateTime.AddDays(1));
 }
 moPageResult.MoPageContent(
 data,
 b => b.OperateTime,
 b => new
 {
 Id = b.Id,
 Name = b.Name,
 Link = b.Link,
 Des = b.Des,
 IsEnable = b.IsEnable,
 Operator = b.Operator,

 OperatorDes = b.MoUserInfo.NickName,
 EnableDes = b.IsEnable ? "啟用" : "禁用",
 OperateTime = b.OperateTime
 });
 }
 catch (Exception ex)
 {
 }
 return Json(moPageResult, JsonRequestBehavior.AllowGet);
 }

后臺接口Request.Params獲取的幾個參數(shù)就是從前端

var data = {
 txtName: $("input[name='txtName']").val(),
 nStatus: $("select option:selected").val(),
 dOperateTime: $("input[name='dOperateTime']").val()
 };

傳遞過來的，分別代碼了視圖中的名稱，狀態(tài)，操作時間等查詢條件；下面來看下，后臺這兒沒有看到獲取類似分頁的當前頁數(shù)和分頁記錄數(shù)的操作，是封裝到了MoPageResult類中的MoPageContent()中，來看下MoPageResult類代碼如：

#region 分頁數(shù)據(jù)返回
 public class MoPageResult<TResult> where TResult : class, new()
 {
 public MoPageResult()
 {
 }
 public IQueryable<TResult> MoResult;
 /// <summary>
 /// 總頁數(shù)
 /// </summary>
 public int PageTotal { get; set; }
 /// <summary>
 /// 當前頁數(shù)
 /// </summary>
 public int CurrentPage { get; set; }
 /// <summary>
 /// 分頁記錄數(shù)
 /// </summary>
 public int PageSize { get; set; }
 /// <summary>
 /// 分頁方法
 /// </summary>
 /// <typeparam name="TKey"></typeparam>
 /// <param name="query"></param>
 /// <param name="order_desc"></param>
 public void MoPageContent<T, TKey>(IQueryable<T> query, Expression<Func<T, TKey>> desc, Expression<Func<T, TResult>> selector = null, bool isDesc = true) where T : class,new()
 {
 if (HttpContext.Current == null) { return; }
 var Request = HttpContext.Current.Request;
 this.PageSize = string.IsNullOrWhiteSpace(Request.Params["pageSize"]) ? 15 : Convert.ToInt32(Request.Params["pageSize"]);
 this.CurrentPage = string.IsNullOrWhiteSpace(Request.Params["currentPage"]) ? 1 : Convert.ToInt32(Request.Params["currentPage"]);
 var nTotal = query.Count();
 this.PageTotal = nTotal / this.PageSize + (nTotal % this.PageSize > 0 ? 1 : 0);
 if (selector != null)
 {
 if (isDesc)
 {
 query = query.OrderByDescending(desc);
 }
 else
 {
 query = query.OrderBy(desc);
 }
 this.MoResult = query.
 Skip((this.CurrentPage - 1) * this.PageSize).
 Take(this.PageSize).
 Select(selector);
 }
 }
 }
#endregion

MoPageContent()中默認是獲取了pagesize，currentpage參數(shù)，這樣減少了用戶操作性，并且此方法承擔了計算總頁數(shù)和執(zhí)行分頁語句的角色，注意最后查詢語句Select(selector)，selector是Expression<Func<T, TResult>>類型，這個T有條件約束where T : class,new()；我在調(diào)用該分頁類的使用傳遞的T是dynamic，因為賴人如我覺得匿名類更方便；唯一遺憾的是select輸出暫時無法直接對某個屬性直接使用方法；

最后，插件使用還需要注意一個地方，就是時間，如果后臺不處理時間直接DateTime的json格式化，那么在插件獲取出來的時間格式如：

這個時候就需要在使用shenniu.pager.js插件時候在屬性headText中，指定時間列的格式如：

{ nickName: "操作時間", name: "OperateTime", format: "yyyy-MM-dd" }

使用format格式化時間格式，這個插件兼容的給有：yyyy,MM,dd,HH,mm,ss，相信滿足大家需要了；

. 開發(fā)者視角閱讀shenniu.pager.js代碼

首先，我們從上而下，映入眼簾的是插件屬性:

var defOption = {
 showId: "divShowResult", //內(nèi)容顯示的div
 url: "", //ajax數(shù)據(jù)來源地址
 headText: [
 { nickName: "A", colType: "checkbox", name: "Id" },
 { nickName: "B", colType: "label", name: "Name", isModalHeadText: true } //isModalHeadText:是否是模式窗體頭部顯示的信息
 ],
 data: {}, //查詢條件
 editeOption: {
 url: "",
 title: "編輯",
 width: 500,
 height: 500
 }, //編輯地址，不包括id
 viewOption: {
 url: "",
 title: "查看",
 width: 500,
 height: 500
 }, //查看地址
 delOption: {
 url: "",
 title: "刪除",
 width: 500,
 height: 500
 }, //刪除地址
 currentPage: 1, //當前頁數(shù)
 pageSize: 15, //分頁記錄數(shù)
 showPageTab: 6, //展示6個頁數(shù)
 modalExt: null, //模式窗體對象
 //可忽略
 callback: function () { }, //回調(diào)函數(shù)
 tabId: "tab001",
 loading: "努力加載中，等會吧...", //可以直接寫出<img src=''/>
 sucFun: function (data) { },
 befFun: function () { },
 errFun: function () { },
 comFun: function () { },
 timeout: 60000 //超時60S
 };
$.extend(defOption, option);

里面已經(jīng)包括了注釋說明，看起來應該不是問題； $.extend(defOption, option); 這段代碼意思是吧用戶傳遞進來的參數(shù)和插件里面默認的參數(shù)合并，用戶大于插件直接可以覆蓋相同屬性的值；

再來，看請求后臺的方法：

//請求后臺
 function ajaxFun(option) {
 if (option) {
 $.extend(defOption, option);
 }
 //獲取分頁參數(shù)
 var hidPageSize = defOption.pageSize;
 var hidCurrentPage = defOption.currentPage;
 if ($("form input[name='pageSize']").val()) {
 hidPageSize = $("form input[name='pageSize']").val();
 }
 if ($("form input[name='currentPage']").val()) {
 hidCurrentPage = $("form input[name='currentPage']").val();
 }
 //合并用戶查詢條件和分頁參數(shù)條件
 var searchData = {
 pageSize: hidPageSize,
 currentPage: hidCurrentPage
 };
 $.extend(searchData, defOption.data);
 //請求后臺數(shù)據(jù)
 $.ajax({
 url: defOption.url,
 type: "get",
 data: searchData,
 dataType: "json",
 timeout: defOption.timeout,
 async: true,
 beforeSend: defOption.befFun,
 success: defOption.sucFun,
 });
 }

這個方法就是請求接口獲取數(shù)據(jù)的方法，里面默認獲取了頁面中的pageSize，currentPage兩個分頁所需要的參數(shù)，這里采用的是get方式來請求，當然可以寫成post，不過需要后臺支持post就行了；

我們再看查詢列表方法：

//查詢列表
 listFun: function (option) {
 if (option) {
 $.extend(defOption, option);
 }
 //默認格式
 var tab = [];
 tab.push('<table id="' + defOption.tabId + '" class="table table-bordered table-hover">');
 tab.push('<thead><tr role="row">');
 for (var i in defOption.headText) {
 var head = defOption.headText[i];
 if (head.colType == "label") {
 tab.push('<th class="center" tabindex="0" rowspan="1" colspan="1">' + head.nickName + '</th>');
 } else if (head.colType == "checkbox") {
 tab.push('<th class="center " rowspan="1" colspan="1" aria-label="">');
 tab.push(' <label class="pos-rel">');
 tab.push(' <input type="checkbox" name="cbAll" class="ace">');
 tab.push(' <span class="lbl">' + head.nickName + '</span>');
 tab.push(' </label>');
 tab.push('</th>');
 } else {
 tab.push('<th class="center" tabindex="0" rowspan="1" colspan="1">' + head.nickName + '</th>');
 }
 }
 tab.push('</tr></thead>');
 tab.push('<tbody><tr><td class="text-center" colspan="' + defOption.headText.length + '">' + defOption.loading + '</td></tr></tbody>');
 tab.push('</table>');
 tab.push('<div id="divPager" class="text-center"></div>');
 $("#" + defOption.showId).html(tab.join(''));
 //全選事件
 $("input[type='checkbox'][name='cbAll']").on("click", function () {
 var cbStatus = $(this).is(":checked");
 if (cbStatus) {
 $("input[name='cb']:checkbox").prop("checked", true);
 } else {
 $("input[name='cb']:checkbox").prop("checked", false);
 }
 });
 //數(shù)據(jù)返回成功處理
 defOption.sucFun = function (data) {
 var head = $("table[id='" + defOption.tabId + "'] tbody");
 if (data) {
 if (data.MoResult) {
 //遍歷table展示的數(shù)據(jù)
 var rows = [];
 $.each(data.MoResult, function (i, item) {
 rows.push('<tr>');
 var modalHeadText = "";
 for (var h_i in defOption.headText) {
 var head = defOption.headText[h_i];
 var item_val = item[head.name];
 if (item_val && typeof (item_val) != "undefined") { } else { item_val = ""; }
 //時間格式化
 if (head.format && item_val.length > 0) {
 console.log(item_val);
 var date = new Date(parseInt(item_val.replace("/Date(", "").replace(")/", ""), 10));
 item_val = head.format.
 replace("yyyy", date.getFullYear()).
 replace("MM", date.getMonth() + 1).
 replace("dd", date.getDate()).
 replace("HH", date.getHours()).
 replace("mm", date.getMinutes()).
 replace("ss", date.getMilliseconds());
 }
 //獲取模式窗體頭部信息
 if (modalHeadText.length <= 0) { modalHeadText = head.isModalHeadText ? item_val : "" };
 if (head.colType == "label") {
 rows.push('<td class="center">' + item_val + '</td>');
 } else if (head.colType == "checkbox") {
 rows.push('<td class="center">');
 rows.push(' <label class="pos-rel">');
 rows.push(' <input type="checkbox" name="cb" value="' + item_val + '" class="ace">');
 rows.push(' <span class="lbl"></span>');
 rows.push(' </label>');
 rows.push('</td>');
 } else if (head.colType == "operate") {
 rows.push('<td class="center"><div class="hidden-sm hidden-xs action-buttons">');
 if (defOption.editeOption.url.length > 0) {
 var editOption = $.extend({}, defOption.editeOption);
 editOption.url += "/" + item_val;
 editOption.title += modalHeadText.length > 0 ? "-" + modalHeadText : "";
 var op = JSON.stringify(editOption);
 rows.push('<a class="blue" data-item=\'' + op + '\' href="javascript:;"><i class="ace-icon fa fa-pencil bigger-130"></i></a>');
 }
 if (defOption.viewOption.url.length > 0) {
 var viewOption = $.extend({}, defOption.viewOption);
 viewOption.url += "/" + item_val;
 viewOption.title += modalHeadText.length > 0 ? "-" + modalHeadText : "";
 var op = JSON.stringify(viewOption);
 rows.push('<a class="blue" data-item=\'' + op + '\' href="javascript:;"><i class="ace-icon fa fa-search-plus bigger-130"></i></a>');
 }
 if (defOption.delOption.url.length > 0) {
 var delOption = $.extend({}, defOption.delOption);
 delOption.url += "/" + item_val;
 delOption.title += modalHeadText.length > 0 ? "-" + modalHeadText : "";
 var op = JSON.stringify(delOption);
 rows.push('<a class="blue" data-item=\'' + op + '\' href="javascript:;"><i class="ace-icon fa fa-trash-o bigger-130"></i></a>');
 }
 rows.push('</div></td>');
 }
 else {
 rows.push('<td class="center">' + item_val + '</td>');
 }
 }
 rows.push('</tr>');
 });
 //頁數(shù)展示
 if (data.MoResult.length > 0) {
 var pager = [];
 pager.push('<div class="text-center">');
 pager.push(' <ul class="pagination" style="margin-top:0px">');
 var nPager = defOption.showPageTab;//每次展示6個分頁
 //上一頁
 var nprev = (data.CurrentPage - 1 >= 1 ? data.CurrentPage - 1 : 1);
 pager.push(' <li class="paginate_button previous" aria-controls="dynamic-table" tabindex="0" id="dynamic-table_previous">');
 pager.push(' <a href="javascript:;" name="npager" data-page="' + nprev + '">上一頁</a>');
 pager.push(' </li>');
 //當前頁之前頁碼
 var preTotal = data.CurrentPage - nPager >= 1 ? data.CurrentPage - nPager : 1;
 for (var i = preTotal; i < data.CurrentPage ; i++) {
 pager.push(' <li class="paginate_button ' + (i == data.CurrentPage ? "active disabled" : "") + '" aria-controls="dynamic-table">');
 pager.push(' <a href="javascript:;" name="npager" data-page="' + i + '">' + i + '</a>');
 pager.push(' </li>');
 }
 //當前頁
 pager.push(' <li class="paginate_button active disabled" aria-controls="dynamic-table">');
 pager.push(' <a href="javascript:;" name="npager" data-page="' + data.CurrentPage + '">' + data.CurrentPage + '</a>');
 pager.push(' </li>');
 //當前頁以后頁碼
 var nextTotal = data.CurrentPage + nPager > data.PageTotal ? data.PageTotal : data.CurrentPage + nPager;
 for (var i = data.CurrentPage + 1; i <= nextTotal; i++) {
 pager.push(' <li class="paginate_button ' + (i == data.CurrentPage ? "active disabled" : "") + '" aria-controls="dynamic-table">');
 pager.push(' <a href="javascript:;" name="npager" data-page="' + i + '">' + i + '</a>');
 pager.push(' </li>');
 }
 //下一頁
 var nnext = (data.PageTotal < data.CurrentPage + 1 ? data.PageTotal : data.CurrentPage + 1);
 pager.push(' <li class="paginate_button next" aria-controls="dynamic-table" tabindex="0" id="dynamic-table_next">');
 pager.push(' <a href="javascript:;" name="npager" data-page="' + nnext + '">下一頁</a>');
 pager.push(' </li>');
 pager.push(' </ul>');
 //分頁查詢條件
 pager.push('<div style="display:none">');
 pager.push(' <form>');
 pager.push(' <input type="hidden" name="pageSize" value="' + defOption.pageSize + '"/>');
 pager.push(' <input type="hidden" name="currentPage" value="' + defOption.currentPage + '"/>');
 pager.push(' </form>');
 pager.push('</div>');
 pager.push('</div>');
 //移除加載中
 //head.html("");
 //添加結(jié)果
 head.html(rows.join(''));
 $("div[id='divPager']").html(pager.join(''));
 //操作按鈕事件
 $("a[data-item]").on("click", function () {
 var data_Item = $(this).attr("data-item");
 if (data_Item) {
 var data_Item_Obj = JSON.parse(data_Item);
 defOption.modalExt.modalFun({
 width: data_Item_Obj.width,
 height: data_Item_Obj.height,
 url: data_Item_Obj.url,
 title: data_Item_Obj.title,
 callback: defOption.callback
 });
 }
 });
 //綁定分頁按鈕事件
 $("a[name='npager']").on("click", function () {
 var nPager = $(this).attr("data-page");
 if (nPager.length <= 0) { return; }
 $("form input[name='currentPage']").val(nPager);
 //執(zhí)行請求后臺
 ajaxFun(defOption);
 });
 } else {
 head.html("<tr><td class=\"text-center\" colspan=\"" + defOption.headText.length + "\">未能查詢到數(shù)據(jù)！</td></tr>");
 $("div[id='divPager']").html("");
 }
 } else {
 head.html("<tr><td class=\"text-center\" colspan=\"" + defOption.headText.length + "\">未能查詢到數(shù)據(jù)。</td></tr>");
 $("div[id='divPager']").html("");
 }
 } else {
 head.html("<tr><td class=\"text-center\" colspan=\"" + defOption.headText.length + "\">未能查詢到數(shù)據(jù)</td></tr>");
 $("div[id='divPager']").html("");
 }
 };
 if (option) {
 $.extend(defOption, option);
 }
 //執(zhí)行請求后臺
 ajaxFun(defOption);
 }

這個方法體挺長的，主要操作是：

默認格式展示列表頭部并呈現(xiàn)出加載中的提示=》綁定復選框全選事件=》創(chuàng)建數(shù)據(jù)返回成功函數(shù)sucFun()=》調(diào)用請求后臺方法ajaxFun()；

再來看函數(shù)sucFun()等到數(shù)據(jù)返回后執(zhí)行的操作是：

遍歷json返回數(shù)據(jù)展示到table中(其中包括了時間格式化的處理，復選框，label及操作按鈕類型operate的初始化)=》頁數(shù)展示及事件綁定(目前只有上一頁，當前頁之前頁碼，當前頁，當前頁以后頁碼，下一頁的效果展示，分頁查詢條件(生成pagesize和currentPage隱藏控件)，綁定分頁按鈕事件)

以上就是shenniu.pager.js整個插件內(nèi)容，不多且清晰，感覺分享給大家挺高興，下面貼出示例中用到的js文件和css文件可以在這里下載：http://xiazai.jb51.net/201612/yuanma/shenniu.pager_jb51.rar

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: