Jquery 过滤后插件数据表消失

Question

我正在使用 Jquery 插件数据tables 对我的 tables 中的信息进行排序，但是在我对 table 数据使用自定义过滤器后 table 插件消失。

这是我的数据的代码table:

$(document).ready(function() {
    $('#loans_table').DataTable( {
        dom: "<'row'<'col-sm-12'l>>" + 
        "<'row'<'col-sm-12'tr>>" + 
        "<'row'<'col-sm-12'p>>",
        "language": {
            "paginate": {
                "previous": "&lt;",
                "next": "&gt;"
            },
            "lengthMenu": '<select>'+
                '<option value="-1">{{ 'text.show_all'|trans }}</option>'+
                '<option value="10">{{ 'text.show'|trans }} 10</option>'+
                '<option value="25">{{ 'text.show'|trans }} 25</option>'+
                '<option value="50">{{ 'text.show'|trans }} 50</option>'+
                '</select>',
        },
        "iDisplayLength": -1,
        "pagingType": "simple_numbers",
        "order": [],
        "columnDefs": [ {
        "targets" : 'no-sort',
        "orderable": false,
        }],
        "bDestroy" : true,
     } );
} );

这里是过滤器的代码：

$('#filter-form').on('submit', function(e) {
    e.preventDefault();
    var valid = true;
    $(this).find('input[type=text]').each(function() {
      var value = this.value;
      if (value && (!$.isNumeric(value) || value < 0) ) {
        $(this).parent().addClass('has-error');
        console.log(value);
        valid = false;
      } else {
        $(this).parent().removeClass('has-error');
      }
    });
    if (valid) {
      $.ajax({
        type: "POST",
        url: Routing.generate('app_filter'), // call ApplicationController:filterAction()
        data: $(this).serialize(), // send form data
        //dataType: 'json', // what data accept, html?
        timeout: 60000, // how long to wait for response
        success: function(response) {
          $('#ajax-update').html(response); // insert response data into table
          knp.init(options);
        },
        error: function() {
          $('#match').text('Problem!'); // smth to show if error
        }
      });
    }
 });

有没有人遇到过类似的问题？

Answer 1

通过在 $('#loans_table').DataTable( {

之前写入 table = 来修复它

并通过清除、删除 table 并再次重新初始化。这是它的样子：

$('#filter-form').on('submit', function(e) {
    e.preventDefault();
    var valid = true;
    $(this).find('input[type=text]').each(function() {
      var value = this.value;
      if (value && (!$.isNumeric(value) || value < 0) ) {
        $(this).parent().addClass('has-error');
        console.log(value);
        valid = false;
      } else {
        $(this).parent().removeClass('has-error');
      }
    });
    if (valid) {
      $.ajax({
        type: "POST",
        url: Routing.generate('app_filter'), // call ApplicationController:filterAction()
        data: $(this).serialize(), // send form data
        //dataType: 'json', // what data accept, html?
        timeout: 60000, // how long to wait for response
        success: function(response) {
        $('#ajax-update').html(response); // insert response data into table
        knp.init(options);
        if (table) table.clear();

        //reinitialise the dataTable   
        table = $('#loans_table').DataTable({
        destroy: true,
        dom: "<'row'<'col-sm-12'l>>" + 
        "<'row'<'col-sm-12'tr>>" + 
        "<'row'<'col-sm-12'p>>",
        "language": {
            "paginate": {
                "previous": "&lt;",
                "next": "&gt;"
            },
            "lengthMenu": '<select>'+
                '<option value="-1">{{ 'text.show_all'|trans }}</option>'+
                '<option value="10">{{ 'text.show'|trans }} 10</option>'+
                '<option value="25">{{ 'text.show'|trans }} 25</option>'+
                '<option value="50">{{ 'text.show'|trans }} 50</option>'+
                '</select>',
        },
        "iDisplayLength": -1,
        "pagingType": "simple_numbers",
        "order": [],
        "columnDefs": [ {
        "targets" : 'no-sort',
        "orderable": false,
        }]
        });
        },
        error: function() {
          $('#match').text('Problem!'); // smth to show if error
        }
      });
    }
    $(this).find('[type=submit]').blur();
  });

Jquery 过滤后插件数据表消失

Jquery plugin datatables disapears after filtering

jquery

jquery-plugins

datatables