https://cncaprc.gov.cn/r/cms/www/ylzx/default/static/page/jquery.sPage.js

1/*  
2*  jQuery分页插件sPage
3*/
4(function ($, window, document, undefined) {
5    'use strict';
6    var defaults = {
7        page: 1,//当前页
8        pageSize: 10,//每页显示多少条
9        total: 0,//数据总条数
10        showTotal: true,//是否显示总条数
11        totalTxt: "共{total}条",//数据总条数文字描述
12        noData: false,//没有数据时是否显示分页，默认false不显示，true显示第一页
13        showSkip: true,//是否显示跳页
14        showPN: true,//是否显示上下翻页
15        prevPage: "上一页",//上翻页按钮文字
16        nextPage: "下一页",//下翻页按钮文字
17        fastForward: 5,//快进快退，默认0页
18        backFun: function (page) { }//点击分页按钮回调函数，返回当前页码
19    };
20    function Plugin(element, options) {
21        this.element = $(element);
22        this.settings = $.extend({}, defaults, options);
23        this.pageNum = 1, //记录当前页码
24            this.pageList = [], //页码集合
25            this.pageTatol = 0; //记录总页数
26        this.init();
27    }
28    $.extend(Plugin.prototype, {
29        init: function () {
30            this.element.empty();
31            this.viewHtml();
32        },
33        creatHtml: function (i) {
34            i == this.settings.page ? this.pageList.push('<button class="active sub-btn-page" data-page=' + i + '>' + i + '</button>')
35                : this.pageList.push('<button data-page=' + i + ' class="sub-btn-page">' + i + '</button>');
36        },
37        viewHtml: function () {
38            var settings = this.settings;
39            var pageTatol = 0;
40            var pageArr = [];//分页元素集合，减少dom重绘次数
41            if (settings.total > 0) {
42                pageTatol = Math.ceil(settings.total / settings.pageSize);
43            } else {
44                if (settings.noData) {
45                    pageTatol = 1;
46                    settings.page = 1;
47                    settings.total = 0;
48                } else {
49                    return;
50                }
51            }
52            this.pageTatol = pageTatol;
53            this.pageNum = settings.page;
54
55            pageArr.push('<div class="spage-number">');
56            this.pageList = [];//页码元素集合，包括上下页
57            if (settings.showPN) {
58                settings.page == 1 ? this.pageList.push('<button class="button-disabled" data-page="prev">' + settings.prevPage + '</button>')
59                    : this.pageList.push('<button data-page="prev" class="btn-change-page">' + settings.prevPage + '</button>');
60            }
61            if (pageTatol <= 6) {
62                for (var i = 1; i < pageTatol + 1; i++) {
63                    this.creatHtml(i);
64                }
65            } else {
66                if (settings.page < 5) {
67                    for (var i = 1; i <= 5; i++) {
68                        this.creatHtml(i);
69                    }
70                    // this.pageList.push('<button data-page="after" class="spage-after">...</button><button data-page=' + pageTatol + '>' + pageTatol + '</button>');
71                } else if (settings.page > pageTatol - 4) {
72                    // this.pageList.push('<button data-page="1">1</button><button data-page="before" class="spage-before">...</button>');
73                    for (var i = pageTatol - 4; i <= pageTatol; i++) {
74                        this.creatHtml(i);
75                    }
76                } else {
77                    // this.pageList.push('<button data-page="1">1</button><button data-page="before" class="spage-before">...</button>');
78                    for (var i = settings.page - 2; i <= Number(settings.page) + 2; i++) {
79                        this.creatHtml(i);
80                    }
81                    // this.pageList.push('<button data-page="after" class="spage-after">...</button><button data-page=' + pageTatol + '>' + pageTatol + '</button>');
82                }
83            }
84            if (settings.showPN) {
85                settings.page == pageTatol ? this.pageList.push('<button class="button-disabled" data-page="next">' + settings.nextPage + '</button>')

86                    : this.pageList.push('<button data-page="next" class="btn-change-page">' + settings.nextPage + '</button>');
87            }
88            pageArr.push(this.pageList.join(''));
89            pageArr.push('</div>');
90            if (settings.showTotal) {
91                pageArr.push('<div class="spage-total">' + settings.totalTxt.replace(/\{(\w+)\}/gi, settings.total) + '</div>');
92            }
93            if (settings.showSkip) {
94                pageArr.push('<div class="spage-skip">到第&nbsp;<input type="text" value="' + settings.page + '"/>&nbsp;页&nbsp;&nbsp;<button data-page="go">确定</button></div>');
95            }
96            this.element.html(pageArr.join(''));
97            this.clickBtn();
98        },
99        clickBtn: function () {
100            var that = this;
101            var settings = this.settings;
102            var ele = this.element;
103            var pageTatol = this.pageTatol;
104            this.element.off("click", "button");
105            this.element.on("click", "button", function () {
106                var pageText = $(this).data("page");
107                switch (pageText) {
108                    case "prev":
109                        settings.page = settings.page - 1 >= 1 ? settings.page - 1 : 1;
110                        pageText = settings.page;
111                        break;
112                    case "next":
113                        settings.page = Number(settings.page) + 1 <= pageTatol ? Number(settings.page) + 1 : pageTatol;
114                        pageText = settings.page;
115                        break;
116                    case "before":
117                        settings.page = settings.page - settings.fastForward >= 1 ? settings.page - settings.fastForward : 1;
118                        pageText = settings.page;
119                        break;
120                    case "after":
121                        settings.page = Number(settings.page) + Number(settings.fastForward) <= pageTatol ? Number(settings.page) + Number(settings.fastForward) : pageTatol;
122                        pageText = settings.page;
123                        break;
124                    case "go":
125                        var p = parseInt(ele.find("input").val());
126                        if (/^[0-9]*$/.test(p) && p >= 1 && p <= pageTatol) {
127                            settings.page = p;
128                            pageText = p;
129                        } else {
130                            return;
131                        }
132                        break;
133                    default:
134                        settings.page = pageText;
135                }
136                // 点击或跳转当前页码不执行任何操作
137                if (pageText == that.pageNum) {
138                    return;
139                }
140                that.pageNum = settings.page;
141                that.viewHtml();
142                settings.backFun(pageText);
143            });
144            this.element.off("keyup", "input");
145            this.element.on("keyup", "input", function (event) {
146                if (event.keyCode == 13) {
147                    var p = parseInt(ele.find("input").val());
148                    if (/^[0-9]*$/.test(p) && p >= 1 && p <= pageTatol && p != that.pageNum) {
149                        settings.page = p;
150                        that.pageNum = p;
151                        that.viewHtml();
152                        settings.backFun(p);
153                    } else {
154                        return;
155                    }
156                }
157            });
158            if (settings.fastForward > 0) {
159                ele.find(".spage-after").hover(function () {
160                    $(this).html("&raquo;");
161                }, function () {
162                    $(this).html("...");
163                });
164                ele.find(".spage-before").hover(function () {
165                    $(this).html("&laquo;");
166                }, function () {
167                    $(this).html("...");
168                });
169            }
170        }
171    });
172    $.fn.sPage = function (options) {
173        return this.each(function () {
174            new Plugin(this, options);
175        });
176    }
177})(jQuery, window, document);