自己寫的一個用jQuery異步功能實現的分頁查詢

本文轉載自查看原文 2017-03-14 20:23 2957

先上一張圖片觀摩觀摩，圖片中首頁、尾頁、上一頁、下一頁都是使用的圖片代替的文字描述，所以看起來還不錯的樣子。

html標簽部分

firstPage、prePage、nextPage、lastPage 這幾個標簽可以用背景圖片，我給的代碼里就是這么用的，如果不用背景圖片的可以自行刪掉背景圖片樣式，改用文字，放在div標簽的text內容中。

 1         <!-- 分頁設置 -->
 2         <div id="pagination" style="color: black;text-align: center;height: 43px;width: 782px;line-height: 41px;padding: 41px 0px;">
 3             <div id="firstPage"style="padding: 0px;border: 1px solid #DDDDDD;border-radius:5px;margin: 0px 10px;width: 45px;height: 41px;display: inline-block;background-image: url(/images/tcargo/page_tol.jpg);">&nbsp;</div>
 4             <div id="prePage"  style="padding: 0px;border: 1px solid #DDDDDD;border-radius:5px;margin: 0px 10px;width: 45px;height: 41px;display: inline-block;background-image: url(/images/tcargo/page_pre.jpg);">&nbsp;</div>
 5             <div id="page1"    style="padding: 0px;border: 1px solid #DDDDDD;border-radius:5px;margin: 0px 10px;width: 45px;height: 41px;display: inline-block;">1</div>
 6             <div id="page2"    style="padding: 0px;border: 1px solid #DDDDDD;border-radius:5px;margin: 0px 10px;width: 45px;height: 41px;display: inline-block;">2</div>
 7             <div id="page3"    style="padding: 0px;border: 1px solid #DDDDDD;border-radius:5px;margin: 0px 10px;width: 45px;height: 41px;display: inline-block;">3</div>
 8             <div id="page4"    style="padding: 0px;border: 1px solid #DDDDDD;border-radius:5px;margin: 0px 10px;width: 45px;height: 41px;display: inline-block;">4</div>
 9             <div id="page5"    style="padding: 0px;border: 1px solid #DDDDDD;border-radius:5px;margin: 0px 10px;width: 45px;height: 41px;display: inline-block;">5</div>
10             <div id="none"     style="padding: 0px;border: 1px solid #DDDDDD;border-radius:5px;margin: 0px 10px;width: 45px;height: 41px;display: inline-block;">...</div>
11             <div id="nextPage" style="padding: 0px;border: 1px solid #DDDDDD;border-radius:5px;margin: 0px 10px;width: 45px;height: 41px;display: inline-block;background-image: url(/images/tcargo/page_nex.png);">&nbsp;</div>
12             <div id="lastPage" style="padding: 0px;border: 1px solid #DDDDDD;border-radius:5px;margin: 0px 10px;width: 45px;height: 41px;display: inline-block;background-image: url(/images/tcargo/page_tor.png);">&nbsp;</div>
13         </div>

