質問: ### 前提・実現したいこと jqueryで、特定のclass名を抽出+ページングをしたいと思っています。 例えば、下記のようなリストがある場合に、 「index.php?item=apple&page=2」 「index.php?item=apple&page=3」のような形で、 class名が「apple」のものを抽出して、そのappleだけで ページングする、というような形にしたいのです。 今は「apple」の抽出はできますが、ページングとのからみ方が分からずできておりません。 データ総数はliの数をカウント、 1ページに表示する数は3件です。 ``` サンプル 全て|りんご|レモン りんご レモン レモン りんご レモン レモン りんご りんご レモン レモン りんご りんご レモン レモン レモン ↓希望するページングの形 前へ|1|2|3|次へ ``` ↓希望するページングの形 前へ|1|2|3|次へ ### 発生している問題・エラーメッセージ ### 該当のソースコード ### 試したこと ### 補足情報(FW/ツールのバージョンなど) 初歩的な質問で申し訳ありませんが、アドバイスを頂けたら嬉しいです。 どうぞよろしくお願いいたします。
回答: 調整に多少時間がかかりましたが、ひとまずこんな感じ。 対応しやすくするため、少しhtmlも追加修正しています。 ページャーHTMLのところは表示の問題なのであとはご自身で調整してください。 ``` 全て| りんご| レモン りんご1 レモン1 レモン2 りんご2 レモン3 レモン4 りんご3 りんご4 レモン5 レモン6 りんご5 りんご6 レモン7 レモン8 レモン9 ``` ``` #pager .active{ color:red; } ``` ``` var item = "all";//現在の検索条件 var page_item_count = 3;//1ページ最大表示数 var page_num = 1;//ページ番号 $(function () { paging(); //検索絞り込み $("#item a").on("click",function(){ page_num = 1; item = $(this).data("item"); paging(); }); //ページ切り替え $(document).on("click","#pager li",function(){ page_num = $(this).data("page"); paging(); }); function display(){ //一度全て表示状態とする $(".list li").show(); if(item != "all"){ $(".list li").not('.'+item).hide(); } } function paging(){ display(); var paging = $("#pager"); paging.empty();//いったんページ番号を削除 var list_data = $(".list li:visible");//表示されている要素 var page_count = Math.ceil( list_data.length / page_item_count); //ページ数をカウント for(var i = 1;i <= page_count;i++){ var pg = $("",{"text":i,"data-page":i}) if(i == page_num){ pg.addClass("active"); } paging.append(pg); } //現在何件目がスタートか var start = ((page_num-1)*page_item_count); var end = start + page_item_count-1; for(var i = 0;i < list_data.length;i++){ if(start > i || end < i){ $(list_data[i]).hide(); //表示データ以外非表示に } } } }); ``` 決して効率がいいコードではないですが、参考まで。 ※1ページ最大表示数を変更したときの挙動もザッと確認済み 以下、蛇足。 「ページング機能」とは本来、表示させるデータが大量にあったときに 画面表示時の負荷軽減のために導入されているものです。 つまり、「ページを表示した後にページング用のデータを絞る」のでは 本来のページング機能の意味を成していないわけです。 データはhtmlに固定で表示されている要件からそうするしかないとはいえ、 そのことはご理解いただきたく。 PHPで行う場合もそうですが、通常は「表示する情報を絞り込んだデータ」を取得し、 1ページに表示したい件数だけを表示するようにします。 その「絞り込み」の条件をGETだったりPOSTだったりで渡して、 データベースなどそのデータが保存されている場所に対して、 「何件目から何件取得してきて」と問い合わせます。 「何件目から」は回答のJavaScriptコードでいえば「start」を決めている部分ですね。 ページャーのロジックとしてはPHPで書こうとJavaScriptで書こうと同じです(ある程度計算の仕方は違っても得るべき情報は同じ) 表示する際のデータはデータベースに置いて、前処理をPHPで行う場合に参考にしてみてください。 ※ネット上にもページングの考え方の記事はたくさんあるのでそちらも読んでみてください。