jquery　リストからデータ抽出+ページングをしたい

回答率: 85.48%

質問するログイン新規登録

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

新規登録して質問してみよう

ただいま回答率: 85.48%

トップ jQueryに関する質問

Q&A

解決済

1回答

1226閲覧

jquery　リストからデータ抽出+ページングをしたい

総合スコア9

0グッド

0クリップ

投稿2018/11/19 02:09

編集2018/11/19 03:48

0

0

前提・実現したいこと

jqueryで、特定のclass名を抽出+ページングをしたいと思っています。

例えば、下記のようなリストがある場合に、
「index.php?item=apple&page=2」
「index.php?item=apple&page=3」のような形で、
class名が「apple」のものを抽出して、そのappleだけで
ページングする、というような形にしたいのです。

今は「apple」の抽出はできますが、ページングとのからみ方が分からずできておりません。

データ総数はliの数をカウント、
1ページに表示する数は3件です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function () {
  var item = decodeURIComponent(location.search.match(/item=(.*?)(&|$)/)[1]);

  if ( item == "all" || item == "") {
      $("ul.list li").css("display","block");
  } else {
      $("ul.list li." + item).siblings("li").css("display","none");
      $("ul.list li." + item).css("display","block");
  }
});
</script>
</head>
<body>

<p><a href="?item=all">全て</a>｜<a href="?item=apple">りんご</a>｜<a href="?item=lemon">レモン</a></p>

<ul class="list">
<li class="apple">りんご</li>
<li class="lemon">レモン</li>
<li class="lemon">レモン</li>
<li class="apple">りんご</li>
<li class="lemon">レモン</li>
<li class="lemon">レモン</li>
<li class="apple">りんご</li>
<li class="apple">りんご</li>
<li class="lemon">レモン</li>
<li class="lemon">レモン</li>
<li class="apple">りんご</li>
<li class="apple">りんご</li>
<li class="lemon">レモン</li>
<li class="lemon">レモン</li>
<li class="lemon">レモン</li>
</ul>

<hr>
↓希望するページングの形

前へ｜1｜2｜3｜次へ

</body>
</html>

↓希望するページングの形

前へ｜1｜2｜3｜次へ

発生している問題・エラーメッセージ

該当のソースコード

試したこと

補足情報（FW/ツールのバージョンなど）

初歩的な質問で申し訳ありませんが、アドバイスを頂けたら嬉しいです。
どうぞよろしくお願いいたします。

2018/11/19 02:13

データは何で管理していますか？RDB、PHP内の配列（変数）、JSON、CSV、HTML or その他

2018/11/19 02:13

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

2018/11/19 02:17

ご指摘ありがとうございます。コードブロックを修正しました。

2018/11/19 02:18

リストのデータはHTMLになります。

2018/11/19 02:23

formのmethodのそれぞれについては試してみました？

2018/11/19 02:24

htmlはデータではなくデータを表示するための手段です。どこからデータを取得させる予定ですか？

2018/11/19 02:26

formのmethodでは試していません。

2018/11/19 02:31 編集

説明が分かりにくく申し訳ありません。 htmlのulタグで書かれている、質問文のようなliのリストがすでにあります。その一覧に対して、抽出+ページングしたいと思っています。

2018/11/19 02:33

そのリストは固定で書かれていますか？phpでループさせて書かれていますか？JavaScriptからAjaxでPHPを呼び出してデータを取得して表示されていますか？ひとえに「一覧」といっても様々な形があります。そのulのリストも含めてコードをご提示ください。場合によりGET関係なくJavaScirptだけでできることもありますし、PHPである必要がないかもしれません。というかページングしたいのであればやはり「データが何件あるか」の元になったデータがないといけないはずなので「リストと元になるデータはhtmlです」とはならないと思います。ページングのページ数を計算する元となる全データ数・1ページに表示するデータ件数　などが必要です。

2018/11/19 02:45 編集

リストは固定です。質問文のulのリストの形そのままのごく普通のhtmlのulタグで書かれているリストです。どこかからデータを取得したり出力しているわけではなく、必要に応じて手動でliを追加して記述するような形になっています。（めったにliは追加されないため） 1ページに表示するデータ件数「3件」、 liの総データ数は「PHPでカウント」というイメージです。

2018/11/19 02:47 編集

