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

Posted 2023-02-24

【中文标题】如何在不刷新页面的情况下重新加载数据表？

【英文标题】：How to reload Datatable without refreshing the page?

【发布时间】：2017-06-27 11:25:10

【问题描述】：

对不起，我的英语是一周。请告诉我reload 数据的过程，而不使用datatable jquery 刷新页面。我的重载表不工作。

我的看法是：

<table id="table_id" class="table table-striped table-hover table-bordered" cellspacing="0" >
        <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>

当我的 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');
        
    );

有什么，我做错了吗？

【问题讨论】：

您的表单和输入类型在哪里提交？

这是我的输入类型字段：

你可以试试这个-meadow.se/wordpress/refreshing-data-in-jquery-datatables

Js 代码在哪里制作简单表格到datatable ？

同时更新您问题中的任何更改，不要粘贴在评论中

【参考方案1】：

你可以像这样通过id重新加载Datatable

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

或

TableVar.ajax.reload();

如果您使用 AJAX 来获取 Datatable 的数据，它将起作用。 欲了解更多信息，请参阅link

【讨论】：

不起作用。它正在刷新，页面视觉重新加载。

尝试使用 TableVar.api().ajax.reload();