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

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

ただいまの
回答率

90.38%

  • JavaScript

    21523questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    8556questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Bootstrap

    1380questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Datatablesの絞り込み機能をデータ全体に適用したいのですが。

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 132

harusyoui

score 25

絞り込みを行うと現在表示されてるデータにしか適用されず、
次のページにいったり表示件数を変更すると絞りこめていません、
上に書いてあるフィルターで下に書いてあるJs側で絞り込みを行う際に適用する範囲を
どう指定すれば上手くいくのでしょうか?宜しくお願いします。

該当のソースコード

    <script src="src/table2csv.js"></script>

    <div class="row">

        <div class="col-xs-12">
            <div class="box body">

                <div class="col-lg-2">
                    ブランド<br>
                    <select id="brand-select" class="form-control" style="height: 35px; width: 200px;">
                        <option value="">全部</option>
                        @foreach ($kouho_brands as $kouho_brand)
                            <option value='{{ $kouho_brand }}'>{{ $kouho_brand }}</option>
                        @endforeach
                    </select>
                    シーズン<br>
                    <select id="season-select" class="form-control" style="height: 35px; width: 200px;">
                        <option value="">全部</option>
                        <option value='春'>春</option>
                        <option value='夏'>夏</option>
                        <option value='秋'>秋</option>
                        <option value='冬'>冬</option>
                    </select>
                </div>

                <div class="col-lg-offset-1 col-lg-2">
                    カラー<br>
                    <select id="color-select" class="form-control" style="height: 35px; width: 200px;">
                        <option value="">全部</option>
                        @foreach ($kouho_colors as $kouho_color)
                            <option value='{{ $kouho_color }}'>{{ $kouho_color }}</option>
                        @endforeach
                    </select>
                    サイズ<br>
                    <select id="size-select" class="form-control" style="height: 35px; width: 200px;">
                        <option value="">全部</option>
                        <option value='S'>S</option>
                        <option value='M'>M</option>
                        <option value='L'>L</option>
                        <option value='Free'>Free</option>
                    </select>
                </div>

                <div class="col-lg-offset-1 col-lg-2">
                    損益分岐<br>
                    <select id="bunki-select" class="form-control" style="height: 35px; width: 200px;">
                        <option value="">全部</option>
                        <option value='完売'>完売</option>
                        <option value='達成'>達成</option>
                        <option value='未達'>未達成</option>
                    </select>
                    セール<br>
                    <input id="checkbox_24" type="checkbox" value="セール中"><label for="checkbox">セール中</label>
                </div>

                <div class="col-lg-offset-1 col-lg-2">
                    在庫数(入力された数値以下)<br>
                    <input id="numberbox" type="number" name="sample">
                </div>

                <div class="col-lg-12">
                    カテゴリー<br>
                    <input id="checkbox_1" type="checkbox" value="トップス" checked><label for="checkbox">トップス</label>
                    <input id="checkbox_2" type="checkbox" value="ジャケット/アウター" checked><label for="checkbox">ジャケット/アウター</label>
                </div>

                <div id="example2_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
                    <div class="row">
                        <div class="col-sm-12">
                            <table id="table" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info">
                                table部分
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 絞り込みのスクリプト -->
    <script>

        $('#downloadCsvBtn').click(function () {
            // ファイル名の定義(table.csv)
            $("#table").table2csv({ filename:  'table.csv' });
            // CSV出力
            $("#table").table2csv();
        })

        jQuery(function ($) {
            // セレクトボックスが変更されたら処理をする
            $('#brand-select, #season-select, #color-select, #size-select, #bunki-select, #checkbox_1, #checkbox_2, #checkbox_24, #numberbox').change(function () {

                // 選択した値を取得
                var select_val_brand = $('#brand-select  option:selected').val();
                var select_val_season = $('#season-select  option:selected').val();
                var select_val_color = $('#color-select  option:selected').val();
                var select_val_size = $('#size-select  option:selected').val();
                var select_val_bunki = $('#bunki-select option:selected').val();
                var check_val_1 = $('#checkbox_1:checked').val();
                var check_val_2 = $('#checkbox_2:checked').val();
                var check_val_24 = $('#checkbox_24:checked').val();
                var number = $('#numberbox').val();

                // tbodyのtr数回 処理をする
                $.each($("#table tbody tr"), function (index, element) {

                    // 選択した値がともに空欄だったら、全ての行を表示する為の処理
                    if  (select_val_brand == "" && select_val_season == "" && select_val_color == "" && select_val_size == "" && select_val_bunki == "" && 
                        check_val_1 != undefined && check_val_2 != undefined && check_val_24 == undefined && number == "") 
                        {
                            $(element).css("display", "table-row");
                            return true; // 次のtrへ
                        }

                    // 1行をテキストとして取り出し、セレクトボックスで選択した値があるかをチェック
                    var row_text_brand = $(element).children('td').eq(2).text();
                    var row_text_season = $(element).children('td').eq(4).text();
                    var row_text_color = $(element).children('td').eq(5).text();
                    var row_text_size = $(element).children('td').eq(6).text();
                    var row_text_bunki = $(element).children('td').eq(11).text();
                    var row_text_category = $(element).children('td').eq(3).text();
                    var row_text_sale = $(element).children('td').eq(10).text();
                    var row_text_stock = $(element).children('td').eq(9).text();

                    // フラグをfalseで初期化
                    var is_val_brand_match = false;
                    var is_val_season_match = false;
                    var is_val_color_match = false;
                    var is_val_size_match = false;
                    var is_val_bunki_match = false;
                    var is_val_category_match = false;
                    var is_val_sale_match = false;
                    var is_val_stock_match = false;

                    // ブランドの値が空欄、もしくは、値が存在するか?
                    if (  select_val_brand == "" || row_text_brand.indexOf(select_val_brand) != -1 ) {
                        is_val_brand_match = true;
                    }

                    // シーズンの値が空欄、もしくは、値が存在するか?
                    if (  select_val_season == "" || row_text_season.indexOf(select_val_season) != -1 ) {
                        is_val_season_match = true;
                    }

                    // カラーの値が空欄、もしくは、値が存在するか?
                    if (  select_val_color == "" || row_text_color.indexOf(select_val_color) != -1 ) {
                        is_val_color_match = true;
                    }

                    // サイズの値が空欄、もしくは、値が存在するか?
                    if (  select_val_size == "" || row_text_size.indexOf(select_val_size) != -1 ) {
                        is_val_size_match = true;
                    }

                    // 分岐の値が空欄、もしくは、値が存在するか?
                    if (  select_val_bunki == "" || row_text_bunki.indexOf(select_val_bunki) != -1 ) {
                        is_val_bunki_match = true;
                    }

                    // カテゴリーの値のどれかに一致するか?
                    if ( row_text_category == check_val_1 || row_text_category == check_val_2) {
                        is_val_category_match = true;
                    }

                    // セール中か?
                    if (  row_text_sale == check_val_24 || check_val_24 == undefined ) {
                        is_val_sale_match = true;
                    }

                    // 入力された在庫数以下か?
                    if (  row_text_stock <= number || number == "" ) {
                        is_val_stock_match = true;
                    }

                    // それぞれの値の結果をチェックして、全てtrueなら表示
                    if (is_val_brand_match && is_val_season_match && is_val_color_match && is_val_size_match && is_val_bunki_match && 
                        is_val_category_match && is_val_sale_match && is_val_stock_match) {
                        // 見つかった場合は表示する
                        $(element).css("display", "table-row");
                    } else {
                        // 見つからなかった場合は非表示に
                        $(element).css("display", "none");
                    }

                });

            });
        });
    </script>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

「Datatables」というのはhttps://datatables.net/ で公開されている
jQuery用のライブラリ、でよかったでしょうか。

現状だと
「セレクトボックスが変更されたらtableタグを直接書き換える」
となってますが、これを
「セレクトボックスが変更されたらDataTablesの検索メソッドを使って絞り込みを実行する」
という処理に変えればよさそうです。

このライブラリは公式マニュアルのexamplesページにサンプルがたくさんありますが、
下記が参考になると思います。
https://datatables.net/examples/api/regex.html

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.38%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

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

  • JavaScript

    21523questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    8556questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Bootstrap

    1380questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。