Datatables セレクトボックスから検索値を変更
セレクトボックスで選んだ値をdatatableのsearchに使用します。
jsonは1つ前の記事と同じものを使用。
test.html
<!DOCTYPE html> <html lang="ja"> <head> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.css"/> <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script> </head> <body> <select id="testSelect" onchange="chengeSelect()"></select> <table id="testTable" class="table table-bordered"> <thead> <tr> <th>name</th> <th>position</th> <th>salary</th> <th>start_date</th> <th>office</th> <th>extn</th> </tr> </thead> </table> </body> <script> var arr = [ "Director", "Edinburgh", "System" ]; $(document).ready(function() { $('#testTable').DataTable({ //pageLength: 2, // デフォルトの表示数 //oSearch: { "sSearch": "Director" }, // デフォルトの検索値 "ajax": { url: "data.json", }, columns: [ { data: "name" }, { data: "position" }, { data: "salary" }, { data: "start_date" }, { data: "office" }, { data: "extn" } ] }); for(var i = 0; i < 3; ++i){ let op = document.createElement("option"); op.value = i; op.text = arr[i]; document.getElementById("testSelect").appendChild(op); } }); function chengeSelect() { var index = document.getElementById("testSelect").selectedIndex; var text = arr[index]; var table = $('#testTable').DataTable().search(text).draw(); } </script> </html>