jQuery分页插件

HTML：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8"/>
 5     <title></title>
 6     <style>
 7         /* 外面盒子样式---自己定义 */
 8         .page_div{margin:20px 10px 20px 0;color:#666}
 9         /* 页数按钮样式 */
10         .page_div button{display:inline-block;min-width:30px;height:28px;cursor:pointer;color:#666;font-size:13px;line-height:28px;background-color:#f9f9f9;border:1px solid #dce0e0;text-align:center;margin:0 4px;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
11         #firstPage,#lastPage,#nextPage,#prePage{width:50px;color:#0073A9;border:1px solid #0073A9}
12         #nextPage,#prePage{width:70px}
13         .page_div .current{background-color:#0073A9;border-color:#0073A9;color:#FFF}
14         /* 页面数量 */
15         .totalPages{margin:0 10px}
16         .totalPages span,.totalSize span{color:#0073A9;margin:0 5px}
17         /*button禁用*/
18         .page_div button:disabled{opacity:.5;cursor:no-drop}
19     </style>
20 </head>
21 <body>
22     <div id="page" class="page_div"></div>
23 </body>
24 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
25 <script type="text/javascript" src="pageMe.js"></script>
26 <script>
27     // pageMe.js 使用方法
28     $("#page").paging({
29         pageNum: 5, // 当前页面
30         totalNum: 14, // 总页码
31         totalList: 300, // 记录总数量
32         callback: function (num) { //回调函数
33             console.log(num);
34         }
35     });
36 </script>
37 </html>

pageMe.js

  1 ;(function ($, window, document, undefined) {
  2     'use strict';
  3     function Paging(element, options) {
  4         this.element = element;
  5         this.options = {
  6             pageNum: options.pageNum || 1, // 当前页码
  7             totalNum: options.totalNum, // 总页码
  8             totalList: options.totalList, // 数据总记录
  9             callback: options.callback // 回调函数
 10         };
 11         this.init();
 12     }
 13     Paging.prototype = {
 14         constructor: Paging,
 15         init: function () {
 16             this.createHtml();
 17             this.bindEvent();
 18         },
 19         createHtml: function () {
 20             var me = this;
 21             var content = [];
 22             var pageNum = me.options.pageNum;
 23             var totalNum = me.options.totalNum;
 24             var totalList = me.options.totalList;
 25             content.push("<button type='button' id='firstPage'>首页</button><button type='button' id='prePage'>上一页</button>");
 26             // 总页数大于6必显示省略号
 27             if (totalNum > 6) {
 28                 // 1、当前页码小于5且总页码大于6 省略号显示后面+总页码
 29                 if (pageNum < 5) {
 30                     // 1与6主要看要显示多少个按钮 目前都显示5个
 31                     for (var i = 1; i < 6; i++) {
 32                         if (pageNum !== i) {
 33                             content.push("<button type='button'>" + i + "</button>");
 34                         } else {
 35                             content.push("<button type='button' class='current'>" + i + "</button>");
 36                         }
 37                     }
 38                     content.push(". . .");
 39                     content.push("<button type='button'>" + totalNum + "</button>");
 40                 } else {
 41                     // 2、当前页码接近后面 到最后页码隔3个 省略号显示后面+总页面
 42                     if (pageNum < totalNum - 3) {
 43                         for (var i = pageNum - 2; i < pageNum + 3; i++) {
 44                             if (pageNum !== i) {
 45                                 content.push("<button type='button'>" + i + "</button>");
 46                             } else {
 47                                 content.push("<button type='button' class='current'>" + i + "</button>");
 48                             }
 49                         }
 50                         content.push(". . .");
 51                         content.push("<button type='button'>" + totalNum + "</button>");
 52                     } else {
 53                         // 3、页码至少在5，最多在【totalNum - 3】的中间位置 第一页+省略号显示前面
 54                         content.push("<button type='button'>" + 1 + "</button>");
 55                         content.push(". . .");
 56                         for (var i = totalNum - 4; i < totalNum + 1; i++) {
 57                             if (pageNum !== i) {
 58                                 content.push("<button type='button'>" + i + "</button>");
 59                             } else {
 60                                 content.push("<button type='button' class='current'>" + i + "</button>");
 61                             }
 62                         }
 63                     }
 64                 }
 65             } else {
 66                 // 总页数小于6
 67                 for (var i = 1; i < totalNum + 1; i++) {
 68                     if (pageNum !== i) {
 69                         content.push("<button type='button'>" + i + "</button>");
 70                     } else {
 71                         content.push("<button type='button' class='current'>" + i + "</button>");
 72                     }
 73                 }
 74             }
 75             content.push("<button type='button' id='lastPage'>尾页</button><button type='button' id='nextPage'>下一页</button>");
 76             content.push("<span class='totalNum'> 共 " + totalNum + " 页 </span>");
 77             content.push("<span class='totalList'> 共 " + totalList + " 条记录 </span>");
 78             me.element.html(content.join(''));
 79 
 80             // DOM重新生成后每次调用是否禁用button
 81             setTimeout(function () {
 82                 me.dis();
 83             }, 20);
 84         },
 85         bindEvent: function () {
 86             var me = this;
 87             me.element.off('click', 'button');
 88             // 委托新生成的dom监听事件
 89             me.element.on('click', 'button', function () {
 90                 var id = $(this).attr('id');
 91                 var num = parseInt($(this).html());
 92                 var pageNum = me.options.pageNum;
 93                 if (id === 'prePage') {
 94                     if (pageNum !== 1) {
 95                         me.options.pageNum -= 1;
 96                     }
 97                 } else if (id === 'nextPage') {
 98                     if (pageNum !== me.options.totalNum) {
 99                         me.options.pageNum += 1;
100                     }
101                 } else if (id === 'firstPage') {
102                     if (pageNum !== 1) {
103                         me.options.pageNum = 1;
104                     }
105                 } else if (id === 'lastPage') {
106                     if (pageNum !== me.options.totalNum) {
107                         me.options.pageNum = me.options.totalNum;
108                     }
109                 } else {
110                     me.options.pageNum = num;
111                 }
112                 me.createHtml();
113                 if (me.options.callback) {
114                     me.options.callback(me.options.pageNum);
115                 }
116             });
117         },
118         dis: function () {
119             var me = this;
120             var pageNum = me.options.pageNum;
121             var totalNum = me.options.totalNum;
122             if (pageNum === 1) {
123                 me.element.children('#firstPage, #prePage').prop('disabled', true);
124             } else if (pageNum === totalNum) {
125                 me.element.children('#lastPage, #nextPage').prop('disabled', true);
126             }
127         }
128     };
129     $.fn.paging = function (options) {
130         return new Paging($(this), options);
131     }
132 })(jQuery, window, document);