げぼげぼメモ

自分用いろいろメモです

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>