重置多列过滤数据表

时间:2016-11-15 05:34:46

标签: javascript jquery datatable

我有服务器的数据表。我不知道如何在搜索后重置输入列。我希望在搜索之前将重置输入数据表重新设置为main。 所以这里是我的代码:



//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();
        })
&#13;
<!-- 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>
&#13;
&#13;
&#13;

服务器端:

&#13;
&#13;
$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') ";
}
&#13;
&#13;
&#13;

在数据表中搜索多列后如何创建重置按钮?

1 个答案:

答案 0 :(得分:0)

您是否尝试this重置列,并在搜索之前将表重置为。

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