http://ordostsg.org.cn/resource/default/static/assets/js/Pagination.js

1(function ($) {
2
3    let Name = "Pagination";
4
5    $.fn.Pagination = function (options) {
6        let myDoom = this;
7        // 默认值
8        options = options || {};
9        options.page = options.page || 1;   // 当前页数
10        options.count = options.count || 1;       // 总数量
11        options.limit = options.limit || 10;      // 每页数量
12        options.groups = options.groups || 5;     // 连续出现几个页码按钮
13        options.prev = options.prev || '<i class="glyphicon glyphicon-chevron-left"></i>';   // 自定义上一页按钮
14        options.next = options.next || '<i class="glyphicon glyphicon-chevron-right"></i>';   // 自定义下一页按钮
15        options.first = options.first || '<i class="glyphicon glyphicon-step-backward"></i>';   // 自定义首页按钮
16        options.last = options.last || '<i class="glyphicon glyphicon-step-forward"></i>';     // 自定义尾页按钮
17        options.onPageChange = options.onPageChange || function (page) {console.log(page)};
18
19        let PageFloat = Math.floor(options.groups / 2), // 页码浮动量    10/2 = 5
20            maxPage = Math.ceil(options.count / options.limit), // 总页数
21            pageListHtml = "";
22
23        let i = options.page - PageFloat;
24        if (options.page + PageFloat > maxPage ){ i = maxPage - (PageFloat * 2);} // 100 - 5 * 2 = 90
25        if (i < 1){i = 1 ;}
26
27        do {
28            let Selected = "";
29            if (i === options.page){
30                Selected = 'active';
31            }
32            pageListHtml += '<li class="page-list '+Selected+'"><a href="#">'+i+'</a></li>';
33            i ++;
34            // 判断显示页数
35            // i 小于 当前页 + 页码浮动量
36            // let a = (i <= (options.nowPage + PageFloat));
37            // 如果当前页 - 页码浮动量 小于0 则i 小于 在之前的基础上再多 (浮动 + 2 - 当前页) 个分页
38            // let b = (options.nowPage - PageFloat <= 0 && i < (options.nowPage + PageFloat + (PageFloat + 2 - options.nowPage) ));
39            // i 永远 小于最大页数
40            // let c = (i <= maxPage);
41            // debugger;
42        }while ((i <= (options.page + PageFloat) || options.page - PageFloat <= 0 && i < (options.page + PageFloat + (PageFloat + 2 - options.page) ))  && i <= maxPage )
43
44        let html = '<nav aria-label="Page navigation">' +
45            '<ul class="pagination">' +
46            '<li><a href="#" class="pager-item" aria-label="first" title="回到首页"><span aria-hidden="true">'+ options.first +'</span></a></li>' +
47            '<li><a href="#" class="pager-item" aria-label="prev" title="上一页"><span aria-hidden="true">'+ options.prev +'</span></a></li>' +
48            pageListHtml +
49            '<li><a href="#" class="pager-item" aria-label="next" class="下一页"><span aria-hidden="true">'+ options.next +'</span></a></li>' +
50            '<li><a href="#" class="pager-item" aria-label="last" title="前往尾页"><span aria-hidden="true">'+ options.last +'</span></a></li>' +
51            '</ul></nav>';
52
53
54        // 清空之前的内容然后再添加新内容
55        myDoom.off('click');
56        myDoom.empty();
57        myDoom.append(html);
58
59        // 切换页码
60        myDoom.on('click', '.pagination .page-list', function() {
61            options.page = parseInt($(this).text());
62            myDoom.Pagination(options);
63            options.onPageChange(parseInt($(this).text()));
64        });
65        // 首页、尾页、上一页、下一页
66        myDoom.on('click','.pagination .pager-item',function () {
67            let label = $(this).attr('aria-label');
68            let page = 1;
69            if (label === 'first'){
70                page = 1;
71            }
72            else if (label === 'prev'){
73                page = options.page - 1;
74                if (page < 1 )    page = 1;
75            }else if (label === 'next'){
76                page = options.page +1;
77                if (page > maxPage) page = maxPage;
78            }else if (label === 'last'){
79                page = maxPage;
80            }
81            options.page = page;
82            myDoom.Pagination(options);
83            options.onPageChange(page);
84        })
85    }
86}(jQuery));