How to make DataTable draw new results?

Question

I have a problem with drawing new data into my table using DataTable plugin. I have table that show recepients of notification called #recipientsTable that is stored inside one modal. Now, whenever modal is opened it should show different recipients whose data I'm getting as a response from server. So this is how it looks:

When you click on message of this marked notification this modal in witch table with users is stored is shown.

As you can see it is a DataTable table and here is how I made it:

function showNotificationRecipients(app_id) {
   var data = {};

   $('#myModal').modal('toggle');
   data.notificationId = notification_id;
   data.appId = app_id;
   data.fields = customFields;
   var table = $("#recipientsTable").DataTable({
       "retrieve": true,
       "StateSave": true,
       "PaginationType": "full_numbers",
       "bPaginate": true,
       "bLengthChange": true,
       "bFilter": true,
       "bSort": false,
       "bInfo": true,
       "bAutoWidth": false,
       "bProcessing": true,
       "orderClasses": false,
       "processing": true,
       "serverSide": true,
       "ajax": {
            url: "showRecipients.php",
            type: "POST",
            dataType: "JSON",
            data: data                            
       }
   });
   table.on( 'xhr', function ( e, settings, json ) {
         console.log( 'Ajax event occurred. Returned data: ', json );
    } );
}

So this function opens modal and initalises DataTable. So when I click first time after page is being loaded on any notification and request to see it's recipients, it shows me correct ones, but when I request to see recipients of other notification, same users are shown as from first draw and in my Network browser's tool I see that no new request to showRecipients.php has been sent. I tried various things like:

    if ( $.fn.dataTable.isDataTable( '#recipientsTable' ) ) {
        var table = $("#recipientsTable").DataTable({
             "ajax": {
             url: "showRecipients.php",
             type: "POST",
             dataType: "JSON",
             data: data
         }
})
}else {
       var table = $("#recipientsTable").DataTable({
                  "retrieve": true,
                  "StateSave": true,
                  "PaginationType": "full_numbers",
                  "bPaginate": true,
                   "bLengthChange": true,
                   "bFilter": true,
                   "bSort": false,
                   "bInfo": true,
                   "bAutoWidth": false,
                   "bProcessing": true,
                   "orderClasses": false,
                   "processing": true,
                   "serverSide": true,
                   "ajax": {
                         url: "showRecipients.php",
                         type: "POST",
                         dataType: "JSON",
                         data: data
                   }
            });
  }

Also:

if ( $.fn.dataTable.isDataTable( '#recipientsTable' ) ) {
         "retrieve": true,
         "StateSave": true,
         "PaginationType": "full_numbers",
         "bPaginate": true,
         "bLengthChange": true,
         "bFilter": true,
         "bSort": false,
         "bInfo": true,
         "bAutoWidth": false,
         "bProcessing": true,
         "orderClasses": false,
         "processing": true,
         "serverSide": true,
         "ajax": {
              url: "showRecipients.php",
              type: "POST",
              dataType: "JSON",
              data: data
         }
     });
    })
   }
    else {
        var table = $("#recipientsTable").DataTable({
                    "retrieve": true,
                    "StateSave": true,
                     "PaginationType": "full_numbers",
                     "bPaginate": true,
                     "bLengthChange": true,
                     "bFilter": true,
                     "bSort": false,
                     "bInfo": true,
                     "bAutoWidth": false,
                     "bProcessing": true,
                     "orderClasses": false,
                     "processing": true,
                     "serverSide": true,
                     "ajax": {
                          url: "showRecipients.php",
                          type: "POST",
                          dataType: "JSON",
                          data: data
                     }
            });
    }

And this:

table.on( 'draw', function () {
       var json = table.ajax.reload();
 } );

But with no success. Does anyone has any idea how I could make this work as it should?

Answer 1

My guess is that the table isn't actually being redrawn, but the modal is being shown/hidden (while the table remains the same). I'd try adding the destroy option to the datatable initialization params

var table = $("#recipientsTable").DataTable({
   "destroy":true,
   "retrieve": true,
   "StateSave": true,
   "PaginationType": "full_numbers",
   "bPaginate": true,
   "bLengthChange": true,
   "bFilter": true,
   "bSort": false,
   "bInfo": true,
   "bAutoWidth": false,
   "bProcessing": true,
   "orderClasses": false,
   "processing": true,
   "serverSide": true,
   "ajax": {
        url: "showRecipients.php",
        type: "POST",
        dataType: "JSON",
        data: data                            
   }
});

This will make Datatables destroy the previous instance when you call the function showNotificationRecipients again (check the link for a more thorough explanation), and it should make a new ajax call.

Hope it helps!

Answer 2

I am sure that you've tried many ways.

I can suggest a way, that I've done recently successfully.

//Check table is ready
$('#recipientsTable').ready(function () {

   //Check data-table is already exists   
   if(table) 
   {
      //If already exists then
      //1.clear the datatable by using .clear()
      table.clear();

      //2.destroy the datatable by using .destroy()
      table.destroy();

      //3.Re-initialize your data table
      table.DataTable({
         //Params
      });

      //4.Add new data by using table.rows.add(tempArr).draw(); 
      var tempArr = [];
      table.rows.add(tempArr).draw();

      //5.If you've new columns you can adjust them also. 
      table.columns.adjust().draw();

   }
   else
   {
       //Initialize your data table first time
       table.DataTable({
         //Params
       });
   }

});