jqueryデータ型カスタム検索フォーム

Question

jquery datatablesカスタム検索フォームを作成しています。このフォームには、入力ボックス、チェックボックス、選択ボックスがあります。しかし、いかなるデータも投稿しない。私はいくつかの方法を試みましたが、成功しませんでした。

$('#search-form').on('submit', function() { 
    var datas = $(this).serializeArray(); 

    $.each(datas, function(i, data) { 

     table.columns(i).search(data.value).draw(); 

    }); 
}); 

Answer 1

実際にフォームを送信する必要はありません。ボタンをクリックするだけです。私の解決策を見て、フィルターボタンをクリックして入力ボックスを広げてから、何か入力して検索ボタンをクリックしてみてください。その後、データテーブルが再描画されます。

コードは自己説明的です。詳細が必要な場合はお知らせください。

$("#filter-button").click(function() { 
 
    $(this).toggleClass("active"); 
 
    $('#filter-body').slideToggle(100); 
 
}); 
 

 
$("#btnSearch").click(function(e){ 
 
    var table = $('#custTable').DataTable(); 
 
    var txtCustName = $("#txtCustName").val(); 
 
    var txtIntroducer = $("#txtIntroducer").val(); 
 
    var txtNRIC = $("#txtNRIC").val(); 
 
    var txtNickName = $("#txtNickName").val(); 
 
    var txtAddress = $("#txtAddress").val(); 
 
    var txtPhone = $("#txtPhone").val(); 
 
    var txtRemark = $("#txtRemark").val(); 
 

 
    table 
 
    .columns(1).search(txtCustName) 
 
    .columns(2).search(txtIntroducer) 
 
    .columns(3).search(txtNRIC) 
 
    .columns(4).search(txtNickName) 
 
    .columns(5).search(txtAddress) 
 
    .columns(6).search(txtPhone) 
 
    .columns(7).search(txtRemark) 
 
    .draw(); 
 
}); 
 

 
$('#custTable').DataTable({ 
 
    responsive: { 
 
    details: { 
 
     type: 'column', 
 
     target: 'tr' 
 
    } 
 
    }, 
 
    columnDefs: [ 
 
    { 
 
    className: 'control', 
 
    orderable: false, 
 
    targets: 0 
 
    }], 
 
    "dom": 'iti', 
 
    iDisplayLength: -1 
 
}); 
 

 
$('#custTable thead th:first-child').css({'background-image':'none'}); 
 

 
$("#custTable a.cust_id").on('click', function(event){ 
 
    event.stopPropagation(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/> 
 
<script src="https://cdn.datatables.net/responsive/2.2.0/js/dataTables.responsive.min.js"></script> 
 
<link href="https://cdn.datatables.net/responsive/2.2.0/css/responsive.dataTables.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="filter-container"> 
 
<button class="accordion" id="filter-button" data-toggle="collapse" data-parent="#accordion">Filter Customer</button> 
 

 
<div id="filter-body" class="panel-collapse collapse"> 
 
<div class="panel-body filter-body"> 
 
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3" style="text-align:initial;"> 
 
<div class="filter-group"> 
 
<label for="txtCustName">Name</label> 
 
<input type="text" id="txtCustName"> 
 
</div> 
 
</div> 
 
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3" style="text-align:initial;"> 
 
<div class="filter-group"> 
 
<label for="txtIntroducer">Introducer</label> 
 
<input type="text" id="txtIntroducer"> 
 
</div> 
 
</div> 
 
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3" style="text-align:initial;"> 
 
<div class="filter-group"> 
 
<label for="txtNRIC">NRIC</label> 
 
<input type="text" id="txtNRIC"> 
 
</div> 
 
</div> 
 
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3" style="text-align:initial;"> 
 
<div class="filter-group"> 
 
<label for="txtNickName">Nick Name</label> 
 
<input type="text" id="txtNickName"> 
 
</div> 
 
</div> 
 
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3" style="text-align:initial;"> 
 
<div class="filter-group"> 
 
<label for="txtAddress">Address</label> 
 
<input type="text" id="txtAddress"> 
 
</div> 
 
</div> 
 
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3" style="text-align:initial;"> 
 
<div class="filter-group"> 
 
<label for="txtPhone">Phone</label> 
 
<input type="text" id="txtPhone"> 
 
</div> 
 
</div> 
 
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3" style="text-align:initial;"> 
 
<div class="filter-group"> 
 
<label for="txtRemark">Remark</label> 
 
<input type="text" id="txtRemark"> 
 
</div> 
 
</div> 
 
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="text-align:initial;"> 
 
<div class="filter-group"> 
 
<button class="btn btn-success" id="btnSearch"><i class="mdi mdi-filter-outline"></i> Search</button> 
 
</div> 
 
</div> 
 
</div> 
 
</div> 
 
</div> 
 

 
<table id="custTable" class="table table-striped table-bordered table-hover dataTable no-footer dtr-column" cellspacing="0" width="100%" aria-describedby="custTable_info" role="grid" style="width: 100%;"><thead> 
 
<tr role="row"><th class="control sorting_asc" rowspan="1" colspan="1" style="width: 13px; display: none; background-image: none;" aria-label=""></th><th class="sorting" tabindex="0" aria-controls="custTable" rowspan="1" colspan="1" style="width: 74px;" aria-label="Name: activate to sort column ascending">Name</th><th class="sorting" tabindex="0" aria-controls="custTable" rowspan="1" colspan="1" style="width: 121px;" aria-label="Introducer: activate to sort column ascending">Introducer</th><th class="sorting" tabindex="0" aria-controls="custTable" rowspan="1" colspan="1" style="width: 67px;" aria-label="NRIC: activate to sort column ascending">NRIC</th><th class="sorting" tabindex="0" aria-controls="custTable" rowspan="1" colspan="1" style="width: 124px;" aria-label="Nick Name: activate to sort column ascending">Nick Name</th><th class="sorting" tabindex="0" aria-controls="custTable" rowspan="1" colspan="1" style="width: 101px;" aria-label="Address: activate to sort column ascending">Address</th><th class="sorting" tabindex="0" aria-controls="custTable" rowspan="1" colspan="1" style="width: 79px;" aria-label="Phone: activate to sort column ascending">Phone</th><th class="sorting" tabindex="0" aria-controls="custTable" rowspan="1" colspan="1" style="width: 93px;" aria-label="Remark: activate to sort column ascending">Remark</th><th class="sorting" tabindex="0" aria-controls="custTable" rowspan="1" colspan="1" style="width: 94px;" aria-label="Actions: activate to sort column ascending">Actions</th></tr> 
 
</thead><tbody><tr role="row" class="odd"> 
 
<td class="control sorting_1" style="display: none;"></td> 
 
<td><a class="cust_id" href="customer-detail.php?id=27">abed</a></td> 
 
<td>abba</td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td><a href="" class="btnDelete" id="27"><i class="fa fa-trash-o fa-2x" aria-hidden="true"></i></a></td> 
 
</tr><tr role="row" class="even"> 
 
<td class="control sorting_1" style="display: none;"></td> 
 
<td><a class="cust_id" href="customer-detail.php?id=28">accure</a></td> 
 
<td>abandon</td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td><a href="" class="btnDelete" id="28"><i class="fa fa-trash-o fa-2x" aria-hidden="true"></i></a></td> 
 
</tr><tr role="row" class="odd"> 
 
<td class="control sorting_1" style="display: none;"></td> 
 
<td><a class="cust_id" href="customer-detail.php?id=29">async</a></td> 
 
<td>acura</td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td><a href="" class="btnDelete" id="29"><i class="fa fa-trash-o fa-2x" aria-hidden="true"></i></a></td> 
 
</tr><tr role="row" class="even"> 
 
<td class="control sorting_1" style="display: none;"></td> 
 
<td><a class="cust_id" href="customer-detail.php?id=30">bbb</a></td> 
 
<td>brazil</td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td><a href="" class="btnDelete" id="30"><i class="fa fa-trash-o fa-2x" aria-hidden="true"></i></a></td> 
 
</tr><tr role="row" class="odd"> 
 
<td class="control sorting_1" style="display: none;"></td> 
 
<td><a class="cust_id" href="customer-detail.php?id=20">john</a></td> 
 
<td>alan</td> 
 
<td>1234</td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td><a href="" class="btnDelete" id="20"><i class="fa fa-trash-o fa-2x" aria-hidden="true"></i></a></td> 
 
</tr><tr role="row" class="even"> 
 
<td class="control sorting_1" style="display: none;"></td> 
 
<td><a class="cust_id" href="customer-detail.php?id=26">pencil</a></td> 
 
<td>taylor</td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td><a href="" class="btnDelete" id="26"><i class="fa fa-trash-o fa-2x" aria-hidden="true"></i></a></td> 
 
</tr><tr role="row" class="odd"> 
 
<td class="control sorting_1" style="display: none;"></td> 
 
<td><a class="cust_id" href="customer-detail.php?id=21">steve</a></td> 
 
<td>alan</td> 
 
<td>123321</td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td><a href="" class="btnDelete" id="21"><i class="fa fa-trash-o fa-2x" aria-hidden="true"></i></a></td> 
 
</tr><tr role="row" class="even"> 
 
<td class="control sorting_1" style="display: none;"></td> 
 
<td><a class="cust_id" href="customer-detail.php?id=25">taylor</a></td> 
 
<td>zayn</td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td><a href="" class="btnDelete" id="25"><i class="fa fa-trash-o fa-2x" aria-hidden="true"></i></a></td> 
 
</tr><tr role="row" class="odd"> 
 
<td class="control sorting_1" style="display: none;"></td> 
 
<td><a class="cust_id" href="customer-detail.php?id=24">zack bro</a></td> 
 
<td>zack</td> 
 
<td>123131</td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td></td> 
 
<td><a href="" class="btnDelete" id="24"><i class="fa fa-trash-o fa-2x" aria-hidden="true"></i></a></td> 
 
</tr></tbody></table>