Question

我尝试使用DataTables成功回调。因为如果他们输入的创建DataTable的值有错误，我想给用户一个警告。

不幸的是，DataTables要求自己成功回调，因此我不能超载它。

目前代码是：

configurationBlockChart = $('#blockSearchTable').DataTable(
{
    processing: true,
    serverSide: true,
    stateSave: true,
    bDestroy: true,
    ajax: 
    {
        type: 'GET',
        url:"ajax_retreiveServerSideBlockNames/",
        data:
        {
            'csrfmiddlewaretoken':csrftoken,
            'username':username
        }
    },
    rowCallback: function(row, data)
    {
        if ($.inArray(data.DT_RowId, blockSelected)!== -1)
        {
            $(row).addClass('selected');
        }
    },
});

此Ajax Get返回的数据是数据行。

但是，返回的数据有可能无效，没有返回行

我尝试在rowCallBack之前添加成功：

success: function(response)
{
     if(response.status == "invalid")
          //then inform user
}

还尝试使用fnDrawCallBack

fnDrawCallback: function(settings, response)
{
    console.log("Hello World!");
    if(response.status == "invalid")
    {
        $('#invalid').modal("show");
        $('#usernameSearch').modal("show");
    }
}

但是，fnDrawCallBack只会在返回行时调用。

问题在于有时没有返回任何行，并且javascript代码会给出异常。

然而，我可以尝试捕获，但我仍然希望我的服务器将json状态赋予javascript代码。

编辑：使用xhr，它可以捕获无效响应，同时不会干扰ajax的成功函数。

$('#chartSearchUsername').click(function(event)
{
    $('#chartConfigModal').modal("hide");
    $('#usernameSearch').modal("show");

    configurationUserChart = $('#userSearchTable').DataTable(
    {
        processing: true,
        serverSide: true,
        stateSave: true,
        bDestroy: true,
        ajax: 
        {
            type: 'GET',
            url:"ajax_retreiveServerSideUsernames/",
            data:
            {
                'csrfmiddlewaretoken':csrftoken
            },
        },
        rowCallback: function(row, data)
        {
            if ($.inArray(data.DT_RowId, userSelected)!== -1)
            {
                $(row).addClass('selected');
            }
        },
    })
    .on('xhr.dt', function(e, settings, response)
    {
        if(response.status == "invalid")
        {
            $('#invalid').modal("show");
            $('#usernameSearch').modal("hide");
        }
    });
});

Answer 1

$('#example').dataTable();

$('#example').on( 'xhr.dt', function () {
    console.log( 'Ajax call finished' );
} );

Answer 2

jQuery数据表被编码为使用ajax中的成功回调，如果你拦截它就会中断。 Source

您还可以使用jQuery ajax dataFilter callback。

$('table[id=entries]').DataTable({
    processing: true,
    serverSide: true,
    ajax: {
        type: 'POST',
        url: 'http://example.com/entries',
        dataFilter: function(response) {
            var json_response = JSON.parse(response);
            if (json_response.recordsTotal) {
                // There're entries;
            }else{
                // There're no entries;
            }
            return response;
        },
        error: function (xhr) {
            console.error(xhr.responseJSON);
        }
    }
});

注意：在dataFilter回调中返回 String ，而不是JSON。

DataTables成功回调替代方案

2 个答案: