Question

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

这是我的数据表的代码：

$(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

我怀疑问题出在那儿

knp.init(options);

我现在已经知道knp是什么，或者它是init方法，我当然不知道什么是选项。（我假设options是具有数据表设置的对象文字？）无论如何，这里没有足够的信息为您的问题找到解决方案。但是，听起来您没有正确重新初始化数据表...

您将需要“破坏”原始数据表，然后清除html，然后重新初始化数据表...

请提供更多代码以获得更彻底的答案。

Answer 2

通过在$（'＃loans_table'）。DataTable（{

然后通过清除，删除表并再次将其重新初始化来进行。看起来像这样：

$('#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插件数据表在过滤后消失

2 个答案: