CODEWITHSUNDEEP
javascriptjqueryajaxdatatables
Jc John
Jc John

Reputation: 1859

after adding data reloading my data table

why is this my data table not reloading?. In my situation, I have a data table named table_clinics that I declared global in my javascript, now I have other function to add a data within the data table, I want to prevent refresh that is why I want my data table to be reloaded after adding new data. Am I doing it wrong?.

Here is my code:

<script type="text/javascript">
var table_clinics;

$(document).ready(function() {
table_clinics = $('#dataTables-clinics').dataTable();
});

function show_clinics() {
  $("#dataTables-clinics").dataTable().fnDestroy();
  table_clinics =  $('#dataTables-clinics').DataTable({ 
    "ajax": {
            "url": "<?php echo site_url('clinic_admin/myclinics')?>",
            "type": "POST",
        },
        responsive: true,
        bInfo: false,
    });
}
</script>

now I have a function to add data from the data table and after success, i want to refresh my data table. Here is my function: i tried : table_clinics.ajax.reload(null,false); but it doesn't reload my data table. how can I do this?

function create_clinic() {
  $('#btnCreateClinic').text('Saving...');
  $('#btnCreateClinic').attr('disabled',true);


  $.ajax({
      url : siteurl+"clinic_admin/create_clinic",
      type: "POST",
      data: $('#frm_create_clinic').serialize(),
      dataType: "JSON",
      success: function(data)
      {
      if(data.status) {
        table_clinics.ajax.reload(null,false); 
        alert('Added Sucessfuly');
      }
      else
      {
          for (var i = 0; i < data.inputerror.length; i++) 
          {
              $('[name="'+data.inputerror[i]+'"]').parent().parent().addClass('has-error'); 
              $('[name="'+data.inputerror[i]+'"]').next().text(data.error_string[i]); 
          }
      }
      $('#btnCreateClinic').text('Save'); //change button text
      $('#btnCreateClinic').attr('disabled',false); //set button enable 


      },
      error: function (jqXHR, textStatus, errorThrown)
      {
          alert('Error adding data' + jqXHR+ textStatus +errorThrown);
          $('#btnCreateClinic').text('Save'); 
          $('#btnCreateClinic').attr('disabled',false); 
      }
  }); 
}

also tried this:

if(data.status) {
       table_clinics = $("#dataTables-clinics").dataTable( { bRetrieve : true } );
       table_clinics.fnDraw();
        // Hide all tables
        $('dataTables-clinics').hide();
        // Show the refreshed
         $('dataTables-clinics').show();
        alert('Added Sucessfuly');
      }

also i tried this one: and i add https://cdn.datatables.net/plug-ins/1.10.15/api/fnReloadAjax.js. 

if(data.status) {
       table_clinics.fnReloadAjax('<?php echo site_url('"clinic_admin/myclinics"')?>');
       table_clinics.fnReloadAjax();
        alert('Added Sucessfuly');
      }

Upvotes: 1

Views: 71

Answers (2)

mehere
mehere

Reputation: 1556

You must call draw() on the datatable object.

var oTable = $('#yourDataTable').dataTable();
oTable.fnDraw();

See the example i have done. Click on Add New Data button in jsfiddle

Upvotes: 1

Asif Raza
Asif Raza

Reputation: 1021

Reload You datatable , Try this

 $('#dynamic-table').DataTable().ajax.reload();  // id of table

Upvotes: 1

Related Questions