htmlの個数をPHPでカウントってスクレイピングなどしない限り無理ですよ。PHPで処理した結果を表示させるのでhtmlは後で出来上がります。リスト固定ならJavaScriptだけで実現することになります。PHPで実現したいのであればデータはデータベースなど別の場所に持っているのがおおよその前提です。

2018/11/19 02:54 編集

ということは、javascriptでliの総数を取得しておいて、その値をphpに渡し、データ抽出+ページングをする、という流れでしょうか？勝手にphpじゃないとできないと思いこんでいたのですが、jsだけでも全て可能なのでしょうか？

2018/11/19 02:55 編集

いえ、一切PHPは介在しません。「その値をPHPに渡し」をしてもあまり意味がないですね。そのタイミングだとAjaxでしかPHPに情報渡せませんが、ページングの計算だけならJavaScriptだけでできます。

2018/11/19 02:57

そうだったのですね・・・ご指摘ありがとうございます！質問ばかりで恐縮ですが、javascriptでの記述をアドバイス頂けないでしょうか？

2018/11/19 02:58

jqueryで「apple」だけの抽出はできますが、ページングの方ができず困っております。

2018/11/19 03:00

ひとまず現在のコードを追記いただけますか？あと要件が「PHPではなくなっている」ので質問内容を調整してください。※整理すために一度クローズしてもよいです

2018/11/19 03:03

どうもありがとうございます。質問内容を変更してコードをアップさせて頂きますので少々お待ちください。

2018/11/19 03:11

質問とコードを修正しました。どうぞよろしくお願いいたします。

2018/11/19 04:31

これなんですが、画面遷移を伴わない形でも問題ないですか？それとも必ずQuery文字列使う仕様ですか？

2018/11/19 04:35

画面遷移は伴わなくても大丈夫です。「?item=apple」の形は必須ですが、「&page=2」の文字列は必須ではないです。ページングさえできれば問題ないです。

2018/11/19 04:52

んー。どっちかに統一しないと作りが煩雑になるんですよね。リスト固定でJavaScriptのみで行うのでしたらquery文字列利用はあまりメリットがないですね。data属性に値セットして取得するだけにするとか、そのような作りを想定していました

2018/11/19 06:10 編集

すみません。私の知識不足で余計にややこしくしてしまっているかもしれません。jquery文字列も不要にします。data属性に値セットで良いので、mts10806様の良いと思われるやり方でアドバイスをお願いできないでしょうか？お手数お掛けして申し訳ありません。

2018/11/19 06:02 編集

「appleの一覧を抽出できる」「抽出した一覧でページングできる」この2点だけクリアできればどのようなやり方でも大丈夫ですので、アドバイス頂けたら嬉しいです。どうぞよろしくお願いいたします。

2018/11/19 06:16

細かいですがjquery文字列ではなくQuery文字列です。クエリストリングですね。ちょっと調整してみますので少々お待ちを（たぶんそれなりのコード量になります）

2018/11/19 06:19

「jquery文字列」ご指摘ありがとうございます！お恥ずかしい。。コードの件、どうぞよろしくお願いいたします。

2018/11/19 08:10

回答しました。後学のために注意いただきたいのですが「初歩的なこと」というのはあまり含めないほうが良いです。「そう判断できるんなら自分で解決できるんでは？」と疑問に持たれることもありますし、基本的に初歩的かどうか判断するのは自身ではなく周囲です。（もちろん「こんな初歩的なこともわからないのか」のような態度で接する回答者はほとんどいませんが）

2018/11/19 10:40

「初歩的なこと」確かにそうですね！今後、質問をする際の参考にさせて頂きます。いろいろとご指導ありがとうございます！

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

回答1件

0

ベストアンサー

調整に多少時間がかかりましたが、ひとまずこんな感じ。
対応しやすくするため、少しhtmlも追加修正しています。
ページャーHTMLのところは表示の問題なのであとはご自身で調整してください。

