CODEWITHSUNDEEP
javascriptjquerydatatables
murday1983
murday1983

Reputation: 4006

Capture If DataTable JSON/AJAX GET Populates Correctly Using 'Success/Error'

I have a DataTable which is doing a GET but i was thinking that protection will be required to help improve UI and can display some sort of error so the user knows if the data is not displayed that an error has occurred and isn't sat watching a black screen.

Any way i know how to do this in a POST but was wondering if there is a way of doing it in a GET.

Current 'Working code

var existingRuleTable = $('#existingRulesDataTable').DataTable({
    "ordering": false,                                                  // Allows ordering
    "searching": false,                                                 // Searchbox
    "paging": true,                                                     // Pagination
    "info": false,                                                      // Shows 'Showing X of X' information
    "pagingType": 'simple_numbers',                                     // Shows Previous, page numbers & next buttons only
    "pageLength": 10,                                                   // Defaults number of rows to display in table. If changing this value change the show/hide below
    "dom": '<"top"f>rt<"bottom"lp><"clear">',                           // Positions table elements
    "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],              // Sets up the amount of records to display
    "fnDrawCallback": function () {
        if ($('#dialPlanListTable').DataTable().rows().count() < 11) {
            $("div[class='bottom']").hide();                            // Hides paginator & dropdown if less than 11 records returned
        } else {
            $("div[class='bottom']").show();                            // Shows paginator & dropdown if 11 or more records are returned
        }
    },
    'ajax': {
        "type": 'GET',
        "url": "js/dataTable.json",                                     
        "data": function (data) {
            return data;
        }
    },
    "columns": [                                                        // Display JSON data in table
        { "data": "position" },
        { "data": "startTime" },
        { "data": "endTime" },
        { "data": "selectedDays" },
        { "data": "selectedDates" },
        { "data": "selectedMonths" },
        { "data": "timeRange" },
        {
            "data": null,
            "render": function (data) {
                if (buttonclicked == 'Modify') {                        // Displays the radio button when 'Mod' clicked
                    return  '<label class="c-radio" style="margin-bottom: 0px">'
                        +   '<input type="radio" name="existingRuleActionRadioButton" value="option1">'
                        +       '<span class="fa fa-check"></span>'
                        +   '</label>';
                } else if (buttonclicked == 'Delete') {                 // Displays the delete button when 'Del' clicked
                    return '<button name="deleteRuleButton" class="btn btn-danger" id="' + data.position + '">'
                        + '<i class="fa fa-trash-o" style="font-size: large"></i>'
                        + '</button>';
                } else {
                    return ''; // Needed for the 'Add' button click
                }
            }
        }
    ]
});

Things i have tried Added this at the end which works BUT i don't know the state (success/error)

"initComplete": function(settings, json) {
     alert( 'DataTables has finished its initialisation.' );
}

Then tried the blow AJAX which fires and dropd into the correct 'Success/Error' but this then does not render my DataTable

'ajax': {
    "type": 'GET',
    "url": "js/dataTable.json",
    "data": function (data) {
        return data;
    },
    success: function(data){
        alert('Success');
    },
    error: function(e){
        alert('Failed');
    }
},

Upvotes: 0

Views: 336

Answers (1)

fdomn-m
fdomn-m

Reputation: 28611

Datatables provides a number of events that can be hooked into:

https://datatables.net/reference/event/

In this case, rather than use initComplete (which seems to be for the DataTables 'Editor' plugin), it looks like the event to hook into is the error event:

https://datatables.net/reference/event/error

You could also look into the draw and xhr events.

It looks like using success: and error: on the ajax: property is overwriting dataTables use of those to render the table; this could be why the xhr event is exposed rather than expose the underlying ajax promise.

Upvotes: 1

Related Questions