https://branduru.jp/search/js/jquery.pagination.js

1$.fn.pagination = function(config) {
2    // オプション
3    var o = $.extend({
4        pager        : $('.pager'),
5        prevText     : 'prev',
6        nextText     : 'next',
7        firstText    : 'first',
8        lastText     : 'last',
9        ellipsisText : '…',
10        viewNum      : 6,
11        pagerNum     : 3,
12        ellipsis     : true,
13        linkInvalid  : false,
14        goTop        : true,
15        firstLastNav : true,
16        prevNextNav  : true
17    }, config);
18
19    // セレクタ
20    var $element = $(this);
21    var $pager = o.pager;
22    if(o.ellipsis){
23        var $ellipsisFirst= $('<span class="ellipsis"/>').text(o.ellipsisText);
24        var $ellipsisLast= $('<span class="ellipsis"/>').text(o.ellipsisText);
25    }
26
27    // 値取得
28    var tatalItemNum =$element.length;
29    var tatalpageNum = Math.ceil(tatalItemNum /o.viewNum);
30    var ellipsisFlag = false;
31
32    // 変数設定
33    var currentIndex = 0;
34
35    // 省略記号フラグ判定
36    if(tatalpageNum > o.pagerNum) { ellipsisFlag = true;}
37
38    // ページャーの生成
39    for (var i=0; i < tatalpageNum; i++) {
40        $('<span/>').text(i + 1).appendTo($pager);
41    };
42    if(o.firstLastNav){
43        $('<span class="prev"/>').text(o.prevText).prependTo($pager);
44        $('<span class="next"/>').text(o.nextText).appendTo($pager);
45    }
46    if(o.prevNextNav){
47        $('<span class="first"/>').text(o.firstText).prependTo($pager);
48        $('<span class="last"/>').text(o.lastText).appendTo($pager);
49    }
50    var $pagerInner = $pager.find('span').not('.prev, .next, .first, .last');
51
52    // コンテンツの初期表示
53    $element.hide();
54    for (var i=0; i < o.viewNum; i++) {
55        $($element[i]).show();
56    };
57
58    // ページャーの初期表示
59    $pagerInner.hide();
60    for (var i=0; i < o.pagerNum; i++) {
61        $($pagerInner[i]).show();
62    };
63    $($pagerInner[0]).addClass('current');
64    if (o.linkInvalid) {
65        $('.prev').addClass('invalid');
66        $('.first').addClass('invalid');
67    }
68    if(o.ellipsis) {
69        if(ellipsisFlag){
70            if(tatalpageNum  - o.pagerNum > 1) {
71                $($pagerInner[tatalpageNum-1]).before(function() {
72                  return $ellipsisLast;
73                });
74            }
75            $($pagerInner[tatalpageNum-1]).show();
76        }
77    }
78
79    // 最初のボタンをクリック
80    $('.first').on('click', function(){
81        var current = 0;
82        if(currentIndex == 0){
83            if (o.linkInvalid) {
84                return false;
85            }
86        }
87        change(current);
88    });
89
90    // 最後のボタンをクリック
91    $('.last').on('click', function(){
92        var current = tatalpageNum - 1;
93        if(currentIndex == $pagerInner.length-1){
94            if (o.linkInvalid) {
95                return false;
96            }
97        }
98        change(current);
99    });
100
101    // 前のボタンをクリック
102    $('.prev').on('click', function(){
103        var current = currentIndex - 1;
104        if(currentIndex == 0){
105            if (o.linkInvalid) {
106                return false;
107            } else {
108                current = currentIndex;
109            }
110        }
111        change(current);
112    });
113
114    // 次のボタンをクリック
115    $('.next').on('click', function(){
116        var current = currentIndex + 1;
117        if(currentIndex == $pagerInner.length-1){
118            if (o.linkInvalid) {
119                return false;
120            } else {
121                current = currentIndex;
122            }
123        }
124        change(current);
125    });
126
127    // 番号をクリック
128    $pagerInner.each(function (current) {
129        $(this).on('click', function(){
130            if($(this).hasClass('current')){
131                if (o.linkInvalid) {
132                    return false;
133                }
134            }
135            change(current);
136        });
137    });
138
139    // 切り替え実行
140    var change = function (current) {
141        // コンテンツの表示
142        $element.hide();
143        for(var i = (current * o.viewNum) ; i < ((current + 1) * o.viewNum) ; i++){
144            $($element[i]).show();
145        }
146        // ページャーの表示
147        $pagerInner.hide();
148        if(o.ellipsis) {
149            if(ellipsisFlag){
150                $ellipsisFirst.remove();
151                $ellipsisLast.remove();
152            }
153        }
154        var num = current -1;
155        if(num > (tatalpageNum - o.pagerNum)){
156            num = tatalpageNum - o.pagerNum;
157        }
158        for(var i = num ; i < (num + o.pagerNum) ; i++){
159                $($pagerInner[i]).show();
160        };
161        // 省略記号の表示
162        if(o.ellipsis) {
163            if(ellipsisFlag){
164                // 前の省略記号
165                $($pagerInner[0]).show();
166                if(num > 1){
167                        $($pagerInner[0]).after(function() {
168                          return $ellipsisFirst;
169                        });
170                }
171                // 後ろの省略記号
172                if(num < (tatalpageNum - o.pagerNum -1)) {
173                    $($pagerInner[tatalpageNum -1]).before(function() {
174                      return $ellipsisLast;
175                    });
176                }
177                $($pagerInner[tatalpageNum -1]).show();
178            }
179        }
180        // 現在位置設定
181        currentIndex = current;
182        // デザイン
183        $pagerInner.removeClass('current');
184        $($pagerInner[current]).addClass('current');
185        if (o.linkInvalid) {
186            if(current == 0 ) {
187                $('.prev').addClass('invalid');
188                $('.first').addClass('invalid');
189            } else {
190                $('.prev').removeClass('invalid');
191                $('.first').removeClass('invalid');
192            }
193            if(current == tatalpageNum - 1 ) {
194                $('.next').addClass('invalid');
195                $('.last').addClass('invalid');
196            } else {
197                $('.next').removeClass('invalid');
198                $('.last').removeClass('invalid');
199            }
200        }
201        if(o.goTop){
202            $('html,body').scrollTop(0);
203        }
204    }
205}