JS分页控件
分页插件代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 (function ($) { 2 $.fn.pager = function (options) { 3 var opts = $.extend({}, $.fn.pager.defaults, options); 4 return this.each(function () { 5 $(this).empty().append(renderpager(parseInt(options.pagenumber), parseInt(options.pagecount), options.buttonClickCallback)); 6 $('.pages li').mouseover(function () { document.body.style.cursor = "pointer"; }).mouseout(function () { document.body.style.cursor = "auto"; }); 7 }); 8 }; 9 10 function renderpager(pagenumber, pagecount, buttonClickCallback) { 11 var $pager = $('<ul class="pages"></ul>'); 12 $pager.append(renderButton('首页', pagenumber, pagecount, buttonClickCallback)).append(renderButton('上一页', pagenumber, pagecount, buttonClickCallback)); 13 var startPoint = 1; 14 //var endPoint = pagecount < 9 ? pagecount : 9; 15 var endPoint = pagecount < 7 ? pagecount : 7; 16 //var thpoint = "<li class='thpoint'>...</li>"; 17 var thpoint = ""; 18 if (pagenumber > 4) { 19 startPoint = pagenumber - 3; 20 endPoint = pagenumber + 3; 21 } 22 if (endPoint > pagecount) { 23 startPoint = pagecount - 6; 24 endPoint = pagecount; 25 thpoint = ""; 26 } 27 if (startPoint < 1) { 28 startPoint = 1; 29 } 30 for (var page = startPoint; page <= endPoint; page++) { 31 var currentButton = $('<li class="page-number">' + (page) + '</li>'); 32 page == pagenumber ? currentButton.addClass('pgCurrent') : currentButton.click(function () { 33 buttonClickCallback(this.firstChild.data); 34 }); 35 currentButton.appendTo($pager); 36 } 37 $pager.append(thpoint).append(renderButton('下一页', pagenumber, pagecount, buttonClickCallback)).append(renderButton('末页', pagenumber, pagecount, buttonClickCallback)); 38 $pager.append("<li class='thpoint'>共: " + pagecount + " 页</li>"); 39 //var strgoto = $("<li class='thpoint'>当前<input type='text' value='" + pagenumber + "'maxlength='6' id='gotoval' style='width:20px; height:16px;margin-top:-3px;padding-top:2px;padding-left:10px;'/>页</li>"); 40 var strgoto = ""; 41 $pager.append(strgoto); 42 //$pager.append(changepage('go', pagecount, buttonClickCallback)); 43 return $pager; 44 } 45 function changepage(buttonLabel, pagecount, buttonClickCallback) { 46 var $btngoto = $('<li class="pgNext">' + buttonLabel + '</li>'); 47 $btngoto.click(function () { 48 var gotoval = $('#gotoval').val(); 49 var patrn = /^[1-9]{1,20}$/; 50 if (!patrn.exec(gotoval)) { 51 alert("请输入非零的正整数!"); 52 return false; 53 } 54 var intval = parseInt(gotoval); 55 if (intval > pagecount) { 56 alert("您输入的页面超过总页数 " + pagecount); 57 return; 58 } 59 buttonClickCallback(intval); 60 }); 61 return $btngoto; 62 } 63 64 function renderButton(buttonLabel, pagenumber, pagecount, buttonClickCallback) { 65 var $Button = $('<li class="pgNext">' + buttonLabel + '</li>'); 66 var destPage = 1; 67 switch (buttonLabel) { 68 case "首页": 69 destPage = 1; 70 break; 71 case "上一页": 72 destPage = pagenumber - 1; 73 break; 74 case "下一页": 75 destPage = pagenumber + 1; 76 break; 77 case "末页": 78 destPage = pagecount; 79 break; 80 } 81 if (buttonLabel == "首页" || buttonLabel == "上一页") { 82 pagenumber <= 1 ? $Button.addClass('pgEmpty') : $Button.click(function () { buttonClickCallback(destPage); }); 83 } 84 else { 85 pagenumber >= pagecount ? $Button.addClass('pgEmpty') : $Button.click(function () { buttonClickCallback(destPage); }); 86 } 87 return $Button; 88 } 89 90 $.fn.pager.defaults = { 91 pagenumber: 1, 92 pagecount: 1 93 }; 94 })(jQuery);
页面调用JS
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 var invert = { 2 pager: function (pageIndex) { 3 4 $("#pager").pager({ 5 pagenumber: pageIndex, 6 pagecount: data.pageNum, 7 totalcount: data.totalCount, 8 buttonClickCallback: invert.pageClick 9 }); 10 11 12 13 } 14 15 }, 16 pageClick: function (pageclickednumber) {//分页回调 17 var status = invert.getStatus(); 18 invert.pager(pageclickednumber,status); 19 } 20 };
<div id="pager" class="w-page">
</div>
分页样式
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 /* jquery.page.js css */ 2 .w-page{margin:40px auto 30px;} 3 ul.pages {display:block;border:none;text-transform:uppercase;font-size:12px; display: inline-block; padding:0; overflow: hidden; font-size: 14px;} 4 ul.pages li {list-style:none;float:left;text-decoration:none;margin:0 15px 0 0;padding:6px 10px;color:#b6b6b6;background-color:#c6c6c6; color: #fff;} 5 ul.pages li:hover {background-color:#ff4747;} 6 ul.pages li.pgEmpty,li.pgNext { color:#fff; background-color:#c6c6c6; padding:6px 10px;} 7 ul.pages li.pgCurrent { color:#fff;font-weight:700;background:#ff4747;} 8 div#pager{text-align:center;} 9 #pager .count:hover,#pager .thpoint:hover{background-color:#c6c6c6;} 10 #pager .thpoint,ul.pages li.pgEmpty{cursor: default;}