Jquery 刷新表时数据表中重复的标题图标

我使用jquerydatatables来显示我从jsonresponse获得的数据。 表的初始显示是正常的，但当我点击刷新并使用

$('#search-notable-authors').DataTable().destroy();
$('#search-notable-authors').DataTable(

它会重新加载表格，但会复制标题图标，重复次数与我点击刷新按钮的次数相同

这是完整的jq代码

<script type="text/javascript">
    var $jquery_1_11_3 = jQuery.noConflict(true);
    (function ($) {
        $(document).ready(function () {
            $("#refresh-btn").on("click",function(){
                showItemsTable1();
            });
            ajaxPaths = {
                allNotableAuthors:   "{{ path('json_getAllNotableAuthors') }}",
                allNotableAuthorsByJournal:   "{{ path('json_getAllNotableAuthorsByJournal') }}"
            },
                    itemsTable = null,
                    getItems = function () {

                        return $.Deferred(function () {
                            var that = this;
                            $.ajax({
                                type: "POST",
                                data: $('#articlesList').serialize(),
                                url: ajaxPaths.allNotableAuthors,
                                success: function (data) {
                                    console.log(data);
                                    that.resolve(data);
                                }
                            });
                        });
                    },
                    getItems1 = function () {
                        return $.Deferred(function () {
                            var that = this;
                            var journal = $("#search_authors_name_short").val();
                            $.ajax({
                                type: "POST",
                                data: { term : journal },
                                url: ajaxPaths.allNotableAuthorsByJournal,
                                success: function (data) {
                                    console.log(data);
                                    that.resolve(data);
                                }
                            });
                        });
                    },
                    showItemsTable = function () {
                        return $.Deferred(function () {
                            var that = this;
                            getItems().done(function (itemsData) {
                                $('#search-notable-authors').DataTable({
                                    aLengthMenu: [
                                        [25, 50, 100, 200, -1],
                                        [25, 50, 100, 200, "All"]
                                    ],
                                    iDisplayLength: -1,
                                    data: itemsData,
                                    columns: [
                                        {"data": 0},
                                        {"data": 1},
                                        {"data": 2},
                                        {"data": 3},
                                        {"data": 4}
                                    ]
                                });
                                that.resolve();

                            });
                        });
                    },
            showItemsTable1 = function () {
                return $.Deferred(function () {
                    var that = this;
                    getItems1().done(function (itemsData) {
                        $('#search-notable-authors').DataTable().destroy();
                        $('#search-notable-authors').DataTable({
                            aLengthMenu: [
                                [25, 50, 100, 200, -1],
                                [25, 50, 100, 200, "All"]
                            ],
                            iDisplayLength: -1,
                            data: itemsData,
                            columns: [
                                {"data": 0},
                                {"data": 1},
                                {"data": 2},
                                {"data": 3},
                                {"data": 4}
                            ]
                        });
                        that.resolve();
                    });
                });
            }
            showItemsTable();
        });//end of doc ready
    })($jquery_1_11_3);
</script>

var$jquery\u 1\u 11\u 3=jquery.noConflict（true）；
（函数（$）{
$（文档）.ready（函数（）{
$（“刷新btn”）。在（“单击”，函数（）上{
showItemsTable1（）；
});
ajaxPaths={
allNotableAuthors:“{{path（'json_getAllNotableAuthors'）}}”，
allNotableAuthorsByJournal:{{path（'json_getAllNotableAuthorsByJournal'）}
},
itemsTable=null，
getItems=函数（）{
return$.Deferred（函数（）{
var=这个；
$.ajax({
类型：“POST”，
数据：$（'#articlesList'）。序列化（），
url:ajaxPaths.allNotableAuthors，
成功：功能（数据）{
控制台日志（数据）；
解决（数据）；
}
});
});
},
getItems1=函数（）{
return$.Deferred（函数（）{
var=这个；
var journal=$（“#搜索#u authors_name_short”）.val（）；
$.ajax({
类型：“POST”，
数据：{term:journal}，
url:ajaxPaths.allNotableAuthorsByJournal，
成功：功能（数据）{
控制台日志（数据）；
解决（数据）；
}
});
});
},
showItemsTable=函数（）{
return$.Deferred（函数（）{
var=这个；
getItems（）.done（函数（itemsData）{
$（“#搜索著名作者”）.DataTable({
阿伦哲努：[
[25, 50, 100, 200, -1],
[25,50,100,200，“全部”]
],
i显示长度：-1，
数据：itemsData，
栏目：[
{“数据”：0}，
{“数据”：1}，
{“数据”：2}，
{“数据”：3}，
{“数据”：4}
]
});
那就是；
});
});
},
showItemsTable1=函数（）{
return$.Deferred（函数（）{
var=这个；
getItems1（）.done（函数（itemsData）{
$（“#搜索著名作者”）.DataTable（）.destroy（）；
$（“#搜索著名作者”）.DataTable({
阿伦哲努：[
[25, 50, 100, 200, -1],
[25,50,100,200，“全部”]
],
i显示长度：-1，
数据：itemsData，
栏目：[
{“数据”：0}，
{“数据”：1}，
{“数据”：2}，
{“数据”：3}，
{“数据”：4}
]
});
那就是；
});
});
}
showItemsTable（）；
})；//文档结束准备就绪
})（$jquery_1_11_3）；

---

如何在不复制标题图标的情况下修复此问题？

我没有找到问题的原因，因此我没有修复它，但我找到了一个绕过它的解决方案。这就是我要做的，直到我找到更好的

在脚本开始时，我从表格标题中获取html，如下所示：

var hdr = $('#search-notable-authors').find('thead').html();

然后在showItemsTable中，我销毁并清空表

var tableId = $('#search-notable-authors');
itemsTable = $(tableId).DataTable();
itemsTable.destroy();
$(tableId).empty();

然后用表的ID替换html

$('#search-notable-authors').find('thead').html(hdr);

以下是完整的showItemsTable代码：

showItemsTable = function () {
                return $.Deferred(function () {
                    var that = this;
                    getItems().done(function (itemsData) {
                        var tableId = $('#search-notable-authors');
                        var header = $(tableId).find('thead').html();
                        itemsTable = $(tableId).DataTable();
                        itemsTable.destroy();
                        $(tableId).empty();

                        itemsTable = $(tableId).DataTable({

                            aLengthMenu: [
                                [25, 50, 100, 200, -1],
                                [25, 50, 100, 200, "All"]
                            ],
                            iDisplayLength: -1,
                            data: itemsData,
                            columns : [
                                DataTables.expandCol,
                                {"data": 'id'},
                                {"data": 'email'},
                                {"data": 'journal'},
                                {"data": 'title'},
                                {"data": 'citation_link'}
                            ]
                        });
                        $('#search-notable-authors').find('thead').html(hdr);
                        that.resolve();
                    });
                });
            },

如果有人提出了更好的解决方案，或解决了原来的问题，请写信