Javascript 如果destroy设置为true，则datatable中的排序箭头会多次出现

我需要在每次单击submit按钮时重新初始化我的datatable。我设置了

destroy:true

来实现这一点。但每次重新初始化datatable时，为每列显示的排序箭头数都会增加一个。我怎样才能防止这种情况发生？这是我的javascript代码。每次用户单击submit时，都会调用processFormData，它在验证表单字段后调用InitializeDataable

var firstName = "";
var lastName = "";
var country = "";

$(document).ready(function() {
    $('#userDetails').dataTable();
});

function processFormData() {

    firstName = document.userDetailsTable.firstName.value;
    lastName = document.userDetailsTable.lastName.value;
    country = document.userDetailsTable.country.value;

    if (document.userDetailsTable.firstName.value == ""
            || document.userDetailsTable.lastName.value == ""
            || document.userDetailsTable.country.value == "") {
        bootbox.alert("Please fill in all fields!");
    } else {

        initializeDataTable();
    }
    return false;
}

function initializeDataTable() {

    $('#userDetailsTable').dataTable({
                "destroy" : true,
        "pageLength" : 12,
        "processing" : true,
        "serverSide" : true,
        "ajax" : {
            "url" : '/fetchSearchResults',
            "type" : 'POST',
            "data" : {
                "length" : 12,
                "formFirstName" : firstName,
                "formLastName" : lastName,
                "formCountry" : country
            }
        }
    });

};

---

似乎您使用

删除

选项的方法在理论上应该是可行的。因此，我不会在不知道我们是否可能有不同的设置的情况下，尝试复制它。相反，我建议使用 函数与updated一起更新表中当前保存的数据。 可能的代码调整如下所示：

function initializeDataTable() {
    return $('#userDetailsTable').dataTable({
            "destroy" : true,
        "pageLength" : 12,
        "processing" : true,
        "serverSide" : true,
        "ajax" : {
            "url" : '/fetchSearchResults',
            "type" : 'POST',
            "data" : {
                "length" : 12,
                "formFirstName" : firstName,
                "formLastName" : lastName,
                "formCountry" : country
            }
        }
    });
};

var processFormData = (function(){
    var table = null;
    return function(){
        var firstName = document.userDetailsTable.firstName.value;
        var lastName = document.userDetailsTable.lastName.value;
        var country = document.userDetailsTable.country.value;

        if (firstName == "" || lastName == "" || country == "") {
            bootbox.alert("Please fill in all fields!");
        } else if (table !== null) {
            table.ajax.data.firstName = firstName;
            table.ajax.data.lastName = lastName;
            table.ajax.data.country = country;
            table.ajax.reload();
        } else {
            table = initializeDataTable();
        }
    };
})();

---

调用

processFormData（）

应该会为您提供一个更新的表。我还没有测试过这段代码。

如果您能提供一些代码作为示例，这样人们就可以尝试找出问题所在。@JakobRunge请查看我添加的javascript代码。谢谢。您可能还想看看{，}，它讨论了类似的问题。谢谢@Jakob Runge！我使用了您的想法，即在每次用户提交新表单时重新加载数据表，而不是销毁和重新初始化它，尽管我对代码做了一些更改。表变量应该是全局变量，而不是局部变量。此外，您不能简单地在processFormData方法中更改ajax数据。它必须在ajax调用本身中进行更改。谢谢你的意见@TejasiLatkar很高兴听到它帮助了你：）如果你能接受我的答案，我会很高兴，因为它帮助你解决了问题。