写了一个可以到处适用的bootstarp样式的分页控件

超、凢脫俗 2022-03-06 13:16 198阅读 0赞

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;"> &nbsp;先上效果图：<img alt="图片" src="http://r.photo.store.qq.com/psb?/V10vaDk53S5FPD/urpYqViMAt89QyEQebAVIOvQaiPeIaYo1fAfOjQxFys!/o/dJNiIW2gAwAA&amp;ek=1&amp;kp=1&amp;pt=0&amp;bo=sgOAAv8DtAIDAFw!&amp;tl=1&amp;su=089052161&amp;tm=1552957200&amp;sce=0-12-12&amp;rf=2-9"> &nbsp;并且可以在同一个页面使用两个分页控件去发起不同的请求； &nbsp;代码如下，以供大家共同学习： (function($) { var SplitPageDiv = function(ele, opt) { this.$element = ele, &nbsp; &nbsp;this.defaults = { url : '', data : {}, onLoadSuccess : $.noop, rows : 10, total : 0 &nbsp; &nbsp;}, &nbsp; &nbsp;this.options = $.extend({}, this.defaults, opt), &nbsp; &nbsp;this.options.data.rows = this.options.rows, &nbsp; &nbsp;this.options.current = this.options.current || 1, &nbsp; &nbsp;this.options.data.page = this.options.current }; &nbsp; SplitPageDiv.prototype = { initGrid : function() { var __this = this; var ajax = null; if(ajax) { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;ajax.abort(); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;ajax = $.ajax({ type : "POST", dataType : "JSON", url : this.options.url, data : this.options.data, success : function(result) { if (result) { if (result.done) { __this.options.total = result.data.context.total; __this.options.pageCount = __this.options.total % __this.options.data.rows == 0&nbsp; ? __this.Div(__this.options.total, __this.options.data.rows)&nbsp; : __this.Div(__this.options.total, __this.options.data.rows) + 1; __this.options.onLoadSuccess(result.data, __this.options.current); __this.render(__this.$element, __this.options); __this.event(__this.$element, __this.options); } else { $.messager.alert('错误', result.msg, 'error'); } } else { $.messager.alert('错误', '网络异常，请稍后再试！', 'error'); } }, error : function(err) { $.messager.alert('操作提示', '获取信息失败，请联系管理员!', 'error'); } }); }, render : function(obj, args) { return (function(){ obj.empty(); if(args.current &gt; 1){ obj.append('&lt;li class="prev"&gt;&lt;a href="javascript:;"&gt;前一页&lt;/a&gt;&lt;/li&gt;'); }else{ obj.append('&lt;li class="prev disabled"&gt;&lt;a href="javascript:;"&gt;前一页&lt;/a&gt;&lt;/li&gt;'); } if(args.current != 1 &amp;&amp; args.current &gt;= 4 &amp;&amp; args.pageCount != 4){ obj.append('&lt;li&gt;&lt;a href="javascript:;" class="tcdNumber"&gt;' + 1 + '&lt;/a&gt;&lt;/li&gt;'); } if(args.current-2 &gt; 2 &amp;&amp; args.current &lt;= args.pageCount &amp;&amp; args.pageCount &gt; 5){ obj.append('&lt;li&gt;&lt;a href="javascript:;"&gt;...&lt;/a&gt;&lt;/li&gt;'); } var start = args.current -2,end = args.current+2; if((start &gt; 1 &amp;&amp; args.current &lt; 4)||args.current == 1){ end++; } if(args.current &gt; args.pageCount-4 &amp;&amp; args.current &gt;= args.pageCount){ start--; } for (;start &lt;= end; start++) { if(start &lt;= args.pageCount &amp;&amp; start &gt;= 1){ if(start != args.current){ obj.append('&lt;li&gt;&lt;a href="javascript:;" class="tcdNumber"&gt;'+ start +'&lt;/a&gt;&lt;/li&gt;'); }else{ obj.append('&lt;li class="active"&gt;&lt;a href="javascript:;" class="tcdNumber"&gt;'+ start +'&lt;/a&gt;&lt;/li&gt;'); } } } if(args.current + 2 &lt; args.pageCount - 1 &amp;&amp; args.current &gt;= 1 &amp;&amp; args.pageCount &gt; 5){ obj.append('&lt;li&gt;&lt;a href="javascript:;"&gt;...&lt;/a&gt;&lt;/li&gt;'); } if(args.current != args.pageCount &amp;&amp; args.current &lt; args.pageCount -2 &nbsp;&amp;&amp; args.pageCount != 4){ obj.append('&lt;li&gt;&lt;a href="javascript:;" class="tcdNumber"&gt;'+args.pageCount+'&lt;/a&gt;&lt;/li&gt;'); } &nbsp; if(args.current &lt; args.pageCount){ obj.append('&lt;li class="next"&gt;&lt;a href="javascript:;"&gt;后一页&lt;/a&gt;&lt;/li&gt;'); }else{ obj.append('&lt;li class="next disabled"&gt;&lt;a href="javascript:;"&gt;后一页&lt;/a&gt;&lt;/li&gt;'); } &nbsp; obj.append('&lt;li&gt;&lt;span class="topages" style="font-size:14px;color:#2fa4e7;padding:0px;"&gt;&amp;nbsp;&amp;nbsp;到第\ &lt;input type="text" class="page_number" style="width: 50px;height:34px;color:#000;padding:5px;"\ value="'+(args.current&gt;args.pages?args.pages:args.current)+'" /&gt;页&amp;nbsp;&amp;nbsp;&lt;/span&gt;\ &lt;button type="button" class="btn btn-default page_submit" style="height:35px;color:#2fa4e7;"&gt;确定&lt;/button&gt;&lt;/li&gt;'); })(); }, event : function(obj, args) { var __this = this; return (function(){ obj.find("li&gt;a.tcdNumber").unbind("click").click(function(){ __this.options.current = parseInt($(this).text()); __this.options.data.page = __this.options.current, __this.initGrid(); }); obj.find("li.prev").unbind("click").click(function(){ __this.options.current = parseInt(args.current-1); __this.options.data.page = __this.options.current, __this.initGrid(); }); obj.find("li.next").unbind("click").click(function(){ __this.options.current = parseInt(args.current+1); __this.options.data.page = __this.options.current, __this.initGrid(); }); obj.find("button.page_submit").unbind("click").click(function(){ var value = $(__this.$element).find('input.page_number').val(); var number = parseInt($.trim(value)); var pages = __this.options.pageCount; if(isNaN(number)){ $.messager.alert('错误', '请输入正确的数字！', 'error'); return; } else if (number &lt; 1) { number = 1; } else { number = number&gt;pages?pages:number; } __this.options.data.page = number; __this.options.current = number; __this.initGrid(); }); })(); }, Div : function(exp1, exp2) { var n1 = Math.round(exp1); var n2 = Math.round(exp2); var rslt = n1 / n2; if (rslt &gt;= 0) { rslt = Math.floor(rslt); } else { rslt = Math.ceil(rslt); } return rslt; } }; &nbsp; $.fn.splitPage = function(options) { var splitPageDiv = new SplitPageDiv(this, options); return splitPageDiv.initGrid(); }; })(jQuery);&nbsp; </td> 
 </tr> 
 </tbody> 
</table>