html
1<p id="item">
2    <a data-item="all">全て</a>｜
3    <a data-item="apple">りんご</a>｜
4    <a data-item="lemon">レモン</a>
5</p>
6
7<ul class="list">
8    <li class="apple">りんご1</li>
9    <li class="lemon">レモン1</li>
10    <li class="lemon">レモン2</li>
11    <li class="apple">りんご2</li>
12    <li class="lemon">レモン3</li>
13    <li class="lemon">レモン4</li>
14    <li class="apple">りんご3</li>
15    <li class="apple">りんご4</li>
16    <li class="lemon">レモン5</li>
17    <li class="lemon">レモン6</li>
18    <li class="apple">りんご5</li>
19    <li class="apple">りんご6</li>
20    <li class="lemon">レモン7</li>
21    <li class="lemon">レモン8</li>
22    <li class="lemon">レモン9</li>
23</ul>
24
25<hr>
26<ul id="pager">
27</ul>

css
1    #pager .active{
2        color:red;
3    }

js
1var item = "all";//現在の検索条件
2var page_item_count = 3;//1ページ最大表示数
3var page_num = 1;//ページ番号
4$(function () {
5    paging();
6    //検索絞り込み
7    $("#item a").on("click",function(){
8        page_num = 1;
9        item = $(this).data("item");
10        paging();
11    });
12    //ページ切り替え
13    $(document).on("click","#pager li",function(){
14        page_num = $(this).data("page");
15        paging();
16    });
17    function display(){
18        //一度全て表示状態とする
19        $(".list li").show();
20        if(item != "all"){
21            $(".list li").not('.'+item).hide();
22        }
23    }
24    
25    function paging(){
26        display();
27        var paging = $("#pager");
28        paging.empty();//いったんページ番号を削除
29        var list_data = $(".list li:visible");//表示されている要素
30        var page_count = Math.ceil( list_data.length / page_item_count); //ページ数をカウント
31        for(var i = 1;i <= page_count;i++){
32            var pg = $("<li></li>",{"text":i,"data-page":i})
33            if(i == page_num){
34                pg.addClass("active");
35            }
36            paging.append(pg);
37        }
38        
39        //現在何件目がスタートか
40        var start = ((page_num-1)*page_item_count);
41        var end = start + page_item_count-1;
42        for(var i = 0;i < list_data.length;i++){
43            if(start > i || end < i){
44                $(list_data[i]).hide(); //表示データ以外非表示に
45            }
46        }
47    }
48    
49});
50

決して効率がいいコードではないですが、参考まで。
※1ページ最大表示数を変更したときの挙動もザッと確認済み

以下、蛇足。

「ページング機能」とは本来、表示させるデータが大量にあったときに
画面表示時の負荷軽減のために導入されているものです。
つまり、「ページを表示した後にページング用のデータを絞る」のでは
本来のページング機能の意味を成していないわけです。
データはhtmlに固定で表示されている要件からそうするしかないとはいえ、
そのことはご理解いただきたく。

PHPで行う場合もそうですが、通常は「表示する情報を絞り込んだデータ」を取得し、
1ページに表示したい件数だけを表示するようにします。
その「絞り込み」の条件をGETだったりPOSTだったりで渡して、
データベースなどそのデータが保存されている場所に対して、
「何件目から何件取得してきて」と問い合わせます。

「何件目から」は回答のJavaScriptコードでいえば「start」を決めている部分ですね。

ページャーのロジックとしてはPHPで書こうとJavaScriptで書こうと同じです（ある程度計算の仕方は違っても得るべき情報は同じ）
表示する際のデータはデータベースに置いて、前処理をPHPで行う場合に参考にしてみてください。
※ネット上にもページングの考え方の記事はたくさんあるのでそちらも読んでみてください。

投稿2018/11/19 08:07

編集2018/11/19 10:24

総合スコア80850

2018/11/19 08:43 編集

ご丁寧な解説まで、どうもありがとうございます！書いていただいたコードを試してみたのですが、 Error: Syntax error, unrecognized expression: .[object HTMLParagraphElement]が出て動作しないようでした。どの部分を直したら良いのでしょうか？聞いてばかりで大変恐縮なのですが、どうぞよろしくお願いいたします。

2018/11/19 08:44

私の方では確認できないのですがどこで出ていますか？

2018/11/19 08:45

元のJavaScriptのコードとは互換性確認してないので残ってたらそこが原因にはなり得ますが

2018/11/19 08:52

