javascript - jQuery 数据表 fnDraw(false) 不起作用

Question

我正在使用 DataTables 1.10.16 版本。更新值后，我用更新后的值刷新表格。唯一的问题是它不保持分页状态。

示例:- 假设我在第 2 页，更新值后它会更新值，但会将我带到第一页。

我已尝试fnDraw(false)，但不起作用。

初始化数据表

$('.report-table').dataTable({
    bInfo: false,
    bLengthChange: false,
    serverside: true,
    stateSave: true,
    dom: '<"top"i>rt<"bottom"lp><"clear">',
    columnDefs: [{
            "orderable": false,
            "targets": 9
        },
        {
            "className": "text-center",
            "targets": 9
        }
    ],
    language: {
        oPaginate: {
            sNext: '<i class="fa fa-forward"></i>',
            sPrevious: '<i class="fa fa-backward"></i>',
            sFirst: '<i class="fa fa-step-backward"></i>',
            sLast: '<i class="fa fa-step-forward"></i>'
        },
        emptyTable: "No application found"
    },
    serverMethod: 'get',
    ajax: {
        url: 'https://www.googl.com',
        data: {
            startDate: startDate,
            endDate: endDate,
        },
        headers: {
            'X-CSRF-TOKEN': "{{csrf_token()}}"
        }
    },
    createdRow: function(row, data, dataIndex) {
        $(row).attr('data-app-id', data.app_id);
    },
    columns: [{
            "data": "app_id",
            render: function(data) {
                var firstColumn = data + '<i class="app-expand-btn fa fa-plus-circle pull-right" aria-hidden="true"></i>'
                return firstColumn;
            }
        },
        {
            "data": "app_name"
        },
        {
            "data": "ad_requests"
        },
        {
            "data": "impressions"
        },
        {
            "data": "fill_rate"
        },
        {
            "data": "clicks"
        },
        {
            "data": "ctr"
        },
        {
            "data": "ecpm"
        },
        {
            "data": "revenue"
        },
        {
            "data": "app_id",
            render: function(data) {
                var lastColumn = '<div class="action-box-tools">\n' +
                    '<a class="application-edit-btn" data-placement="top"  data-toggle="tooltip-custom" data-tooltip-value="Edit"><i class="fa fa-pencil"></i> </a>' +
                    '<a class="application-status-btn" data-placement="top"  data-toggle="tooltip-custom" data-tooltip-value="Activate application"><i class="fa fa-play"></i></a>' +
                    '</div>'
                return lastColumn
            }
        },
    ]
});

刷新表格

$.getJSON("{{url('https: //www.xyz.com')}}", params, function(json) {
    oSettings = $('.report-table').dataTable().fnSettings();
    $('.report-table').dataTable().fnClearTable(this);
    for (var i = 0; i < json.data.length; i++) {
        $('.report-table').dataTable().oApi._fnAddData(oSettings, json.data[i]);
    }
    oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
    $('.report-table').dataTable().fnDraw(false);
});

Answer 1

你可以通过ajax来实现这一点，绘制基本上是一个重置功能，您可以在互联网上找到有关绘制的解决方法

我通常将以下内容与服务器端一起使用:true，processing:true，statesave:true

mytable.ajax.reload(null, false);

也改变

dataTable

到

DataTable

。因为dataTable是jquery obj而DataTable是datatable实例

您应该使用 id 而不是 class 以避免任何问题，

var mytable = $('.report-table').dataTable({
    bInfo: false,
    bLengthChange: false,
    serverside: true,
    stateSave: true,
    processing: true, // also add this
    . . .

这将在任何地方工作，除非您在某些函数中定义了数据表。例如，followincode 将在单击 btn 时重新加载表格

$('#btn').click(function(){
  mytable.ajax.reload(null, false);
});

引用ajax.reload