リストを分割してページ送りで表示を切り替える

リストを分割して表示するために、現在jQueryを利用して次の様にしています。
これをjQueryではなく素のJavaScriptで実装しようとしているのですが、ページ送りを表示させる箇所などで躓いており行き詰まっています。
ページ送りを含めたこの先の実装もですが、全体的に見てもっとスマートなコードに書き直せる等もあればアドバイスを頂ける嬉しいです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
6</head>
7<body>
8
9<div id="parent">
10  <div>
11    <ul>
12      <li>item1</li>
13      <li>item2</li>
14      <li>item3</li>
15      <li>item4</li>
16    </ul>
17  </div>
18
19  <div>
20    <ul>
21      <li>item1</li>
22      <li>item2</li>
23      <li>item3</li>
24      <li>item4</li>
25      <li>item5</li>
26      <li>item6</li>
27    </ul>
28  </div>
29
30  <div>
31    <ul>
32      <li>item1</li>
33      <li>item2</li>
34      <li>item3</li>
35      <li>item4</li>
36      <li>item5</li>
37      <li>item6</li>
38      <li>item7</li>
39      <li>item8</li>
40    </ul>
41  </div>
42</div>
43
44</body>
45</html>

JavaScript
1// jQuery
2;( function ( $ ) {
3
4    $.fn.listsplit = function ( perPage ) {
5
6        return this.each( function () {
7
8            // 分割するリストの親要素
9            var $base = $( this );
10
11            // 分割するリスト
12            var $list = $base.find( 'ul' );
13
14            // 分割するリストアイテム
15            var $item = $list.find( 'li' );
16
17            // 分割するリストの長さ
18            var length = $item.length;
19
20            // 分割を開始する数
21            if( perPage ) {
22                var split = perPage; // 指定値
23            } else {
24                var split = 10; // 初期値
25            }
26
27            // リストアイテムが指定値より多い時に処理を開始
28            if( length > split ) {
29
30                // カウントを変数にセット
31                var i = 0;
32
33                // 指定値のグループに分割してクラスを追加
34                while( i < length ) {
35                    var group = i * split;
36                    var division = group + split;
37                    for( var z = group; z < division; z++ ) {
38                        $item.eq( z ).addClass( 'p-' + ( i + 1 ) );
39                    }
40                    i++;
41                }
42
43                // ページ送り
44                var last = Math.ceil( length / split );
45                var current = 1;
46                var pagenation = '<div class="list-pagenation">\n<span class="list-prev">prev</span>\n<span class="list-next">next</span>\n<span class="counter"><span class="current">' + current + '</span>/<span class="last">' + last + '</span></span>\n</div>\n';
47                $list.before( pagenation );
48                var $prev = $base.find( '.list-prev' );
49                var $next = $base.find( '.list-next' );
50                var $current = $base.find( '.current' );
51                var $last = $base.find( '.last' );
52                var $total = $base.find( '.total' );
53                $current.html( current );
54                $last.html( last );
55                $total.html( length );
56                $prev.addClass( 'disabled' );
57
58                // リスト表示の初期設定
59                $item.hide();
60                $base.find( '.p-1' ).show();
61
62                // 次へ
63                $next.on( 'click', function () {
64
65                    var page = $current.html();
66                    var setnums = Number( page ) + 1;
67
68                    if( setnums <= last ) {
69                    $prev.removeClass( 'disabled' );
70                        $current.html( setnums );
71                        $item.hide();
72                        $base.find( '.p-' + setnums ).stop( true, true ).fadeIn( 'fast' );
73                    }
74
75                    if( setnums == last ) {
76                        $next.addClass( 'disabled' );
77                    }
78
79                });
80
81                // 前へ
82                $prev.click( function () {
83
84                    var page = $current.html();
85                    var setnums = Number( page ) - 1;
86
87                    if( 1 <= setnums ) {
88                        $next.removeClass( 'disabled' );
89                        $current.html( setnums );
90                        $item.hide();
91                        $base.find( '.p-' + setnums ).stop( true, true ).fadeIn( 'fast' );
92                    }
93
94                    if( setnums == 1 ) {
95                        $prev.addClass( 'disabled' );
96                    }
97
98                });
99
100            }
101
102        });
103
104    };
105
106})( jQuery );
107
108$( function() {
109
110    $( '#parent' ).find( 'div' ).listsplit( 2 );
111
112});

JavaScriptによる実装の途中(随時更新)
表示・非表示はjQueryとは違って.hidden { display: none }というクラスを使って行う予定

