2017-06-16 63 views
0

我设法用按钮单击重置列,但表不刷新。Jquery DataTable重置多个搜索列

例如,假设表格上有10条记录,我搜索2个不同的列,以便表格现在显示2条记录。

如果我点击重置按钮,它会清除文本,但它仍然只在表格上显示2条记录。如果我然后输入任何东西到输入字段进行搜索,它会显示所有10条记录。

为什么我必须键入一些东西,是否应该在点击按钮后重置表格?

<script> 
$(document).ready(function() { 

    var table = $('#everyonesTable').DataTable({ 
    colReorder:   true, 
    stateSave:   true, 
    "lengthMenu": [ 
     [10], 
     [10] 
    ], 

    scrollX:   true, 
    scrollCollapse:  true, 
    paging:    true, 
    fixedColumns:  true, 
    dom: ' <"top"B>rt<"bottom"fpi><"clear">', 

    buttons: [{ 
     "extend": 'colvis', 
     "collectionLayout": 'fixed four-column' 
    }], 
    }); 

    new $.fn.dataTable.Buttons(table, { 
    buttons: [{ 
     text: 'Clear Filters', 
     action: function(e, dt, node, config) { 
      $("[data-index='1']").val(''); 
      $("[data-index='2']").val(''); 
      $("[data-index='3']").val(''); 
      var datatable = $('#everyonesTable').dataTable().api(); 

      $.get('myUrl', function(newDataArray) { 
      datatable.clear(); 
      datatable.rows.add(newDataArray); 
      datatable.draw(); 
      }); 
     } 
     }, 
     { 
     text: 'Reset Columns', 
     action: function(e, dt, node, config) { 
      table.colReorder.reset(); 
     } 
     } 
    ] 
    }); 

    table.buttons(1, null).container().appendTo(
    table.table().container() 
); 



    columnDefs: [{ 
    targets: 1, 
    render: function(data, type, row) { 
     return type === 'display' && data.length > 5 ? 
     data.substr(0, 5) + '…' : 
     data; 
    } 
    }] 



    $(table.table().container()).on('keyup', 'tfoot input', function() { 
    table 
    .column($(this).data('index')) 
    .search(this.value) 
    .draw(); 
    }); 

}); 
</script> 

回答

1

尝试复位后重绘表:

text: 'Reset Columns', 
     action: function(e, dt, node, config) { 
      table.colReorder.reset(); 
      table.draw(); 
     } 
+0

相同的结果,原来的问题 –

+0

奇怪...尝试table.fnFilterClear(); – Simon