写的一个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);

美化方面可以自己改一改的

附带一个结合jquery-jtemplates使用的小例子 下载点这里