如果 destroy 设置为 true，数据表中的排序箭头会出现不止一次

Question

我需要在每次点击提交按钮时重新初始化我的数据表。我设置 destroy : true 来实现这一点。但是每次数据表重新初始化时，每列出现的排序箭头的数量都会增加一个。我怎样才能防止这种情况发生？这是我的 javascript 代码。每次用户点击提交时，都会调用 processFormData，在验证表单字段后调用 initializeDataTable。

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
            }
        }
    });

};

Answer 1

看来您使用 delete 选项的方法在理论上应该可行。所以我不会在不知道我们是否可能有不同设置的情况下尝试重现它。相反，我建议使用 ajax.reload() function together with updated ajax.data更新当前保存在table中的数据。对您的代码进行可能的调整将如下所示：

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() 应该会给你一个更新的 table。不过我还没有测试过这段代码。

如果 destroy 设置为 true，数据表中的排序箭头会出现不止一次

Sort-arrow in datatable appears more than once if destroy is set to true

javascript

datatable