Answers

• kthorngren Posts: 21,445Questions: 26Answers: 4,974

  November 2021 Answer ✓

  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 Posts: 3Questions: 1Answers: 0

  November 2021

  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 Posts: 21,445Questions: 26Answers: 4,974

  November 2021 Answer ✓

  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 Posts: 3Questions: 1Answers: 0

  November 2021

  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