- 締切済み
Ajaxでの、任意の件数でページ送りをするには？
<ul>で定義したリスト項目を、任意の件数で区切ってページ送りを実装しようと思っています。 <li>が50件くらいあって、それをn件ずつ実体を表示し、 1ページ目、2ページ目……とリンクを作ってページを切り替える。 表示件数nはユーザーには選ばせず、制作側がきめた件数で固定。 このような動作を実装するのに参考になるサイト、サンプルなど ありましたら、ご教示いただければと思います。 よろしくお願いします。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- hrm_mmm
- ベストアンサー率63% (292/459)
＞【１】liにすでに任意のclassがある場合、そのclassに影響を与えないようにclassshow/classhideを付加することは可能ですか 可能です。class 属性値は、ブランクで区切って複数指定できます。 しかし、完全すげ替え＆表示する時は同じstyle適用としか考えていなかったので、初回追加は簡単ですが、２回目以降の置き換える時は、工夫が必要です。jQueryになにかユーティリティ的関数があったかもしれませんがよく知らないので、style.display の値だけの変更なら、スタイルシートのクラスは作らず、直接操作した方が早いかもしれません。 変更前１ global 変数 var classshow = 'showblock'; // 表示用css class名 var classhide = 'hidenone'; // 非表示用css class名 ↓ 変更後１ display に設定する値に変更 var classshow = 'block'; // 表示用display値 var classhide = 'none'; // 非表示用display値 変更前２ className 設定箇所３カ所 listcolection.item(i).className = classhide; ↓ 変更後２ className をstyle.displayにするだけ listcolection.item(i).style.display = classhide; ＞【２】ナビ用リンクを動的に生成することは可能ですか？ 可能です。 document.createElement を駆使して、親要素へappendChildするか、tagを書き出した文字列を作って、innerHTMLで親要素内を置き換えるか、のどちらかでできます。 初心者向けには、前回提示のdiv id="navi" 内部のhtmlソースを、innerHTMLで書き込むのが手っ取り早いかと。 また、ナビ用リンクの<a>のクラス変更は、showlist(num)とほぼ同じ考え方で作れます。
- hrm_mmm
- ベストアンサー率63% (292/459)
すべてのli要素は既に、html内にあるのですよね？ であれば、サーバーと通信しなくても、JavaScriptとスタイルシートを駆使すれば出来そうですが。 とりあえず、JavaScriptがoffの時も、ページの途中へジャンプ出来るように先にナビ用リンクを作っておくことにして、JavaScriptがonの時に、必要部分のみ表示するよう切り替えるものを作ってみました。 <html lang="ja"> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> .showblock{ display:block;} .hidenone{ display:none;} </style> <script type="text/javascript"> var n = 10; // １頁表示件数 var listid = 'menu'; // pagingしたいulまたはol のid var classshow = 'showblock'; // 表示用css class名 var classhide = 'hidenone'; // 非表示用css class名 //@cc_on // 条件コンパイルの開始 window./*@if (@_jscript) attachEvent( 'on'+ @else@*/ addEventListener( /*@end@*/ 'load', function (){ showlist(0); }, false ); function showlist(num){ var listdata = document.getElementById(listid); var listcolection = listdata.getElementsByTagName('li'); var m = listcolection.length; var start = num * n ; // paging用 num は０開始とする var end = start+n; if( end > m ){ end = m; } var i; for(i=0; i<start; i++){ listcolection.item(i).className = classhide; } for(i=start; i<end; i++){ listcolection.item(i).className = classshow; } for(i=end; i<m; i++){ listcolection.item(i).className = classhide; } } </script> </head> <body> <div id="navi"> <a href="#m0" onclick="showlist(0);return false;">page 1</a>| <a href="#m10" onclick="showlist(1);return false;">page 2</a> |以降略 </div> <ul id="menu"><li id="m0">00</li> <li id="m1">xx </li> <!-- 中略 --> <li id="m50">zz </li> </ul> </body> </html> 上記のhtml記述はいい加減なので、適宜DOCTYPE宣言にあわせて記述して下さい。
補足
希望の動作をほぼかなえることができました。 ここまで詳しく書いていただけるとは思っていなかったので、 ざっくりとした内容しか書かなかったのですが、とてもたすかりました。 少ない情報の中でここまで書いてくださって、ありがとうございます！ li要素はhtml内にあります。 li内に画像があるので、若干重さが気にはなるのですが、 閲覧者はすべてのデータを見ることがほとんど、という内容のサイトなので、 ページのファイルサイズが大きくなっても最終的にはOK、 という判断ですべてhtml内に記述しています。 追加で質問をさせていただきたいのですが、 【１】 liにすでに任意のclassがある場合、そのclassに影響を与えないように classshow/classhideを付加することは可能ですか？ 【２】 ナビ用リンクを動的に生成することは可能ですか？ 更新頻度が高く、かつナビ用リンクを手動で手入れするのが難しいので、 動的にページリンクを生成できればよいな、と。 jsをoffにした時にジャンプできるのはとても親切だと思いました！ が、他のコンテンツの都合でjsが使える環境を前提としています（jQueryも使用） ちなみに、li要素はリストの末尾ではなく先頭に追加更新していく予定です。 末尾であれば、liにidを追加して、数回に一度ナビリンクを増やすだけでよかったのですが… また、 ナビ用リンクの<a>に、現在どのページを表示中かわかるように classを動的につけようと思っています。 もしご面倒でなければ、上記はどのように修正したらいいか、 ヒントなどいただければうれしいです。 どうぞよろしくお願いします！