前端写分页(用了自己同事写的插件)

记录一下

首先需要在页面上引用分页的js

  1 //分页插件
  2 $(function () {
  3     var pagingObj = $(".js_paging");
  4     var pagingEmptyObj = $(".js_pagingEmpty");//页面配置的数据没有情况下的显示（默认）  使用页面配置 例如：pagingEmpty:'.js_pagingEmpty' by cp 2016 1 14
  5     if (!pagingObj) {
  6         return;
  7     }
  8 
  9     $(document).ready(function(){
 10         $.paging.search();
 11     });
 12 
 13     //默认分页的配置
 14     var pagingConfig = {
 15         pageIndex: 1,
 16         pageSize: 10,
 17         url: "",
 18         data: {},
 19         appendTo: "",
 20         beforeSuccess: undefined,
 21         success: ajaxSuccess,
 22         isLockLoding: false //是否锁定加载，true为锁定，无数据或正在请求时锁定
 23     };
 24 
 25     //配置等于当前页面配置合并默认配置
 26     var _curConfig = $(pagingObj).attr("data-options");
 27     if (_curConfig) {
 28         _curConfig = eval("({" + _curConfig + "})");
 29         pagingConfig = $.extend({}, pagingConfig, _curConfig);
 30     }
 31 
 32     //window滚动到底部时触发
 33     $("body").on('touchmove', function (e) {
 34         if (!pagingConfig.isLockLoding) {
 35             //判断底部有无  在计算触发下拉刷新的位置
 36             if ($("footer").length) {
 37                 var lastScreen = parseInt($(window).scrollTop()) + parseInt($(window).innerHeight()) - 50 < pagingObj.position().top * 1 ? false : true;
 38             } else {
 39                 var lastScreen = parseInt($(window).scrollTop()) + parseInt($(window).innerHeight()) +3 < pagingObj.position().top * 1 ? false : true;
 40             }
 41             
 42             if (lastScreen && pagingConfig.isLockLoding == false) {//到达需要加载的位置，且并未锁定加载
 43                 ajaxLoading();
 44             }
 45         }
 46     });
 47 
 48     //拓展分页函数
 49     $.extend({
 50         paging: {
 51             search: function () {
 52                 pagingConfig.pageIndex = 1;
 53                 pagingConfig.isLockLoding = false;
 54                 ajaxLoading();
 55             },
 56             updateDataAndSearch: function (searchData) {
 57                 pagingConfig.pageIndex = 1;
 58                 pagingConfig.isLockLoding = false;
 59                 pagingConfig.data = $.extend(pagingConfig.data,searchData);
 60                 ajaxLoading();
 61             }
 62         }
 63     });
 64 
 65     //请求分页数据，成功后调用success方法
 66     function ajaxLoading() {
 67         if (!pagingConfig.isLockLoding) {
 68             pagingConfig.isLockLoding = true;
 69             $.ajax({
 70                 type: "post",
 71                 url: pagingConfig.url,
 72                 data: $.extend(pagingConfig.data, { pageIndex: pagingConfig.pageIndex, pageSize: pagingConfig.pageSize }),
 73                 dataType: "json",
 74                 beforeSend: function () {
 75                     pagingObj.text("加载中...")
 76                 },
 77                 error: function () {
 78                     //showWrong("加载失败，请重试");
 79                     pagingConfig.isLockLoding = false;
 80                     pagingObj.text("");
 81                 },
 82                 isShowLoad:false,
 83                 success: pagingConfig.success
 84             });
 85         }
 86     }
 87 
 88     //默认的ajaxSuccess方法，成功后会解析分页模板生成HTML
 89     function ajaxSuccess(data) {
 90         pagingConfig.isLockLoding = false;
 91         if (pagingConfig.pageIndex == 1) {
 92             $(pagingConfig.appendTo).empty();
 93         }
 94 
 95         //如果定义了beforeSuccess函数，且return false则不执行解析html
 96         if (pagingConfig.beforeSuccess) {
 97             if (pagingConfig.beforeSuccess(data.Body) == false) {
 98                 return;
 99             }
100         }
101         if (data.DictJsonStatus == 200) {      
102             datalist = data.Body.hasOwnProperty("DataList") ? data.Body.DataList : data.Body.List;
103             var templateHtml;
104             if (pagingConfig.template) {
105                 templateHtml = $(pagingConfig.template).html();
106             } else {
107                 templateHtml = pagingObj.next().html();
108             }
109             var regex = /(${+[^}]*[}]+)/g;
110             var result = templateHtml.match(regex);
111 
112             for (var j in datalist) {
113                 var model = datalist[j];
114                 var appendHtml = templateHtml.replace(regex, function (word) {
115                     return eval(word.substring(2, word.length - 1));
116                 });
117                 var r = $(pagingConfig.appendTo).append(appendHtml);
118             }
119             pagingConfig.pageIndex++;
120             if (data.Body.Total == 0) {//判断没有数据存在时的显示   by cp 2016 1 14
121                 pagingObj.hide();
122                 if (pagingConfig.pagingEmpty) {//pagingConfig.pagingEmpty 页面配置的数据没有情况下的显示  例如：".js_pagingEmpty"
123                     $(pagingConfig.pagingEmpty).show();
124                 } else {
125                     pagingEmptyObj.show();
126                 }
127             }
128             //如果得到的数据比每页数据量小，说明已经没有数据了
129             else if (datalist.length < pagingConfig.pageSize) {
130                 pagingObj.text("没有更多数据");
131                 pagingConfig.isLockLoding = true;
132             } 
133             else {
134                 pagingObj.text("请下拉加载数据");
135             }
136         } else {
137             //showWrong(rq.Msg);
138             pagingObj.text("");
139         }
140     }
141 
142 });
143 //搜索后得到的数据 显示提示信息 与条数
144 function showTipsTotal(data) {
145     var total = data.Total;
146     $(".js_num").html(total)
147 }

分页插件的js代码

模板：

 <div class="js_list">
                    
  </div>
   <!-- 分页控制 -->
   <!-- js_paging 分页插件里的元素  data-options 打开的url   appendTo 放到哪个地方去   -->
   <div class="commloadList js_paging" data-options="url:'/OACustomer/SearchCustomer',appendTo:'.js_list',data:searchData"></div>
    <!--这个隐藏的div就放下面-->
    <div style="display: none"> 　　
　　  <!--模板   需要显示的重复的分页内容--> 
      <div class="item-list  poabo js_openPage" data-url="/OACustomer/CustomerDetail?Id=${model.Id}">
          ${formateOperate(model)}  <!-- ${model.Id} 后台给的绑定数据源 也可以直接放${自定义的一个方法(model)} -->
          <img class="open" src="../../images/v1/open.png" alt="" />
      </div>
    </div>