How to Reload Datatables from Another Ajax Request With Onclick

How to reload datatables from another ajax request with onclick

Another solution, in your onclick handler, would be to destroy the table, and recreate. To destroy, use $('#tablenya').DataTable().destroy(). You can then initialise the table afterwards, as you did before, earlier in the code.

Reload datatable data with ajax call on click

you should be able to accomplish this by using fnServerData instead of fnServerParams

var oTable = $('#datatables').dataTable({
     bProcessing  : true,
     sProcessing  : true,
     bServerSide  : true,
     sAjaxSource  : '/results/load-results',
"fnServerData": function ( sSource, aoData, fnCallback ) {
            /* Add some extra data to the sender */
            aoData.push( { "name": "quizid", "value": quizid } );
            aoData.push( { "name": "question_id", "value": question_id } );
            $.getJSON( sSource, aoData, function () { 
                /* Do whatever additional processing you want on the callback, then tell DataTables */              
            }).done(function(json){
                fnCallback(json);
                        }).fail(function(xhr, err){ 
                var responseTitle= $(xhr.responseText).filter('title').get(0);
                alert($(responseTitle).text() + "\n" + formatErrorMessage(xhr, err) ); 
            });
        },      
    });

you should be able to then call a click function to redraw your table no problem using the fnDraw API call on the variable we created on datatable initialization

$('#somelement').on('click', function(){

        oTable.fnDraw();
    });

refresh ajax datatable after ajax success

This link Refreshing data in jQuery DataTables
is verry helpfful ,I inspire from it to resolve my problem .

Datatable refresh on button click

Please look at this demo codepen

var table = $('#userInventory').dataTable();
table.ajax.reload();

Makes sense only when u supply 'ajax' property to datatable when creating it, so that it can reload.

look at this for datatable ajax documentation

$(document).ready(function () {

  var uitable = $('#userInventory').DataTable({
    //data : instdata,
    ajax: {
      type : "POST",
      url : href + "/refreshInstanceList",
      data : {"action":"get"},
      async: false,
      cache: false,
    },
    columns : [
      {
        "data" : "hostname",
        title : 'Hostname',
        "render" : function(data, type, row, meta) {
          return data;
        }
      }
    ],
    "initComplete": function() {
      $("#userInventory_filter").append('  <button type="button" onclick="refreshData()"><i class="fa fa-refresh"></i></button>');
    },
  });

  $('#some_button').click(function refreshData() {
    var table = $('#userInventory').dataTable();
    table.ajax.reload();

    //Or
    //uitable.ajax.reload();
  });
});

Hope this helps

---

Related Topics