どこかわからないので、いまの状態を丸ごと記述します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>サンプル</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript"> 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 = $("<li></li>",{"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(); //表示データ以外非表示に } } } }); </script> <style> #pager .active{ color:red; } </style> </head> <body> <p id="item"> <a data-item="all">全て</a>｜ <a data-item="apple">りんご</a>｜ <a data-item="lemon">レモン</a> </p> <ul class="list"> <li class="apple">りんご1</li> <li class="lemon">レモン1</li> <li class="lemon">レモン2</li> <li class="apple">りんご2</li> <li class="lemon">レモン3</li> <li class="lemon">レモン4</li> <li class="apple">りんご3</li> <li class="apple">りんご4</li> <li class="lemon">レモン5</li> <li class="lemon">レモン6</li> <li class="apple">りんご5</li> <li class="apple">りんご6</li> <li class="lemon">レモン7</li> <li class="lemon">レモン8</li> <li class="lemon">レモン9</li> </ul> <hr> <ul id="pager"> </ul> </body> </html>

2018/11/19 08:56

デベロッパーツールで確認されたなら何行目か書いてませんか？ひとまず<script>~</script>を </body> の直前に持ってきてみてください

2018/11/19 09:10 編集

</body>の直前にもってきた状態で、デベロッパーツールで確認したものが下記です。 Error: Syntax error, unrecognized expression: .[object HTMLParagraphElement] jquery.min.js:2:12733 Error: Syntax error, unrecognized expression: .[object HTMLParagraphElement] jquery.min.js:2:12733 t</fa.error http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:12733 t</fa.tokenize http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:18783 t</fa.compile http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:21417 t</fa.select http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:22125 fa http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:7320 t</fa.matches http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:12062 n.filter http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:23848 z http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:23647 not http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:24315 display http://hoge.com/index.php:69:27 paging http://hoge.com/index.php:74:9 <匿名関数> http://hoge.com/index.php:53:5 i http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:27444 fireWith http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:28213 ready http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:30004 K http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:30366

2018/11/19 09:27

コード自体のエラーではなくjQueryのエラーですね。動作確認はどのようにしていますか？ Webサーバー上でしょうか？ブラウザにドロップでしょうか

2018/11/19 09:31

webサーバー上にアップしています。

2018/11/19 09:38

ひとまず読み込み記述を//ではなくhttps://にかえてみてください。

2018/11/19 09:48

https://に変えて、確認用に下記にアップしてみました。 http://ying.chu.jp/index.php

2018/11/19 10:02

To: mts10806さん変数itemがvar（let,const）されていないので、id="item"の要素が取得され、そこでエラーになっています。 https://jsfiddle.net/0h7gs1tq/

2018/11/19 10:21

あ、ごめんなさいよく見たらローカル変数定義部分を転記し忘れてました… ちょっと後程転記しなおします。

2018/11/19 10:26

確認したら転記漏れではなくてコードブロックの言語名のところに入り込んでました。大変失礼しました。修正しました

2018/11/19 10:27

kei344さん、見て下さってどうもありがとうございます。 mts10806さん、お手数お掛けしてしまって申し訳ありませんが、どうぞよろしくお願いいたします。

2018/11/19 10:34

修正して頂いたコードで動作しました！どうもありがとうございます。

2018/11/19 10:37

長い時間お付き合い頂いて感謝の気持ちでいっぱいです。とても助かりました。どうもありがとうございました！

2018/11/19 10:54

解決されたようで何よりです。これはあくまで1つのやり方ですし、大事なのは「ページングを適切に使うこと」なので、蛇足部分もきちんとご理解いただければと思います。

2018/11/19 12:23

はい。蛇足として書いて頂いた分も含め、ちゃんと仕組みを理解して、今後にも活かせるようにしっかり勉強させて頂こうと思います。どうもありがとうございます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

関連した質問

トップ jQueryに関する質問

jquery　リストからデータ抽出+ページングをしたい

関連した質問

同じタグがついた質問を見る

運営からのお知らせ

【サポート業務のお知らせ】ゴールデンウィーク休業につき下記の日程で、お問い合わせ等のサポート業務をお休みいたします。 2024/04/27(土)~2024/04/29(月) 2024/05/03(金)〜2024/05/06(月) なお期間中もサポートへのお問い合わせは受け付けております。

【重要なお知らせ】いつもteratailをご利用いただきありがとうございます。現在、認証システムの修正により、一部のユーザーが強制的にログアウトされる可能性がございます。お手数おかけしますが、再度ログインを行なっていただきますよう宜しくお願いいたします。ご不便をおかけし申し訳ございません。

過去のお知らせを見る