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="&#x9996;">' + first + '</a><span>&#x2026;</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>&#x2026;</span><a href="javascript:" class="page-num" data-page="' + pages + '" title="&#x672B;"><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="&#x5DF2;&#x6CA1;&#x6709;&#x66F4;&#x591A;">' + 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;
            }
        }

  

 

posted @ 2017-07-14 17:36  坑吭好学  阅读(169)  评论(0编辑  收藏  举报