加载前清除引导 jquery 数据表和答案

【问题标题】：bootstrap jquery datatable clear before loading and加载前清除引导 jquery 数据表和
【发布时间】：2015-12-01 09:10:03
【问题描述】：

我正在使用 jquery 引导样式 数据表。我在屏幕上有 3 个输入字段和一个搜索按钮，当我第一次在没有任何输入的情况下点击搜索按钮时，我得到了正确的结果（假设 1000 条记录）和分页

但是当我下次使用一些输入点击搜索按钮时，我会收到以下错误table id can not reinitilize Datatable 有关此错误的更多信息，请参阅http://datatables.net/tn/3。我得到了结果（假设 200 条记录），但第一次搜索（1000 条记录）显示分页。

下面是我的代码。

$.ajax({
                            url: '../../search.do?param=searchUser',
                            type: 'post',
                            data:data,
                            success:function(result){
                                $("#dataTableBodyId").html(result);
                                $("#associatesDetailsId").DataTable({
                                    "responsive": true,
                                    "paging": true,
                                    "searching":true
                                });
                            },
                            error:function(){
                                alert("error");
                            }
                        });

请帮帮我。

【问题讨论】：

如果要重新初始化数据表，您必须使用destroy: true 选项。
destroy 不起作用，如果我将 destroy:true 更改后的输出不会呈现在数据表上，它会显示旧值，并且如果我在 $("#associatesDetailsId 中放入任何内容").DataTable({}); 如上所述，它显示初始化错误。

标签： jquery ajax twitter-bootstrap datatables

【解决方案1】：

您需要重新设计您的方法，而不是与您拥有的代码作斗争。 @davidkonrad 提到的基本问题是，您不能多次初始化表（将选项传递给构造函数）。

也就是说，这段代码在第二次执行时，会导致错误：

$("#associatesDetailsId").DataTable({
   "responsive": true,
   "paging": true,
   "searching":true
});

在您的问题中，您声明您有 3 个输入字段，如果这些是用户输入搜索条件的文本框，那么这个示例应该可以帮助您入门：

Search example with individual text inputs

请注意，只有在第 9 行调用构造函数（可以传递选项）。

// DataTable
var table = $('#example').DataTable();

表初始化后，columns.every() 方法被调用，并被传递一个函数，该函数本身在keyup 事件上初始化一个事件监听器。 every() 方法确保事件监听器绑定到每个搜索输入框。

【讨论】：