綜合實例：
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()是自定義好的手機端分頁請求數據函數，可根據項目替換。