添加数据后重新加载我的数据表

时间:2017-05-25 04:54:08

标签: javascript jquery ajax datatables

为什么我的数据表没有重新加载?在我的情况下,我有一个名为table_clinics的数据表,我在我的javascript中声明了全局,现在我有其他功能在数据表中添加数据,我想阻止刷新,这就是为什么我想要我的数据表在添加新数据后重新加载。我做错了吗?

这是我的代码:

<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>

现在我有一个从数据表中添加数据的功能,成功后,我想刷新我的数据表。这是我的功能:我试过:table_clinics.ajax.reload(null,false);但它没有重新加载我的数据表。我怎么能这样做?

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); 
      }
  }); 
}

也尝试了这个:

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');
      }

我也试过这个: 然后我添加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');
      }

2 个答案:

答案 0 :(得分:1)

您必须在数据表对象上调用draw()。

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

参见我做过的例子。点击jsfiddle

中的添加新数据按钮

答案 1 :(得分:1)

重新加载数据表,试试这个

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