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

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

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

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

Q&A

1回答

14772閲覧

DataTablesで絞り込みを行いたい。

KThatena

総合スコア6

JavaScript

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

2グッド

3クリップ

投稿2017/11/25 14:39

###DataTablesに対してプルダウン、チェックボックスで絞り込みを行いたい。
EX TABLE FILTER使えよって話ですが、表題通り、
DataTablesのテーブルに対して、プルダウンやチェックボックスで絞り込みを行いたいです。

既存の表示件数プルダウンやキーワード検索フォームの上部に、プルダウンとチェックボックスを設置しようと考えてます。
下記表で列「値段」「割引」をプルダウンで、
列「色」「大きさ」をチェックボックスで絞り込みできるようにしたいです。
(プルダウン2つ、チェックボックス2つ配置)

HTMLは触れたことがありますがjavascriptは初めてなのでつまずいてしましました。
上記要件を満たすにはどう記述したらよいでしょうか。
よろしくお願いします。
※リアルタイム反映でも「絞り込み」ボタン設置でもどちらでも可※
###ソースコード

<html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css"/> <script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script> <script type="text/javascript"> jQuery(function($){ // デフォルトの設定を変更 $.extend( $.fn.dataTable.defaults, { language: { url: "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json" } }); $("#foo-table").DataTable({ lengthMenu: [ 25, 50, 100 ], displayLength: 25, scrollX: true, scrollY: 200 }); }); </script> <title></title> </head> <body> <table id="foo-table" class="table table-bordered"> <thead> <tr><td>番号</td><td>色</td><td>商品</td><td>大きさ</td><td>値段</td><td>割引</td></tr> </thead> <tbody> <tr><td>1</td><td>青</td><td>自動車A</td><td>大</td><td>1000000</td><td>不可</td></tr> <tr><td>2</td><td>青</td><td>自転車A</td><td>中</td><td>10000</td><td>可</td></tr> <tr><td>3</td><td>青</td><td>ノートパソコンA</td><td>小</td><td>100000</td><td>可</td></tr> <tr><td>4</td><td>黄</td><td>自動車B</td><td>大</td><td>2000000</td><td>不可</td></tr> <tr><td>5</td><td>黄</td><td>自転車B</td><td>中</td><td>20000</td><td>可</td></tr> <tr><td>6</td><td>黄</td><td>ノートパソコンB</td><td>小</td><td>200000</td><td>可</td></tr> <tr><td>7</td><td>赤</td><td>自動車C</td><td>大</td><td>3000000</td><td>不可</td></tr> <tr><td>8</td><td>赤</td><td>自転車C</td><td>中</td><td>30000</td><td>可</td></tr> <tr><td>9</td><td>赤</td><td>ノートパソコンC</td><td>小</td><td>300000</td><td>可</td></tr> </tbody> </table> </body> </html>
fuuro04, exelion07👍を押しています

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

HTML

1<form action="#"> 2<div> 3<label>値段<select name="price"><option value="0">-</option><option value="100000">100000-</option></select></label> 4<label>割引<select name="disc"><option value="">-</option><option>可</option><option>不可</option></select></label> 5<label><input type="checkbox" name="color" />青</label> 6<label><input type="checkbox" name="size" />大</label> 7</div> 8</form>

JavaScript

1$.fn.dataTable.ext.search.push( 2 function( settings, data, dataIndex ) { 3 var form = document.forms[0]; 4 var color = form.elements['color'].checked; 5 var size = form.elements['size'].checked; 6 var price = parseFloat(form.elements['price'].value); 7 var disc = form.elements['disc'].value; 8 if (color && data[1] !== '青') { 9 return false; 10 } 11 12 if (size && data[3] !== '大') { 13 return false; 14 } 15 16 if (parseFloat(data[4]) < price) { 17 return false; 18 } 19 20 if (disc !== '' && data[5] !== disc) { 21 return false; 22 } 23 24 return true; 25 } 26); 27 28var table = $("#foo-table").DataTable({ 29 lengthMenu: [ 25, 50, 100 ], 30 displayLength: 25, 31 scrollX: true, 32 scrollY: 200 33}); 34 35$('form').on('change', function(event) { 36 table.draw(); 37});

https://datatables.net/manual/plug-ins/search#Plug-in-structure

投稿2017/11/28 07:16

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問