重置多列過濾數據表

Question

我有serverside的數據表。搜索后我不知道如何重置輸入列。我想在搜索之前將輸入數據表重置回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(); }) 

 <!-- 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') "; } 

在數據表中搜索多列后如何創建重置按鈕？

Answer 1

你有沒有嘗試這個重置列，該表將搜索前被重置回。

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