js代碼部分

  1 /****************************分頁代碼(包含頁面的pagination容器)****************************/
  2 /*分頁配置項*/
  3 var paginationDefaults = {
  4         /*初始化當前頁碼值*/
  5         currPageNum:1,
  6         /*初始化每頁顯示的頁碼數*/
  7         showPageNums:5,
  8         /*初始化分頁顯示數*/
  9         pageShowSize:15,
 10         /*頁池總記錄數量*/
 11         pageTotalSize:0,
 12         /*是否分頁提交的數據*/
 13         bePaginationCommit:false,
 14         /*是否初始化激活頁碼*/
 15         beInitActivePageNum:false,
 16         /*回調數據處理函數*/
 17         handlePageTotalSizeDataFn:initOrdersItemShow,
 18         
 19         /*回調函數模糊查詢值*/
 20         fuzzySearchParams:""
 21     };
 22 
 23 /**分頁加載數據**/
 24 var paginationLoadingData = function(options){
 25     /*加載變量*/
 26     paginationDefaults = $.extend({}, paginationDefaults, options);
 27     var _currPageNum = paginationDefaults.currPageNum;
 28     var _showPageNums = paginationDefaults.showPageNums;
 29     var _pageShowSize = paginationDefaults.pageShowSize;
 30     var _pageTotalSize = paginationDefaults.pageTotalSize;
 31     var _handlePageTotalSizeDataFn = paginationDefaults.handlePageTotalSizeDataFn;
 32     var _bePaginationCommit = paginationDefaults.bePaginationCommit;
 33     var _beInitActivePageNum = paginationDefaults.beInitActivePageNum;
 34     
 35     if (_bePaginationCommit && typeof _handlePageTotalSizeDataFn === 'function') {
 36         /*調用列表處理回調函數*/
 37         _handlePageTotalSizeDataFn(paginationDefaults);
 38         /*注意切換值,避免陷入死循環(在回調函數中重新調用分頁功能時如果忘記切換值,此處可以攔截;如果回調時切換的值依然是true,則徹底死循環,暫時不處理此類情況,后續修復此bug)*/
 39         if (paginationDefaults.bePaginationCommit) {
 40             paginationDefaults.bePaginationCommit = false;
 41         }
 42         /*進入回調函數后,會重新獲取頁池總記錄數,並重新調用分頁方法,所以直接返回*/
 43         return false;
 44     }
 45     
 46     /*空值處理*/
 47     _pageTotalSize = _pageTotalSize == null || _pageTotalSize == undefined ? 0 : _pageTotalSize;
 48     /*沒有數據則返回*/
 49     if (_pageTotalSize == 0) {
 50         $("#pagination").find("div").hide();
 51     }else {
 52         $("#pagination").find("div").show();
 53     }
 54     
 55     /*計算總頁碼數*/
 56     var totalPageNums = Math.ceil(_pageTotalSize/_pageShowSize);
 57     /*計算總頁碼組數*/
 58     var totalPageNumsGroup = Math.ceil(totalPageNums/_showPageNums);
 59     /*計算當前頁碼所在組數*/
 60     var currPageNumsGroup = Math.ceil(_currPageNum/_showPageNums);
 61     /*頁碼集合*/
 62     var pageNumDivs = $("#pagination").find("[id^=page]");
 63     
 64     /*計算並重新排列頁碼*/
 65     if (currPageNumsGroup == 1) {
 66         /*第一組|判斷總組數是否大於1,為否則簡化顯示頁碼數,為真則滿頁碼數顯示*/
 67         if (totalPageNumsGroup > 1) {
 68             /*先顯示頁碼*/
 69             pageNumDivs.show();
 70             for (var i = 1; i <= _showPageNums; i++) {
 71                 $("#pagination").find("#page"+i).text(i);
 72             }
 73             $("#pagination").find("#none").show();
 74         }else {
 75             /*先隱藏頁碼*/
 76             pageNumDivs.hide();
 77             for (var i = 1; i <= totalPageNums; i++) {
 78                 $("#pagination").find("#page"+i).text(i).show();;
 79             }
 80             $("#pagination").find("#none").hide();
 81         }
 82     }else if (currPageNumsGroup == totalPageNumsGroup) {
 83         /*最后一組*/
 84         var lastGroupPageNums = totalPageNums%_showPageNums;
 85         var lastGroupFirstNum = (totalPageNumsGroup - 1) * _showPageNums;
 86         /*先隱藏頁碼*/
 87         pageNumDivs.hide();
 88         for (var i = 1; i <= lastGroupPageNums; i++) {
 89             $("#pagination").find("#page"+i).text(lastGroupFirstNum + i).show();
 90         }
 91         $("#pagination").find("#none").hide();
 92     }else {
 93         /*在中間組*/
 94         var currGroupFirstNum = (currPageNumsGroup - 1) * _showPageNums;
 95         /*先顯示頁碼*/
 96         pageNumDivs.show();
 97         for (var i = 1; i <= _showPageNums; i++) {
 98             $("#pagination").find("#page"+i).text(currGroupFirstNum + i);
 99         }
100         $("#pagination").find("#none").show();
101     }
102     
103     /*處理激活頁碼紊亂的情況(包含沒有激活頁碼,多個激活頁碼)*/
104     var currActivePageDivs = $("#pagination").find("[activePage='true']");
105     if (currActivePageDivs.length == 0) {
106         var tmpPageNum = _currPageNum%_showPageNums;
107         $("#pagination").find("#page"+(tmpPageNum == 0 ? _showPageNums : tmpPageNum)).attr("activePage",true).css({"background-color":"#C0C0C0","cursor":"pointer"});
108     }else if (currActivePageDivs.length > 1) {
109         currActivePageDivs.each(function(index,elm){
110             $(this).attr("activePage",false).css({"background-color":"","cursor":""});
111         });
112         $("#pagination").find("#page"+(tmpPageNum == 0 ? _showPageNums : tmpPageNum)).attr("activePage",true).css({"background-color":"#C0C0C0","cursor":"pointer"});
113     }
114     
115     /*還原激活頁碼為第一頁*/
116     if (_beInitActivePageNum) {
117         currActivePageDivs.attr("activePage",false).css({"background-color":"","cursor":""});
118         $("#pagination").find("#page1").attr("activePage",true).css({"background-color":"#C0C0C0","cursor":"pointer"});
119         paginationDefaults.beInitActivePageNum = false;
120     }
121     
122     /*綁定頁碼單擊處理事件和Hover事件*/
123     paginationButtonBindEvent();
124 }
125 
126 /*分頁容器相關事件綁定*/
127 var paginationButtonBindEvent = function(){
128     /*分頁按鈕樣式變換事件*/
129     $("#pagination").find("div").hover(function(inEvn){
130         $(this).css({"background-color":"#C0C0C0","cursor":"pointer"});
131     },function(outEvn){
132         if ($(this).attr("activePage") != "true") {
133             $(this).css({"background-color":"","cursor":""});
134         }
135     });
136     
137     /*分頁按鈕單擊事件處理方法*/
138     $("#pagination").find("div:visible").off("click").off("click").on("click",function(evn){
139         
140         /*加載變量*/
141         var _currPageNum = paginationDefaults.currPageNum;
142         var _showPageNums = paginationDefaults.showPageNums;
143         var _pageShowSize = paginationDefaults.pageShowSize;
144         var _pageTotalSize = paginationDefaults.pageTotalSize;
145         
146         /*layer.msg("this is test ["+this.innerHTML+"]");*/
147         
148         /*加載活動頁*/
149         var currActivePageDiv = $("#pagination").find("[activePage='true']");
150         /*計算總頁碼數*/
151         var totalPageNums = Math.ceil(_pageTotalSize/_pageShowSize);
152         /*計算總頁碼組數*/
153         var totalPageNumsGroup = Math.ceil(totalPageNums/_showPageNums);
154         /*計算當前頁碼所在組數*/
155         var currPageNumsGroup = Math.ceil(_currPageNum/_showPageNums);
156         
157         /*頁碼計算和調用*/
158         /*firstPage;prePage;1;2;3;4;5;none;nextPage;lastPage*/
159         if (this.id == "firstPage") {
160             paginationLoadingData({currPageNum:1,bePaginationCommit:true});
161             if (currActivePageDiv.attr("id") != "page1") {
162                 $("#pagination").find("#page1").attr("activePage",true).css({"background-color":"#C0C0C0","cursor":"pointer"});
163                 currActivePageDiv.attr("activePage",false).css({"background-color":"","cursor":""});
164             }
165         }else if (this.id == "prePage") {
166             if (_currPageNum - 1 < 1) {
167                 paginationLoadingData({currPageNum:1,bePaginationCommit:true});
168             }else {
169                 paginationLoadingData({currPageNum:(_currPageNum - 1),bePaginationCommit:true});
170                 var tmpPageNum = parseInt(currActivePageDiv.text())%_showPageNums;
171                 tmpPageNum = tmpPageNum == 0 ? _showPageNums : tmpPageNum;
172                 if (tmpPageNum == 1) {
173                     $("#pagination").find("#page"+tmpPageNum).attr("activePage",false).css({"background-color":"","cursor":""});
174                     $("#pagination").find("#page5").attr("activePage",true).css({"background-color":"#C0C0C0","cursor":"pointer"});
175                 }else {
176                     $("#pagination").find("#page"+tmpPageNum).attr("activePage",false).css({"background-color":"","cursor":""});
177                     $("#pagination").find("#page"+(tmpPageNum-1)).attr("activePage",true).css({"background-color":"#C0C0C0","cursor":"pointer"});
178                 }
179             }
180         }else if (this.id == "page1") {
181             if (currActivePageDiv.attr("id") != this.id) {
182                 $(this).attr("activePage",true);
183                 currActivePageDiv.attr("activePage",false).css({"background-color":"","cursor":""});
184             }
185             paginationLoadingData({currPageNum:parseInt($(this).text()),bePaginationCommit:true});
186         }else if (this.id == "page2") {
187             if (currActivePageDiv.attr("id") != this.id) {
188                 $(this).attr("activePage",true);
189                 currActivePageDiv.attr("activePage",false).css({"background-color":"","cursor":""});
190             }
191             paginationLoadingData({currPageNum:parseInt($(this).text()),bePaginationCommit:true});
192         }else if (this.id == "page3") {
193             if (currActivePageDiv.attr("id") != this.id) {
194                 $(this).attr("activePage",true);
195                 currActivePageDiv.attr("activePage",false).css({"background-color":"","cursor":""});
196             }
197             paginationLoadingData({currPageNum:parseInt($(this).text()),bePaginationCommit:true});
198         }else if (this.id == "page4") {
199             if (currActivePageDiv.attr("id") != this.id) {
200                 $(this).attr("activePage",true);
201                 currActivePageDiv.attr("activePage",false).css({"background-color":"","cursor":""});
202             }
203             paginationLoadingData({currPageNum:parseInt($(this).text()),bePaginationCommit:true});
204         }else if (this.id == "page5") {
205             if (currActivePageDiv.attr("id") != this.id) {
206                 $(this).attr("activePage",true);
207                 currActivePageDiv.attr("activePage",false).css({"background-color":"","cursor":""});
208             }
209             paginationLoadingData({currPageNum:parseInt($(this).text()),bePaginationCommit:true});
210         }else if (this.id == "nextPage") {
211             if (_currPageNum + 1 > totalPageNums) {
212                 paginationLoadingData({currPageNum:totalPageNums,bePaginationCommit:true});
213             }else {
214                 paginationLoadingData({currPageNum:(_currPageNum + 1),bePaginationCommit:true});
215                 var tmpPageNum = parseInt(currActivePageDiv.text())%_showPageNums;
216                 tmpPageNum = tmpPageNum == 0 ? _showPageNums : tmpPageNum;
217                 if (tmpPageNum == _showPageNums) {
218                     $("#pagination").find("#page"+tmpPageNum).attr("activePage",false).css({"background-color":"","cursor":""});
219                     $("#pagination").find("#page1").attr("activePage",true).css({"background-color":"#C0C0C0","cursor":"pointer"});
220                 }else {
221                     $("#pagination").find("#page"+tmpPageNum).attr("activePage",false).css({"background-color":"","cursor":""});
222                     $("#pagination").find("#page"+(tmpPageNum+1)).attr("activePage",true).css({"background-color":"#C0C0C0","cursor":"pointer"});
223                 }
224             }
225         }else if (this.id == "lastPage") {
226             paginationLoadingData({currPageNum:totalPageNums,bePaginationCommit:true});
227             var lastPageNum = totalPageNums%_showPageNums != totalPageNums%_showPageNums;
228             if (currActivePageDiv.attr("id") != "page"+lastPageNum) {
229                 $("#pagination").find("#page1").attr("activePage",true).css({"background-color":"#C0C0C0","cursor":"pointer"});
230                 currActivePageDiv.attr("activePage",false).css({"background-color":"","cursor":""});
231             }
232         }
233     });
234 }
235 /****************************分頁代碼****************************/

