如何使用dataTablejquery将按钮一次性绘制到表中

Question

所以我试图在表中每行添加两个按钮。我可以通过执行下面的代码来实现这一点，但每次我转到下一页并返回时，按钮都会不断生成。每次我在页面之间切换时，它都会向表中添加一个按钮。我不明白为什么会发生这种事。有人能帮帮我吗。提前谢谢

$（'#displayTable'）.on（'draw.dt'，函数（）｛

    $('.dataTable > thead > tr').append('<th style="width: 163px"></th>');
    //adding button to table.
    $('.dataTable > tbody > tr').append('<td><a href="#" class="btn btn-primary topic-btn" data-toggle="modal" data-target="#add_to_topic">Add to Topic</a></td>');

})；

Answer 1

您可以使用DataTables的TableTools扩展将自定义按钮添加到表头。

在覆盖选项中：

"aButtons": [
            {
                "sExtends": "text",
                "sButtonText": " ",
                "fnInit": function ( nButton, oConfig ) {
                    $(nButton).attr("title", "Delete selected items");
                    $(nButton).removeClass("DTTT_button").addClass("btn btn-small");
                    $(nButton).append('<i class="icon-trash"></i> <i class="icon-white icon-exclamation-sign"></i>');
                },
                "fnClick": function( nButton, oConfig, oFlash ) {
                    if (!$(nButton).attr('disabled')) {
                        // code to run on click
                        deleteSelectedItems();
                    }
                }
            }
   ]

Answer 2

对于未来寻找答案的人来说，这就是我所做的

<script type="text/javascript">
    $('#displayTable').on('preInit.dt', function () {
        //adding column to table.
        $('.dataTable > thead > tr').append('<th>header</th>');
    });
    $('#displayTable').on('draw.dt', function () {
        //adding button to column.
        $('.dataTable > tbody > tr').append('<td><a href="#" class="btn btn-primary topic-btn" data-toggle="modal" data-target="#add_to_topic">Add to Topic</a></td>');
    });
</script>