JavaScript
1// Pure JavaScript
2function eq( index ) {
3    if( index >= 0 && index < this.length ) {
4        return this[index];
5    } else {
6        return -1;
7    }
8}
9
10function list_split( element ) {
11    'use strict';
12    // リストを取得
13    var list = element.getElementsByTagName( 'ul' );
14    // リストアイテムを取得
15    var item = list[0].getElementsByTagName( 'li' );
16    // リストアイテムの数を取得
17    var length = item.length;
18    // 分割を開始するリストアイテムの数
19    var split = 2;
20    // カウント
21    var i = 0;
22    // 指定したポジションの要素を代入するための変数
23    var index;
24
25    // 指定値のグループに分割してクラスを追加
26    while( i < length ) {
27        var group = i * split;
28        var division = group + split;
29        for( var z = group; z < division; z++ ) {
30            index = eq.call( item, z );
31            if ( typeof index === 'object' ) {
32                index.classList.add( 'p-' + ( i + 1 ) );
33            }
34        }
35        i++;
36    }
37
38    // 最後のページ
39    var last = Math.ceil( length / split );
40    // 現在のページ
41    var current = 1;
42
43    // ページ送り用のノードを作成
44    var pagenations = document.createDocumentFragment();
45
46    // ページ送りをノードに追加
47    var pagenation = document.createElement( 'div' );
48    pagenation.className = 'list-pagenation';
49    pagenations.appendChild( pagenation );
50
51    // 前へ戻るボタンをページ送りに追加
52    var page_prev = document.createElement( 'span' );
53    page_prev.className = 'list-prev';
54    page_prev.appendChild( document.createTextNode( 'Prev' ) );
55    pagenation.appendChild( page_prev );
56
57    // 次へ進むボタンをページ送りに追加
58    var page_next = document.createElement( 'span' );
59    page_next.className = 'list-next';
60    page_next.appendChild( document.createTextNode( 'Next' ) );
61    pagenation.appendChild( page_next );
62
63    // カウンターをノードに追加
64    var page_counter = document.createElement( 'span' );
65    page_counter.className = 'counter';
66    pagenations.appendChild( page_counter );
67
68    // 現在のページをカウンターに追加
69    var page_current = document.createElement( 'span' );
70    page_current.className = 'current';
71    page_current.appendChild( document.createTextNode( current ) );
72    page_counter.appendChild( page_current );
73
74    // ページ表示の区切りをカウンターに追加
75    var partition = document.createTextNode( '/' );
76    page_counter.appendChild( partition );
77
78    // 最後のページをカウンターに追加
79    var page_last = document.createElement( 'span' );
80    page_last.className = 'last';
81    page_last.appendChild( document.createTextNode( last ) );
82    page_counter.appendChild( page_last );
83
84    var list_parent = list[0].parentNode;
85    list_parent.insertBefore( pagenations, list[0] );
86
87    // 課題1: ページ送りを各リストの直前に挿入する
88    // 課題2: 変数 last の値を各リストと連動した形で反映させる
89}
90
91document.addEventListener( 'DOMContentLoaded', function () {
92
93    var parent = document.getElementById( 'parent' );
94    var target = parent.getElementsByTagName( 'div' );
95    var length = target.length;
96
97    for ( var i = 0; i < length; i++ ) {
98        list_split( target[i] );
99    }
100
101});

行動規範の内容に同意します

回答2件

ベストアンサー

teratail questions-16480 への回答 - JSFiddle にサンプルコードをUPしました。

おそらく、見慣れないと思われるのは WAI-ARIA の aria-hidden属性でしょうか。
element.classList の classList.contains を使用すると更にスマートに書けますが、対象ブラウザが不明だったので一応、IE9 を基準としました。Polyfill を書くなら classList の方がベターだと思います。

(2015/09/20 10:25追記)
classList.contains を使用したコードをUPしました。IE9 用に className による代替コードも加えている為、IE9+ で動作します。

teratail questions-16480 への回答 - JSFiddle

(2015/09/20 10:31追記)
className による代替コードが不完全だったのを修正しました。

teratail questions-16480 への回答 - JSFiddle

(3015/09/21 07:38追記)
pagesize で element.children.length を割り切れなかった場合に TypeError で強制終了する不具合を修正しました。

teratail questions-16480 への回答 - JSFiddle

投稿2015/09/19 14:11

編集2015/09/20 22:38

think49

総合スコア18196

flat

2015/09/19 15:15 編集

素晴らしいサンプルコードを作成して下さり感謝致します。まだ理解出来ない点も多いですが、サンプルコードを読み解きながら勉強させて頂きます。またIEに関してですが、少なくとも個人的に運営するウェブサイトであればもうIE10以下は無視して良いのではないかと思っていますので、よろしければelement.classListを利用したコードも見てみたいです。

think49

2015/09/20 01:27

classList.contains は決して難しくない為、ご自身で改造する事を期待していたのですが、何か躓くポイントがあったでしょうか。親コメントに追記しました。

flat

2015/09/20 11:10

すみません、純粋に比較して見てみたいと安易にお願いしてしまいました。出来そうな事はまず自分でやってみないと身に付かないですよね…。ありがとうございます。また、追記して下さった回答にも心から感謝致します。

flat

2015/09/20 16:22

item9まであるリストのdata-pagesizeの値を2にすると、カウントとページ送りの動作がおかしくなってしまうのですが、どう修正したら良いのか分かりません…。

think49

2015/09/20 22:41

確かに pagesize で割り切れない場合を考慮していなかったですね。コンソールを見ればどこでエラーが発生しているのがわかり、問題を特定しやすいと思います。修正して親コメントに追記しました。

flat

2015/09/21 00:52

修正して下さりありがとうございます。 Math.minを使うだけで解決するのですね。コンソールでエラーは見ていたのですが、私にはまだ基礎知識が足りないみたいです…。もっとリファレンスを覚えて基礎をしっかりと身につけていこうと思います。

行動規範の内容に同意します

list.js というライブラリーをつかってみてはどうでしょう？

http://www.listjs.com/examples/pagination

私はつかったことがありませんが、他のライブラリーも紹介します。

その他：

jQueryでページ分割ができる「SimplePaginationプラグイン」 http://www.koikikukan.com/archives/2014/12/17-013333.php
テーブルの表組みにページネーションをつけるJavaScript「Table Pagination」 http://www.skuare.net/test/jtablePagination.html
テーブルに検索、ソート、ページネーション機能をもたせるDATATABLESプラグインhttp://endoyuta.com/2014/11/13/datatables/

投稿2015/09/20 22:11