以上是代碼部分，下面講述一下使用。

在此之前，一直都是從事java開發，最近公司項目要求做個簡單的附屬項目，要做一些前端的東西，還好之前也偶爾接觸過一些js和jQuery。

由於沒用過分頁插件，也沒仔細研究過分頁插件的實現原理，所以自己第一次寫分頁查詢的時候，寫成了同步的，結果測試的時候發現數據互交是異步處理的，導致沒法獲得列表，更沒法進行分頁管理，感覺滿滿的都是失敗。

然經過研究，總算是想了個折中的辦法來處理異步數據分頁查詢，那就是通過回調函數來處理數據刷新，在回調函數發起的ajax異步回調處理函數中獲取響應的列表數據來部署分頁標簽和功能。

不多說了，上代碼(分頁代碼調用一)

1         /*調用分頁加載頁面數據*/
2         paginationLoadingData({
3             currPageNum:1,
4             showPageNums:5,
5             pageShowSize:15,
6             bePaginationCommit:true,
7             beInitActivePageNum:true,
8             handlePageTotalSizeDataFn:initOrdersItemShow,
9             fuzzySearchParams:fuzzySearchParams});

上述代碼表示分頁查詢調用(具體的參數含義可以查看js代碼部分中的分頁配置項)，此處調用的用處就是執行分頁查詢。

