初始化后如何更改数据表的数据

How can I change the data of DataTables after it has been initialized?

本文关键字:数据 数据表 何更改 初始化      更新时间:2023-09-26

我想根据ajax请求填充数据表。

这是我所做的

   $(function(e) {
        $('#CampaignMenu').change(function(e) {
            $('#ReportWrapper').hide();

            if (  $(this).val() != '0') {
                $('#DisplayReport').attr('disabled', false);
            } else {
                $('#DisplayReport').attr('disabled', true);
            }
        });
        $('#DisplayReport').click(function (e) {
            $.ajax({
                type: 'GET',
                url: '/getdata',
                data: { 'campaign_id': $('#CampaignMenu').val() },
                dataType: 'json',
                success: function (json) {
                    $('#reportTable').DataTable({
                        data: json,
                        pageLength: 50,
                        lengthMenu: [10, 25, 50, 75, 100, 250, 500, 1000],
                        searching: false,
                        order: [   [ 2, 'desc' ]  ],
                        columns: [
                            { data: 'chain_name', title: 'Chain Name' },
                            { data: 'store_id' , title: 'Store Number' },
                            { data: 'completed', title: 'Total Surveys Completed' },
                            { data: 'initial_quota', title: 'Target Surveys To Complete' },
                            { data: 'total_callable', title: 'Total Call In The Dialer Queue' },
                            { data: 'current_status', title: 'Current Quota Status' },
                        ]
                    });
                    $('#ReportWrapper').show();
                }
            });
        });
    });
</script>

第一个请求工作没有问题。但是,当我第二次调用ajax请求时,我收到此错误

DataTables warning: table id=reportTable - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

初始化后如何更改表内容?

我想在页面加载时初始化数据表,然后调用某个事件稍后在我的 Ajax 请求中填充它。但是,我需要从我的 ajax 请求调用一个事件。

    $(window).load(function (e) {
        $('#reportTable').DataTable({
            pageLength: 50,
            lengthMenu: [10, 25, 50, 75, 100, 250, 500, 1000],
            searching: false,
            order: [   [ 2, 'desc' ]  ],
            columns: [
                { data: 'chain_name', title: 'Chain Name' },
                { data: 'store_id' , title: 'Store Number' },
                { data: 'completed', title: 'Total Surveys Completed' },
                { data: 'initial_quota', title: 'Target Surveys To Complete' },
                { data: 'total_callable', title: 'Total Call In The Dialer Queue' },
                { data: 'current_status', title: 'Current Quota Status' }
             ]
        });
    });

我试图在重新初始化之前销毁表,但这不起作用。

$('#reportTable').DataTable().destroy();

更新

我找到了一种在初始化后将数据添加到表中的方法。但是我需要一种方法来首先清除数据,这样我就不会有重复的数据。

这是我为添加数据所做的工作

           var table = $('#reportTable').dataTable();
                table.fnAddData(json);

以前的代码不断将数据追加到表中,但它不会首先清除现有数据,从而导致重复。我试图在添加以下代码之前添加[table.clear().draw()][2]但这给了我一个错误

类型错误:table.clear 不是一个函数

如何正确让数据表动态一遍又一遍地更改其内容?

要使用 table.clear(),请使用 DataTable() 而不是 dataTable()

dataTable 返回一个 jquery 对象,其中 as DataTable 返回 datatables 对象

我也遇到了这个问题,他们处理它的方式只是销毁所有内容并重新创建它,但性能对于这项任务来说并不是非常关键。

DataTables 通过使用 destroy:true 提供了一个选项,它将销毁以前的数据并重新初始化它!我也在使用WordPress,它运行良好。如果有人遇到这样的问题,您可以简单地尝试此解决方案。希望这有帮助,干杯!

$('#DisplayReport').click(function (e) {
            $.ajax({
                type: 'GET',
                url: '/getdata',
                data: { 'campaign_id': $('#CampaignMenu').val() },
                dataType: 'json',
                success: function (json) {
                    $('#reportTable').DataTable({
                        destroy: true,   <======= Add this to remove previous table
                        data: json,
                        pageLength: 50,
                        lengthMenu: [10, 25, 50, 75, 100, 250, 500, 1000],
                        searching: false,
                        order: [   [ 2, 'desc' ]  ],
                        columns: [
                            { data: 'chain_name', title: 'Chain Name' },
                            { data: 'store_id' , title: 'Store Number' },
                            { data: 'completed', title: 'Total Surveys Completed' },
                            { data: 'initial_quota', title: 'Target Surveys To Complete' },
                            { data: 'total_callable', title: 'Total Call In The Dialer Queue' },
                            { data: 'current_status', title: 'Current Quota Status' },
                        ]
                    });
                    $('#ReportWrapper').show();
                }
            });
        });
    });