Jquery DataTable重置多个搜索列

时间:2017-06-16 19:11:09

标签: jquery datatable datatables

我已经设法通过单击按钮重置列,但表不刷新。

例如,假设桌面上有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 个答案:

答案 0 :(得分:1)

重置后尝试重新绘制表:

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