js实现加载更多、下拉刷新更多分页请求功能方法1.0
综合实例：
1 ;(function (w, $) { 2 3 var loadmore = { 4 /*单页加载更多 通用方法 5 * 6 * @param callback 回调方法 7 * @param config 自定义参数 8 * @param success 自定义ajax成功时处理函数 9 * */ 10 get: function (callback, config, success) { 11 var config = config ? config : {}; 12 /*防止未传参数报错*/ 13 14 var counter = 0; 15 /*计数器*/ 16 var pageStart = 0; 17 /*每页个数，默认10*/ 18 var pageSize = config.size ? config.size : 10; 19 /*滚动至距底端指定距离内加载，默认100px*/ 20 var limitH = config.limitH ? config.limitH : 100; 21 var btnID = config.btnID ? config.btnID : 'btn-load-more'; 22 var divID = config.divID ? config.divID : 'div-load-more'; 23 24 /*通过点击加载更多*/ 25 if (config.scroll) { 26 $(document).on('click', '#' + btnID, function () { 27 counter++; 28 pageStart = counter * pageSize; 29 callback && callback(config, pageStart, pageSize, counter, success); 30 }); 31 } 32 33 /*通过自动监听滚动事件加载更多,可选支持*/ 34 config.isEnd = false; 35 /*结束标志*/ 36 config.isAjax = false; 37 /*防止滚动过快，服务端没来得及响应造成多次请求*/ 38 $(window).scroll(function () { 39 /*是否开启滚动加载*/ 40 if (!config.scroll) { 41 return; 42 } 43 44 /*滚动加载时如果已经没有更多的数据了、正在发生请求时，不能继续进行*/ 45 if (config.isEnd == true || config.isAjax == true) { 46 return; 47 } 48 49 /*当滚动到最底部以上指定像素时， 加载新内容*/ 50 if ($(document).height() - $(this).scrollTop() - $(this).height() < limitH) { 51 counter++; 52 pageStart = counter * pageSize; 53 callback && callback(config, pageStart, pageSize, counter, success); 54 } 55 }); 56 57 /*第一次自动加载*/ 58 callback && callback(config, pageStart, pageSize, counter, success); 59 } 60 }; 61 $.loadmore = loadmore; 62 })(window, window.jQuery); 63 64 function getData(config, offset, size, counter, success) { 65 config.isAjax = true; 66 common.phonePaging(config.url, config.size, counter, config.desc, config.code, function (reponse) { 67 var sum = reponse.total; 68 69 /************业务逻辑块：实现拼接html内容并append到页面*****************/ 70 if (sum - offset < size) { 71 size = sum - offset; 72 } 73 success && success(reponse.rows); 74 /*******************************************/ 75 76 /*隐藏more*/ 77 if ((offset + size) >= sum) { 78 config.isEnd = true; 79 /*停止滚动加载请求*/ 80 //提示没有了 81 $('#' + config.btnID).text('已经到底了'); 82 } else { 83 $('#' + config.btnID).show(); 84 } 85 86 config.isAjax = false; 87 }); 88 89 }
调用：
1 $.loadmore.get(getData, { 2 click: false, //默认是true，是否支持点击加载更多 3 scroll: true, //默认是false，是否支持滚动加载 4 size: 8, //每页显示个数，默认是10 5 url: '??', //数据url，不能为空 6 code: {'??':'??'}, //url参数 7 desc: 'time', //结果集排序字段，不能为空 8 divID: 'panel-div',//内容承载div id，默认为div-load-more 9 // btnID: '',//加载更多按钮id，默认为btn-load-more 10 limitH: 25//加载条件，滚动条距离页面底端距离，默认为100 11 }, SucceedFun); 12 13 function SucceedFun(data) { 14 if (!isNull(data)) { 15 var contents = { 16 "data": data, 17 statusRander: function () { 18 if (this.accept_status == '0') { 19 return '<a class=\'btn-danger btn-sm pull-right\' >未受理</a>'; 20 } else { 21 return '<a class=\'btn btn-success btn-sm pull-right\' data-toggle="modal" data-target="#myModal2" onclick=\'ssaRdingdanQuery(' + this.num + ');\'>详 细</a>'; 22 } 23 } 24 }; 25 $wrap.append(Mustache.to_html(tpl, contents)); 26 } 27 }
其中Mustache.to_html()引用自mustache.js，该js的功能为直接解析json数据至指定格式的html模板中。
lodemore.get()方法的succeedFun入口参数为ajax请求成功后的自定义数据处理函数，可以适用于不同的页面，灵活自定义分页数据处理。
本实例工程中后台采用Java语言，common.phonePaging()是自定义好的手机端分页请求数据函数，可根据项目替换。
