<li>タグの数が増えすぎたので「次の10件」のような項目を作りたい場合

現在、サイトの一部ではこのようなつくりになっています。
--------------------------
<ul>
<li>最新の情報</li>
<li>2番目の情報</li>
<li>3番目の情報</li>
<li>4番目の情報</li>
・
・
・
<li>20番目の情報</li>
</ul>
--------------------------
これを、表示させるのを「最新の10件」のみにして、その下部に>>次の10件（<<前の10件）のようなリンクを自動生成する場合、どのような作りがスムーズでしょうか？（JQueryあたりで可能でしょうか）

質問者からの補足コメント

• ご回答有難うございます。
  ちょうど、投稿前に色々と調べてjavascriptで最新の10件を表示させる所までは可能だったのですが
  それだと残りの件数の情報が見られないので悩んでいました（ユーザーによっては全件見せたい場合あり）。
  <li>タグが11件以上になった場合に限り「次の10件」または「全件表示させる」というリンクを要素の下部に生成させたいのですが、その際でもjavascriptのみで実現可能なものでしょうか？

  No.1の回答に寄せられた補足コメントです。 補足日時：2015/05/19 12:59

No.2 ベストアンサー 回答者： Ogre7077 回答日時： 2015/05/19 17:11

項目数がそう多くないのならば、スクリプトだけで表示を制御するのが、一番スムーズだと思います。

以下サンプルです。

<nav class=menu data-menu-pagesize=10>
<ul> <li> 1 <li> 2 <li> 3 <li> 4 <li> 5 <li> 6 <li> 7 <li> 8 <li> 9 <li> 10 <li> 11 ... </ul>
</nav>
<!-- HTML5 / 初期は最新10件のみ表示 / 必要なら前後リンクを自動生成 -->
<script>addEventListener('DOMContentLoaded',function(ev){_=0;
function A(a){return Array.prototype.slice.apply(a)}
function styleMenu(nav, delta) {
_ ; function makeAnchor(txt, cmd) {
_ , _ ; var e = document.createElement('a');
_ , _ ; e.textContent = txt;
_ , _ ; e.href = cmd;
_ , _ ; e.addEventListener('click', function clicker(ev) {
_ , _ , _ ; var cmd = ev.target.getAttribute('href'), nav = ev.target.parentNode;
_ , _ , _ ; if (cmd == '#menuPrev') ev.preventDefault(), styleMenu(nav, -1);
_ , _ , _ ; if (cmd == '#menuNext') ev.preventDefault(), styleMenu(nav, +1);
_ , _ ; }, false);
_ , _ ; return e;
_ ; }
_ ; var num = parseInt(nav.dataset.menuPagesize); if (!num) num = 10;
_ ; var index = delta + parseInt(nav.dataset.menuIndex); if (!index || index < 0) index = 0;
_ ; var items = A(nav.querySelectorAll('ul > li'));
_ ; var a = index * num, b = a + num, c = items.length;
_ ; items.forEach(function(li, i){ li.style.display = (a <= i && i < b)? 'list-item': 'none' });
_ ; A(nav.querySelectorAll('a')).forEach(function(e){e.parentNode.removeChild(e)});
_ ; if (0 < a) nav.appendChild( makeAnchor('前の'+num+'件', '#menuPrev') );
_ ; if (b < c) nav.appendChild( makeAnchor('次の'+num+'件', '#menuNext') );
_ ; nav.dataset.menuIndex = index;
}
A(document.querySelectorAll('nav.menu')).forEach(function(nav){styleMenu(nav, 0)});
},false)</script>

この回答へのお礼

ソースまで書いてくださり、有難うございます！
希望通りの形になりました。助かりました。

お礼日時：2015/05/19 19:49

No.1 回答者： yambejp 回答日時： 2015/05/19 12:23

liのデータを全部読みこんでから表示したい部分だけ見せるのであればjavascriptで十分です

そうではなくサーバーからデータを取ってくるのも避けたいのであれば
phpなどなんらかのサーバーサイドのプログラムを利用することになります。
なお後者の方が無駄なデータのやり取りがなく効率的です。

また折衷案としてajaxで必要に応じて非同期でデータをとってくるのも
ユーザビリティが高くなります