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

Question

我使用 jquery 数据表来显示我从 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>

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

Answer 1

我没有找到问题所在，所以我没有修复它，但我找到了绕过它的解决方案。所以这就是我要做什么，直到我找到更好的东西。

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

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

然后在 showItemsTable 我销毁并清空表

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

然后用 table 的头替换 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();
                    });
                });
            },

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