jquery小分页插件，类似aspnetpager的用法

1 /*  2 -- =============================================  3 -- Author:        <yyliuliang@gmail.com>  4 -- Create date: <2008-12>  5 -- =============================================  6 */  7 (function($) {  8   9     $.fn.pager = function(recordCount, options) { 10  11         var defaults = { 12             //只有一页时是否仍然显示 13             alwaysShow: true, 14             width: '95%', 15             currentPageIndex: 1, 16             pageSize: 10, 17             //button or number 18             pagerStyle: 'button', 19             onPageIndexChanged: function() { } 20         }; 21         var parent = this; 22         var props = $.extend(defaults, options); 23         var pageCount = Math.ceil((recordCount / props.pageSize)); 24  25         //当数据不满一页时，是否显示pager 26         if (recordCount > props.pageSize || props.alwaysShow) { 27             var text = "<table width='" + props.width + "'><tr><td align='left'>"; 28  29             text += '记录数:' + recordCount + " 页数:" + props.currentPageIndex + "/" + pageCount + " 每页" + props.pageSize + "条"; 30             text += "</td><td align='right'> "; 31             if (props.pagerStyle === 'button') { 32                 text += "<a id='pagerfirst'>首页</a> "; 33                 text += "<a id='pagerprev'>上页</a> "; 34                 text += "<a id='pagernext'>下页</a> "; 35                 text += "<a id='pagerlast'>末页</a> "; 36             } 37  38             if (props.pagerStyle === 'number') { 39                 ///TODO 40             } 41  42             text += "<input id='pagernumber' style='width:18px;font-size:11px' /><input type='button' value='GO' style='width:22px;font-size:11px' id='pagerbutton' />"; 43             text += "</td></tr></table>"; 44  45             this.html(text); 46  47             $('#pagernumber').val(props.currentPageIndex); 48  49  50             $('#pagerbutton').click(function() { 51                 var i = $('#pagernumber').val(); 52                 if (i < 1 || i > pageCount || !/^\d+$/.test(i)) { 53                     alert('请输入正确的页数'); 54                     return false; 55                 } 56                 props.currentPageIndex = i; 57                 raisePageIndexChangedEvent(i); 58             }); 59  60             if (props.currentPageIndex > 1) { 61  62                 $('#pagerfirst').attr('href','javascript:void(0);').click(function() {                     63                         raisePageIndexChangedEvent(1); 64                 }); 65  66                 $('#pagerprev').attr('href','javascript:void(0);').click(function() {                     67                         raisePageIndexChangedEvent(--props.currentPageIndex); 68                 }); 69             } 70             else { 71                 $('#pagerfirst').css({'color':'gray','text-decoration':'none'}); 72                 $('#pagerprev').css({'color':'gray','text-decoration':'none'}); 73             } 74  75             if (props.currentPageIndex < pageCount) { 76                 $('#pagernext').attr('href','javascript:void(0);').click(function() {                     77                         raisePageIndexChangedEvent(++props.currentPageIndex); 78                 }); 79  80                 $('#pagerlast').attr('href','javascript:void(0);').click(function() { 81                         raisePageIndexChangedEvent(pageCount); 82                 }); 83             } 84             else { 85                 $('#pagernext').css({'color':'gray','text-decoration':'none'}); 86                 $('#pagerlast').css({'color':'gray','text-decoration':'none'}); 87             } 88  89         } 90  91         function render() { 92         } 93  94  95         function raisePageIndexChangedEvent(pageIndex) { 96             props.onPageIndexChanged(pageIndex); 97         } 98     }; 99 100 })(jQuery);

美化方面方面基本没做，可以自己改一改的

本文配套源码

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索javascript
， function
， text
， aspnetpager
， PageSize
， prop
， prop)
， props
， Text插件
Button插件
aspnetpager分页控件、aspnetpager url分页、aspnetpager分页样式、aspnetpager分页、aspnetpager 分页插件，以便于您获取更多的相关知识。