如何在不刷新页面的情况下重新加载数据表？

Question

I'm sorry my English is week. Please tell me the process to reload data without refreshing the page using datatable jquery . My reload table was not working.

my view is :

<table id="table_id" class="table table-striped table-hover table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr style="background-color:#1c2d3f;color:white;">
                <th>Kategori <span style="padding-top:5px;font-size:12px;" class="hidden-sm hidden-xs pull-right glyphicon glyphicon-sort"></span></th>
                <th>Deskripsi <span style="padding-top:5px;font-size:12px;" class="hidden-sm hidden-xs pull-right glyphicon glyphicon-sort"></span></th>
                <th style="width:200px;">Tipe Kategori <span style="padding-top:5px;font-size:12px;" class="hidden-sm hidden-xs pull-right glyphicon glyphicon-sort"></span></th>
                <th>Slug <span style="padding-top:5px;font-size:12px;" class="hidden-sm hidden-xs pull-right glyphicon glyphicon-sort"></span></th>
                <th>Aktif <span style="padding-top:5px;font-size:12px;" class="hidden-sm hidden-xs pull-right glyphicon glyphicon-sort"></span></th>
                <th>Opsi</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach($data_kategori as $ambil_data){?>
           <tr>
              <td style="background-color:white;"><?php echo $ambil_data->kategori;?></td>
              <td style="background-color:white;"><?php echo $ambil_data->deskripsi;?></td>
              <td style="padding-top:15px;background-color:white;"><?php 
              if($ambil_data->parent_kategori == "0"){
                echo "<label class='label label-primary'>Kategori Utama</label>";
                }else{
                echo "<label class='label label-default'>Anak kategori</label>";
                  }?>
              </td>
              <td style="background-color:white;"><?php echo $ambil_data->slug;?></td>
              <td style="padding-top:15px;background-color:white;"><?php 
              if($ambil_data->aktif == "Y"){
                echo "<label class='label label-success'>Aktif</label>";
                }elseif($ambil_data->aktif == "N"){
                echo "<label class='label label-danger'>Tidak aktif</label>";
                  }?>
              </td>
              <td style="background-color:white;">
              <a href="javascript:void(0)" class="btn btn-warning edit" onclick="edit(<?php echo $ambil_data->kat_id;?>)"><i class="glyphicon glyphicon-pencil"></i></a>
              <a href="javascript:void(0)" class="btn btn-danger hapus" onclick="delete_book(<?php echo $ambil_data->kat_id;?>)"><i class="glyphicon glyphicon-remove"></i></a>
              </td>
          </tr>
         <?php }?>
        </tbody>

When insert data this my jquery :

function reload_table(){
  table.ajax.reload(null,false); //reload datatable ajax 
}

function save()
{
  var url;
  if(save_method == 'add')
  {   
      url = "<?php echo site_url('admin/kategori/proses_tambah_kat  ')?>";
  }
  else
  {
    url = "<?php echo site_url('index.php/book/book_update')?>";
  }

   // ajax adding data to database
      $.ajax({
        url : url,
        type: "POST",
        data: $('#form').serialize(),
        dataType: "JSON",
        success: function(data)
        {
           //if success close modal and reload ajax table
           $('#modal_form').modal('hide');

          reload_table();

        },
        error: function (jqXHR, textStatus, errorThrown)
        {
            alert('Error adding / update data');
        }
    });

}

Is there anything, i am doing wrong ??

Answer 1

You can reload Datatable by id like this

$('#table_id').DataTable().ajax.reload(null, false);

or

TableVar.ajax.reload();

It will work if you are using AJAX to get data for Datatable. for more info see this link