2016-11-15 50 views
0

我有serverside.i datatables不知道如何重置輸入列後search.and我想當重置輸入數據表回到主像搜索之前。 所以在這裏我的代碼:重置多列過濾數據表

//my script: 
 
var table = $('#dataTables'); 
 

 
// begin first table 
 
    table.dataTable({ 
 

 
    "ajax": { 
 
      "url": "<?php echo site_url('leader') ?>", 
 
      "type": "POST", 
 
      "data": function(d) { 
 
      d.full_name = $('#full_name').val(); 
 
      d.start_date = $('#start_date').val(); //whats right code? 
 
      d.end_date = $('#end_date').val(); //whats right code? 
 
         
 
      }, 
 
      }, 
 
     ..... 
 
     ..... 
 
     $('#btn-search').click(function(){ 
 
      var data_tables =   $('#dataTables').DataTable(); 
 
      data_tables 
 
       .search(this.value) 
 
       .draw(); 
 
     }) 
 
    
 
    $('#btn-reset').click(function(){ 
 
      var data_tables = $('#dataTables').DataTable(); 
 
      data_tables 
 
       .reset(this.value('')) 
 
       .draw(); 
 
     })
<!-- my view: --> 
 
<div class="form-inline"> 
 
<div class="form-group"> 
 
<input type="text" name="full_name" class="form-control" id="full_name" placeholder="Name"/> 
 
</div> 
 
        
 
<div class="form-group"> 
 
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy"> 
 
    <input type="text" name="start_date" class="form-control" readonly id="start_date" size="8"> 
 
    <span class="input-group-btn"> 
 
    <button class="btn default" type="button"> 
 
     <i class="fa fa-calendar"></i> 
 
    </button> 
 
    </span> 
 
</div> 
 
</div> 
 
<div class="form-group"> 
 
<div class="input-group date date-picker" data-date-format="dd-mm-yyyy"> 
 
<input type="text" name="end_date" class="form-control" readonly id="end_date" size="8"> 
 
<span class="input-group-btn"> 
 
<button class="btn default" type="button"> 
 
    <i class="fa fa-calendar"></i> 
 
</button> 
 
</span> 
 
</div> 
 
</div> 
 
    <button class="btn btn-primary black" id="btn-reset">clear</button> 
 
<button class="btn btn-warning" id="btn-search">Search</button> 
 
</div>

服務器端:

$where = ""; 
 
if (!empty($full_name)) 
 
{ 
 
    $where .= "And full_name = '$full_name' "; 
 
} 
 
if(!empty($start_date)) 
 
{ 
 
    $where .= "And start_date >= to_date('$start_date','DD-MM-YYYY') "; 
 
} 
 

 
if(!empty($end_date)) 
 
{ 
 
    $where = "And end_date <= to_date('$end_date','DD-MM-YYYY') "; 
 
}

如何在數據表搜索多列後創建復位按鈕?

回答

0

是否嘗試this來重置列,並且表將重置爲搜索前的位置。

var table = $('#example').DataTable(); 
table.search('') 
    .columns().search('') 
    .draw(); 
+0

我已經嘗試過,但沒有發生 – ione

+0

從我的理解你的問題,搜索字段是不是從默認搜索字段datatables權利? – saf21

+0

是的,我創建手冊 – ione