Query about ajax response handling

chenw5000

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
Hi, Support:

The DataTable library is great, it is easy to config and use, just one issue I cannot find answer here.

Can you show me how to handle ajax response manually, or, to intercept the ajax response before it goes to render the table.

My scenario is simple:
For the ajax request, I will check if its session is expired or not, if yes, then the server side will send a small json response like
{
code : 12345,
message : "your session is expired"
}
Otherwise, it will send the data which satisfy the need for DataTable object.

My Question:
How can I check the response of the ajax call, if it doesn't contains the "code", then go to render the data, otherwise, stop here and prompt error.

I think I can use the method like:
ajax : {
success : function() {
check if the response contains 'code'
if not
????render the data table???
}
but how to render the data table using the response data?

Thank a lot,

-Wei

kthorngren

but how to render the data table using the response data?

In the success function initialize the Datatable with the data option, like this example. Or if already initialized use rows.add().

Kevin

chenw5000

Hi, Kevin
Thanks for the prompt response, but I still have some confusion about the implementation:

currently, the data table object can navigate from page to page, and every time, it will send a request, via ajax, to get the data (10 rows) for the next page.

Question 1:
If I implement using the first suggestion (use data[option]https://datatables.net/reference/option/data

Probably, I need to retrieve all the data in one ajax call, and then use DataTable to render / navigate / sort on the client side. But the server side might return thousands of rows, it might cause other issues between the client/server communication.

table.rows.add() might not satisfy the need when I click to navigate to the next page...

The scenario is:
(1) using server side to provide 10 rows of data for the data table, also, it will send the "draw", "recordsTotal", "recordsFiltered" properties together.
(2) On the client side, using DataTable library, + ajax : { url : 'string', data : {}, ...} to communicate with the server.

The problem is when there is an error sent from the server in stead of expected response, how can I handle it before DataTable to render that data? (it will show "Processing" in the page, but cannot move back or forward)

kthorngren

Sorry I misunderstood. I thought you were wanting to use jQuery ajax() not the ajax option. The ajax docs state that the success function shouldn't be used.

See if the xhr event will work for what you want. You might need to create a valid server side JSON response to show an empty table so you don't get errors. See the SSP return data docs for the required parameters.

Or maybe the error event is more appropriate for what you want to do.

Kevin

chenw5000

Hi, Kevin:

Thank you very much for your quick update. the xhr event handler solves the trick:

Assume I have the following response when the session is expired:

{
    code : 12345,
    message : 'your session is expired'
}

and I added the following event handling code to check the response from the server:

$("#example").on('xhr.dt', function ( e, settings, json, xhr ) {
            if (json.code != null && json.code != 200) {
                console.log(json.message);
                json.draw = 0;
                json.recordsTotal = 0;
                json.recordsFiltered = 0;
                json.data = [];
            }
        } ).DataTable(dataTableOptions);

it will check if the response has the code, if yes, then it will reset the server response by adding the DataTable required fields 'draw', 'data', 'recordsTotal', 'recordsFiltered'

Then, the process can be completed by showing an empty data table.

This is exactly what I am looking for.

I really appreciate your help during the Thanksgiving weekend. What a wonderful day!

-Wei