設置是否執行回調變量 bePaginationCommit:true ,也可以理解為是否提交數據更新分頁查詢。

設置回調函數變量 handlePageTotalSizeDataFn:initOrdersItemShow，注意：回調函數的參數需要跟分頁查詢的參數一致，也就是說都需要使用配置項對象變量，這樣傳參靈活方便。

上面提到了分頁查詢調用，並未講述如何回調分頁查詢，那么下面附上代碼(分頁代碼調用二)

1         /*回調處理頁面數據分頁*/
2         paginationLoadingData({bePaginationCommit:false,pageTotalSize:pageTotalSize});

上述【分頁代碼調用一】和【分頁代碼調用二】要合起來使用才能實現分頁查詢，【分頁代碼調用一】主要使用在進入頁面刷新數據時調用；【分頁代碼調用二】是在執行ajax異步回調函數里調用，這樣就會正常的按分頁管理頁面數據。

由於口才有限，可能描述的不是很清晰，如有疑問可以留言咨詢。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQuery 異步模糊查詢實現下拉搜索功能【jQuery 分頁】jQuery分頁功能的實現基於InfluxDB實現分頁查詢功能精通SpringBoot--分頁查詢功能的實現 jQuery+Ajax+PHP實現異步分頁數據顯示 java寫一個實現Postman功能 jPList – 實現靈活排序和分頁功能的 jQuery 插件 Jquery、Ajax實現新聞列表頁分頁功能 mysql分頁查詢語句怎么寫？ phpcmsv9多表聯合查詢分頁功能實現