自己写的分页控件

  1 /************************************************************************
  2 *************************************************************************
  3 case Name :           pager - jQuery Plugin
  4 case Revison :        1.0
  5 case Date :         2014-3-20
  6 case Author:        zy_ding@ctrip.com
  7 case Support:        FF, IE7, IE8, IE9, IE10, Chrome, Others(unknown)
  8 case License :        N/A
  9 *************************************************************************/
 10 
 11 (function ($) {
 12     $.fn.pager = function (options) {
 13         var defaults = {
 14             currIndex: 1,                   //当前页面index
 15             totalCount: 0,                  //数据总数
 16             pageSize: 20,                   //页面容量
 17             isinputpage: true,              //是否显示页面输入框
 18             onPaging: null,                 //翻页事件
 19             cssClasses: ‘pagination-left‘,  //css classes
 20             ulClass: ‘pager‘
 21         }
 22         var options = $.extend(defaults, options);
 23         var maxPageIndex = parseInt(options.totalCount / options.pageSize) + (options.totalCount % options.pageSize >= 1 ? 1 : 0);
 24         var $this = this;
 25 
 26         //跳转页
 27         var topage = function (index) {
 28             index = parseInt(index);
 29             if (index < 1 || index > maxPageIndex)
 30                 return;
 31             options.currIndex = index;
 32             if ($.isFunction(options.onPaging)) {
 33                 options.onPaging(index);
 34             }
 35             buildindexs();
 36         }
 37         //页码a click事件
 38         var pagerhandle = function (e) {
 39             var index = e.data;
 40             topage(index);
 41         }
 42         //上一页
 43         var toprepage = function () {
 44             topage(options.currIndex - 1);
 45         }
 46         //下一页
 47         var tonextpage = function () {
 48             topage(options.currIndex + 1);
 49         }
 50         //go button
 51         var gobtnclick = function () {
 52             topage($("#inptPageIndex").val());
 53         }
 54         //分页-输入控制
 55         var inputPageChange = function () {
 56             code = event.keyCode;
 57             var $this = $(this);
 58             //Enter
 59             if (code == 13) {
 60                 topage($this.val());
 61             }
 62             //BackSpace Delete Home End LeftArrow RightArrow 
 63             else if (code == 8 || code == 46 || code == 35 || code == 36 || code == 37 || code == 39) {
 64                 event.returnValue = true;
 65             }
 66             //NaN
 67             else if (code < 48 || (code > 57 && code < 96) || code > 150) {
 68                 event.returnValue = false;
 69             }
 70         }
 71         //创建indexs
 72         var buildindexs = function () {
 73             $this.find(‘.pageLink‘).remove();
 74             $(‘#inptPageIndex‘).val(options.currIndex);
 75             var nextpage = $(‘#nextpage‘)
 76             var startIndex = parseInt(options.currIndex / 10) * 10 + 1 + (options.currIndex % 10 == 0 ? -10 : 0);
 77             var endIndex = startIndex + 10;
 78             if (options.currIndex > 10) {
 79                 var prepageslink = $("<a class=‘pageLink‘ href=‘###‘style=‘margin-right:5px;‘>...</a>");
 80                 prepageslink.bind(‘click‘, startIndex - 1, pagerhandle);
 81                 prepageslink.insertBefore(nextpage);
 82             }
 83             for (i = startIndex; i < endIndex && i <= maxPageIndex; i++) {
 84                 if (i != options.currIndex) {
 85                     var pagelink = $("<a class=‘pageLink‘ href=‘###‘style=‘margin-right:5px;‘>" + i + "</a>");
 86                     pagelink.insertBefore(nextpage);
 87                     pagelink.bind(‘click‘, i, pagerhandle);
 88                 }
 89                 else {
 90                     $("<span class=‘pageLink‘ style=‘margin-right:5px;font-weight:Bold;color:red;‘>" + i + "</span>").insertBefore(nextpage);
 91                 }
 92             }
 93             if (maxPageIndex - endIndex >= 0) {
 94                 var nextpageslink = $("<a class=‘pageLink‘ href=‘###‘style=‘margin-right:5px;‘>...</a>");
 95                 nextpageslink.bind(‘click‘, startIndex + 10, pagerhandle);
 96                 nextpageslink.insertBefore(nextpage);
 97             }
 98         }
 99         //初始化pager
100         var buildpager = function () {
101             if (options.totalCount / options.pageSize > 1) {
102                 $this.empty();
103                 $this.show();
104                 $this.attr(‘class‘, $this.attr(‘class‘) + ‘ ‘ + options.cssClasses);
105                 var ul = $("<ul></ul>");
106                 ul.attr(‘class‘, options.ulClass);
107                 ul.appendTo($this);
108                 var divpager = $("<div></div>");
109                 divpager.appendTo(ul);
110 
111                 var maxPageIndex = parseInt(options.totalCount / options.pageSize) + (options.totalCount % options.pageSize >= 1 ? 1 : 0);
112                 var firstpage = $("<a href=‘###‘ style=‘margin-right: 5px;‘>&lt;&lt;</a>");
113                 firstpage.bind(‘click‘, 1, pagerhandle);
114                 var prepage = $("<a href=‘###‘ style=‘margin-right: 5px;‘>&lt;</a>");
115                 prepage.bind(‘click‘, toprepage);
116                 var nextpage = $("<a id=‘nextpage‘ href=‘###‘ style=‘margin-right: 5px;‘>&gt;</a>");
117                 nextpage.bind(‘click‘, tonextpage);
118                 var lastpage = $("<a href=‘###‘ style=‘margin-right: 5px;‘>&gt;&gt;</a>");
119                 lastpage.bind(‘click‘, maxPageIndex, pagerhandle);
120 
121                 firstpage.appendTo(divpager);
122                 prepage.appendTo(divpager);
123                 nextpage.appendTo(divpager);
124                 lastpage.appendTo(divpager);
125                 if (options.isinputpage) {
126                     var iptpage = $("<input type=‘text‘ id=‘inptPageIndex‘ value=‘1‘ style=‘width: 30px;‘/>");
127                     iptpage.appendTo(divpager);
128                     iptpage.bind(‘keydown‘, inputPageChange);
129                     var gotobtn = $("<input type=‘button‘ value=‘go‘ class=‘ui-button ui-widget ui-state-default ui-corner-all‘ role=‘button‘ aria-disabled=‘false‘>")
130                     gotobtn.bind(‘click‘, gobtnclick);
131                     gotobtn.appendTo(divpager);
132                 }
133                 buildindexs();
134             }
135             else {
136                 $this.hide();
137             }
138         }
139         return this.each(function () {
140             buildpager();
141         });
142     };
143 })(jQuery);

1 //初始化分页
2                     $(‘.pagination‘).pager({ totalCount: 100, pageSize: 20, pageIndex: 1, onPaging: function (index) {
3                         pageIndex = index;
4                         if (!validFields()) {
5                             return false;
6                         }
7                         getLogs();
8                     }

1 <!-- pagination -->
2                 <div class="pagination">
3                 </div>