自己写的一个用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多表联合查询分页功能实现