QA@IT
«質問へ戻る

解決しました。DataTableを変数に入れておく必要があるようです。

4
本文
 <script>
   //datatables
   $(document).ready(function () {
-	  $('#list_body').dataTable({
+	  **dmtable** = $('#list_body').dataTable({
 		  "lengthMenu": [[10, 20, 30, -1], [10, 20, 30, "ALL"]],
 		  "order":[[0,'asc']]
       });
 	  ele.style.display = "none";
 	  document.getElementById("doc").style.visibility = "visible";
 
-**function ChangeSelect(obj){
+  });
+</script>
+**<script>
+function ChangeSelect(obj){
   var v=obj.options[obj.selectedIndex].value;
-  $('#list_body').dataTable.oSearch(v).draw();
+  dmtable.search(v).draw();
 }
-**  });
 </script>
-</head>
+**</head>
 <body>
 <div id="doc">
    <!-- セレクトボックス-->

DataTablesのsearchボックスにセレクトボックスの値をいれたい

DataTablesのsearchボックスにセレクトボックスonchangeでの値をいれるには、どのようにすればできるでしょうか?

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="./media/css/datatables.min.css">
  <script src="./media/js/datatables.min.js"></script>

<script>
  //datatables
  $(document).ready(function () {
      **dmtable** = $('#list_body').dataTable({
          "lengthMenu": [[10, 20, 30, -1], [10, 20, 30, "ALL"]],
          "order":[[0,'asc']]
      });
      ele.style.display = "none";
      document.getElementById("doc").style.visibility = "visible";

  });
</script>
**<script>
function ChangeSelect(obj){
  var v=obj.options[obj.selectedIndex].value;
  dmtable.search(v).draw();
}
</script>
**</head>
<body>
<div id="doc">
   <!-- セレクトボックス-->
   <form>
   **<select name="keyword_list" id="keyword_list" onchange="ChangeSelect(this)">**
   <option value="">絞り込み</option>
   <option value="A">A</option>
   <option value="B">B</option>
   </select>
   </form>
<!-- 以下テーブル-->
<table id="list_body" class="display table table-bordered" border="1" cellspacing="0">


</table>

</div>

</body>
</html>コード
DataTablesのsearchボックスにセレクトボックスonchangeでの値をいれるには、どのようにすればできるでしょうか?
```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="./media/css/datatables.min.css">
  <script src="./media/js/datatables.min.js"></script>

<script>
  //datatables
  $(document).ready(function () {
	  **dmtable** = $('#list_body').dataTable({
		  "lengthMenu": [[10, 20, 30, -1], [10, 20, 30, "ALL"]],
		  "order":[[0,'asc']]
      });
	  ele.style.display = "none";
	  document.getElementById("doc").style.visibility = "visible";

  });
</script>
**<script>
function ChangeSelect(obj){
  var v=obj.options[obj.selectedIndex].value;
  dmtable.search(v).draw();
}
</script>
**</head>
<body>
<div id="doc">
   <!-- セレクトボックス-->
   <form>
   **<select name="keyword_list" id="keyword_list" onchange="ChangeSelect(this)">**
   <option value="">絞り込み</option>
   <option value="A">A</option>
   <option value="B">B</option>
   </select>
   </form>
<!-- 以下テーブル-->
<table id="list_body" class="display table table-bordered" border="1" cellspacing="0">


</table>

</div>

</body>
</html>コード
```

質問を投稿

DataTablesのsearchボックスにセレクトボックスの値をいれたい

DataTablesのsearchボックスにセレクトボックスonchangeでの値をいれるには、どのようにすればできるでしょうか?

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="./media/css/datatables.min.css">
  <script src="./media/js/datatables.min.js"></script>

<script>
  //datatables
  $(document).ready(function () {
      $('#list_body').dataTable({
          "lengthMenu": [[10, 20, 30, -1], [10, 20, 30, "ALL"]],
          "order":[[0,'asc']]
      });
      ele.style.display = "none";
      document.getElementById("doc").style.visibility = "visible";

**function ChangeSelect(obj){
  var v=obj.options[obj.selectedIndex].value;
  $('#list_body').dataTable.oSearch(v).draw();
}
**  });
</script>
</head>
<body>
<div id="doc">
   <!-- セレクトボックス-->
   <form>
   **<select name="keyword_list" id="keyword_list" onchange="ChangeSelect(this)">**
   <option value="">絞り込み</option>
   <option value="A">A</option>
   <option value="B">B</option>
   </select>
   </form>
<!-- 以下テーブル-->
<table id="list_body" class="display table table-bordered" border="1" cellspacing="0">


</table>

</div>

</body>
</html>コード
DataTablesのsearchボックスにセレクトボックスonchangeでの値をいれるには、どのようにすればできるでしょうか?
```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="./media/css/datatables.min.css">
  <script src="./media/js/datatables.min.js"></script>

<script>
  //datatables
  $(document).ready(function () {
	  $('#list_body').dataTable({
		  "lengthMenu": [[10, 20, 30, -1], [10, 20, 30, "ALL"]],
		  "order":[[0,'asc']]
      });
	  ele.style.display = "none";
	  document.getElementById("doc").style.visibility = "visible";

**function ChangeSelect(obj){
  var v=obj.options[obj.selectedIndex].value;
  $('#list_body').dataTable.oSearch(v).draw();
}
**  });
</script>
</head>
<body>
<div id="doc">
   <!-- セレクトボックス-->
   <form>
   **<select name="keyword_list" id="keyword_list" onchange="ChangeSelect(this)">**
   <option value="">絞り込み</option>
   <option value="A">A</option>
   <option value="B">B</option>
   </select>
   </form>
<!-- 以下テーブル-->
<table id="list_body" class="display table table-bordered" border="1" cellspacing="0">


</table>

</div>

</body>
</html>コード
```