Show error message in DataTables table?

Show error message in DataTables table?

AWebsiteDeveloperAWebsiteDeveloper Posts: 3Questions: 1Answers: 0

Hello,

I am currently using Server-Side processing with my DataTable. Because I'm using this to act as a front facing for a database, I would like to be able to show errors in the table, similar to how when you return 0 results total or 0 results from filtering (ex: "No data available in table" and "No matching records found", respectively. More info here).

Is there anyway to do this natively? If not, I saw someone else ask here and it never got resolved (infoCallback doesn't work with 4xx, 5xx HTTP errors, and the other option is make it from scratch), so would it be a planned feature in the future?

Thank you.

Here's my code:

$(document).ready(function() {
    $.fn.dataTable.ext.errMode = function ( settings, helpPage, message ) {
        // message doesn't show from here
    };
    
    let table = $('#documents').DataTable({
        serverSide: true,
        language: { 
            emptyTable: "No customers have submitted documents with this application.",
            zeroRecords: "No customer data matches your search."
        },
        columns: [
            {"name": "CustomerName", data: "cust_name"},
            {"name": "Company", data: "cust_company"},
            {"name": "Reference", data: "cust_ref"}
        ],
        ajax: {
            url: '/api/cust',
            type: 'GET',
            dataSrc: 'data',
            error: function() {
                // Message also does not show here
            }
        }
    });

    $('#documents tbody').on('click', 'tr :not(td.dataTables_empty)', function() {
        let d = table.row(this).data();
        if (d && d.token) {
            title.text(`${d.cust_name} (${d.cust_company})`);
            footer.text(d.cust_ref);
            modal.modal('show');
        }
    });
    $('#documents').css('width', '100%');
});

Doesn't matter if I use a 2xx, 3xx, 4xx, or 5xx, but this is the error value I return:

{
  draw: *, // Replace * with the appropriate draw value
  error: 'Detailed error message goes here'
}

Debugger code (debug.datatables.net): https://debug.datatables.net/erebos
Error messages shown: N/A
Description of problem: Showing custom 4xx, 5xx HTTP errors inside of DataTables, similar to how DataTables does with dataTables_empty class for no data / no filtered data.

This question has an accepted answers - jump to answer

Answers

  • AWebsiteDeveloperAWebsiteDeveloper Posts: 3Questions: 1Answers: 0

    Hello,

    I am being notified that I have an answer for this question and am being notified to accept/reject the answer. However, whenever I load the page (in either Firefox or Chrome), there's nothing on the page about any answers to be accepted or rejected anywhere. Can someone please advise?

    Thank you.

  • allanallan Posts: 63,464Questions: 1Answers: 10,466 Site admin
    Answer ✓

    I don't know why the forum has gone a bit bonkers here I'm afraid. Hopefully this reply and you subsequently marking it as accepted or rejected will resolve that...

    From your description I'm guessing you are able to control the status code and what will be returned from the server on error in this case? If so, perhaps you could try the xhr event along these lines:

        .on('xhr.dt', function (e, settings, json, xhr) {
          if (json.error) {
            // Wait for DataTables to do its draw 
            table.one('draw', function () {
              $('#example tbody td').text(json.error);
            });
          }
        })
    

    Here is an example: http://live.datatables.net/sezicuwu/1/edit .

    Allan

  • AWebsiteDeveloperAWebsiteDeveloper Posts: 3Questions: 1Answers: 0
    edited March 2021

    That was exactly what I wanted!

    Yes, I do have access to the status code and what is returning from the server on error - I should have specified that in my post. Thank you so much!

This discussion has been closed.