MVC+Ajax+js分页
效果:
学习了一下:layui.laypage 分页组件 )^..^(
上代码(js)(Pagination方法)分页
1 function Pagination(sPageCount, sCurrentPage, sPageSize, sTotalRecord 2 , divdom) { 3 var view = [], dict = {}; 4 var pages = sPageCount | 0; 5 var curr = (sCurrentPage | 0) || 1; 6 var groups = 5;//显示5个 7 var first = '首'; 8 var last = '末'; 9 var prev = '<'; 10 var next = '>'; 11 var sTotalRecord = sTotalRecord; 12 13 14 //清空控件 15 $(divdom).empty(); 16 17 18 if (sTotalRecord == 0) { 19 return ''; 20 } 21 22 23 if (pages <= 1) { 24 view.push('<p>共<span class="total-num">' + sTotalRecord + '</span>条记录'); 25 $(divdom).html(view.join('')); 26 return ''; 27 } 28 29 30 if (groups > pages) { 31 groups = pages; 32 } 33 34 35 //计算当前组 36 dict.index = Math.ceil((curr + ((groups > 1 && groups !== pages) ? 1 : 0)) / (groups === 0 ? 1 : groups)); 37 38 39 40 41 //当前页非首页,则输出上一页 42 if (curr > 1 && prev) { 43 view.push('<a href="javascript:" class="page-num" data-page="' + (curr - 1) + '">' + prev + '</a>'); 44 } 45 46 47 //当前组非首组,则输出首页 48 if (dict.index > 1 && first && groups !== 0) { 49 view.push('<a href="javascript:" class="page-num" data-page="1" title="首">' + first + '</a><span>…</span>'); 50 } 51 52 53 //输出当前页组 54 dict.poor = Math.floor((groups - 1) / 2); 55 dict.start = dict.index > 1 ? curr - dict.poor : 1; 56 dict.end = dict.index > 1 ? (function () { 57 var max = curr + (groups - dict.poor - 1); 58 return max > pages ? pages : max; 59 }()) : groups; 60 if (dict.end - dict.start < groups - 1) { //最后一组状态 61 dict.start = dict.end - groups + 1; 62 } 63 for (; dict.start <= dict.end; dict.start++) { 64 if (dict.start === curr) { 65 view.push('<a href="javascript:;" class="page-num current" data-page="' + dict.start + '">' + dict.start + '</a>'); 66 view.push('<p>共<span class="total-num">' + sTotalRecord + '</span>条记录,<span class="current-page">' + dict.start + '</span>/<span class="total-page">' + sPageCount + '</span>页</p>'); 67 68 69 } else { 70 view.push('<a href="javascript:;" class="page-num" data-page="' + dict.start + '">' + dict.start + '</a>'); 71 } 72 } 73 74 75 //总页数大于连续分页数,且当前组最大页小于总页,输出尾页 76 if (pages > groups && dict.end < pages && last && groups !== 0) { 77 view.push('<span>…</span><a href="javascript:" class="page-num" data-page="' + pages + '" title="末"><span>' + last + '</span></a>'); 78 } 79 80 //当前页不为尾页时,输出下一页 81 dict.flow = !prev && groups === 0; 82 if (curr !== pages && next || dict.flow) { 83 view.push((function () { 84 return (dict.flow && curr === pages) 85 ? '<a href="javascript:" class="page-num" title="已没有更多">' + next + '</a>' 86 : '<a href="javascript:;" class="page-num" data-page="' + (curr + 1) + '">' + next + '</a>'; 87 }())); 88 } 89 90 view.push('<span class="pl2">到第</span><input type="number" min="1" id="PageVal" onkeyup="this.value=this.value.replace(/\\D/, \'\');" value="' + curr + '"><span>页</span> <input type="button" id="page" value="前往" class="go-page"></input>'); 91 92 93 94 ////添加事件 95 $(divdom).html(view.join('')); 96 97 98 $(divdom).find("a").on("click", function () { 99 var that = this.outerHTML; 100 var curr = $(that).attr("data-page"); //修改(上下首末页) 101 102 initGrid(curr, QueryObj.L_SType); 103 $("#test").val(curr);// = curr; //可以不要了 104 return curr; 105 }); 106 $(divdom).find("input:eq(1)").on("click", function () { 107 // var that = $(divdom).find("a:last").attr("data-page"); 108 var curr = $(divdom).find("input")[0].value.replace(/\s|\D/g, '') | 0; 109 if (curr == 0 || curr == "") { 110 curr = 1; 111 } if (curr > sPageCount) { 112 curr = sPageCount; 113 } 114 initGrid(curr, QueryObj.L_SType) 115 return ; 116 }); 117 };
(js)(InitGrid方法)初始化
var curr=1; //初始化的全局变量,反正后面调用又用不着
function initGrid(curr) { // DisplayType = -1; $.ajax({ url: "/Home/LoadPageList", data: { page: curr, size: 10}, type: "POST", dataType: "json", beforeSend: function () { $(".file-lists").html("<div style='width:120px;margin: 30px auto;'><img src='/Images/loading.gif' width='30px' height='30px' align='absmiddle' /> 加载中...</div>"); }, ContentType: "application/json;charset=utf-8", success: function (responseList) { if (!responseList) { return; } switch (responseList.ErrorType)//标记 { case 0://错误 alert(responseList.MessageContent); return; case 1://返回正确数据 break; } (htmlbind(responseList);)//这个方法,自己爱怎么绑定就怎么绑定 return; }, error: function (xmlHttpRequest, textStatus, errorThrown) { MISSY.iDebugAjaxError(xmlHttpRequest, textStatus, errorThrown); $(".file-lists").html("数据加载失败,请稍后再试!"); } }); };
最后在把后台代码暴一下大概把,
1 public JsonResult LoadPageList() 2 { 3 var sReturnModel = new ReturnListModel(); 4 14 #region 分页参数 15 int page = RequestParameters.Pint("page"); 16 int size = RequestParameters.Pint("size"); 17 if (page < 1 || size < 1) 18 { 19 sReturnModel.ErrorType = 0; 20 sReturnModel.MessageContent = "参数错误."; 21 return Json(sReturnModel); 22 } #endregion 135 #region 排序参数 136 var orderList = new List<OrderCondition>(); 137 var orderCondition = new OrderCondition(); 138 orderCondition.Ascending = false; 139 orderCondition.FiledOrder = "CreateTime"; 140 orderList.Add(orderCondition); 141 condition.OrderList = orderList; 142 #endregion 143 #endregion 144 int iTotalRecord = 0, iPageIndex = page - 1, iPageSize = size; 145 var cBll = new BLL_File();147 var list = cBll.GetPageListByCondition(iPageIndex, iPageSize, ref iTotalRecord, condition); 148 iPageSize = iPageSize == 0 ? iTotalRecord : iPageSize; 149 int pageCount = iTotalRecord % iPageSize == 0 ? iTotalRecord / iPageSize : iTotalRecord / iPageSize + 1; 150 151 sReturnModel.ErrorType = 1; 152 sReturnModel.CurrentPage = page; 153 sReturnModel.PageSize = iPageSize; 154 sReturnModel.TotalRecord = iTotalRecord; 155 sReturnModel.PageCount = pageCount; 156 if (list != null) 157 sReturnModel.Data = list;168 return Json(sReturnModel); 169 }
好吧,我觉得
GetPageListByCondition这个方法也要上传一下把
public IList<td_File> GetPageListByCondition(int iPageIndex, int iPageSize, ref int iTotalRecord, ConditionModel conditionItem) { //var service = new DbHelperEfSql<v_File>(); return dbContext.SearchByPageCondition(iPageIndex, iPageSize, ref iTotalRecord, conditionItem); }
这些都是有封装了的啊(意思大家知道就好了,实体框架大概就这样把,我也不是很懂。。。。。)*lol。。。。。)
public IList<T> SearchByPageCondition(int iPageIndex, int iPageSize, ref int iTotalRecord, ConditionModel conditionItem) { try { var query = SearchAction(conditionItem); if (query == null) return null; iTotalRecord = query.Count(); return query.Skip(iPageIndex * iPageSize).Take(iPageSize).ToList(); } catch (Exception ex) { MessageLog.AddErrorLogDbEfSql(typeof(T).ToString(), ex.Message); return null; } }