在Ajax成功后重新加载数据表格。

Question

我使用JQuery DataTable。我在ajax成功后通过json文件将数据发送到datatable onclick。第一次点击一切正常，但是下一次点击我只得到正确的数据，而dataTables_info的值是错误的，它总是显示dataTables_info的第一个值，而pagination和row也是从第一个结果中显示的。这是datatable中数据的第一次显示：

所有下一次点击我只得到正确的数据： 例如，在下面的图片中只有一个结果，但是其他所有内容（info，show，pagination）都属于第一次搜索的结果，如下图所示：

在第二个例子中，当我点击分页的任何一页时，我得到的是第一页结果的内容！！ 这是我的ONclick函数：

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

             $("tbody").empty();
             var forsearch = $("#searchItem").val();

    $.ajax({
        processing: true,
        serverSide: true,
        type: 'post',
        url: 'searchData.json',
        dataType: "json",
        data: mysearch,
       /* bRetrieve : true,*/

        success: function(data) {
            $.each(data, function(i, data) {
                var body = "<tr>";
                body    += "<td>" + data.name + "</td>";
               ..........................
               ..........................
                body    += "</tr>";
                $('.datatable-ajax-source table').append(body);

            })
        ;
            /*DataTables instantiation.*/
     $('.datatable-ajax-source table').dataTable();
    },

        error: function() {
            alert('Processus Echoué!');
        },
        afterSend: function(){
    $('.datatable-ajax-source table').dataTable().reload();
 /* $('.datatable-ajax-source table').dataTable({bRetrieve : true}).fnDestroy();    
    $(this).parents().remove(); 
$('.datatable-ajax-source table').dataTable().clear();*/
    }
    });
    });

我尝试了所有的方法，但还是不知道该如何解决。 我使用了这个jQuery插件来处理数据表格：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

谢谢。

- MedKostali

Answer 1

像这样使用它

$('#product_table').DataTable().ajax.reload();

- Waqar Sharif

Answer 2

首先获取表格id，例如：

var table=('#tableid').Datatable();
table.draw();

只需将这些行放在ajax的success函数之后，即可重新加载数据表格。

- M Rizwan Rana

Answer 3

当按钮被点击时，您不需要清空表格主体并使用ajax重新初始化datatable。

您只需再次调用已在文档就绪函数中初始化的ajax即可。

只需使用：

$("#Table_id").ajax.reload();

请查看下面的链接，您会有更好的了解。

https://datatables.net/reference/api/ajax.reload()

如果这个链接不能帮助您，请告诉我。

- Punit Gajjar

---

我在这里也尝试了一下：afterSend: function(){ $('.datatable-ajax-source table').DataTable().ajax.reload(); } 但它没有起作用。 - MedKostali

抱歉，我不理解你的问题。 - MedKostali

你的代码是在实际服务器上运行还是只在本地电脑上？ - Punit Gajjar

仅在本地使用；我使用WampServer。 - MedKostali

Answer 4

我曾经遇到过同样的问题。我在一个项目中写了一个处理这个问题的函数。这是一个我制作的简单的两列表格。

<table id="memberships" class="table table-striped table-bordered table-hover"  width="100%">
        <thead>
            <tr>
                <th>Member Name</th>
                <th>Location</th>
            </tr>
        </thead>
        <tfoot>
          <tr>
            <th>Member Name</th>
            <th>Location</th>
          </tr>
        </tfoot>
      </table>

这是我用来填充它的脚本：

function drawTable(){
var table = $('#memberships').DataTable();

table.destroy();

value = $("#memberName").val();
console.log("member name-->>" + value);
$('#memberships').DataTable({
responsive:true,
pageLength: 50,
ajax:{
    "url": `//BACKEND API CALL`,
    "type":"get",
    "dataSrc": 'members'//my data is in an array called members
},
columns: [
  {"data": "name_display" },
  {"targets": 0,
    "data": "membershipID",
    "render": function ( data, type, full, meta ) {
      return '<button type="button" class="btn btn-info btn-block" 
      onclick="editMember(' + data + ')">Edit Member</button><button 
      type="button" class="btn btn-danger btn-block" 
      onclick="deleteMember(' + data + ')">Delete</button>';
    }
  }
 ]
});
$.fn.dataTable.ext.errMode = 'none';
}

你可以忽略我的列渲染函数。我需要基于返回数据的2个按钮。关键在于函数中的table.destroy。我在一个名为table的变量中创建了表格。我在初始化时立即销毁它，因为这使我能够反复使用此函数。第一次它会销毁一个空表。之后的每个调用都会从ajax调用中销毁数据并重新填充它。

希望这有所帮助。

更新：经过更多的datatables实验，我发现将table设置为函数全局范围内的变量，可以使用reload。

var table = $('#memberships').DataTable({});

那么

table.ajax.reload();

应该可以工作。

- sixstring

---

这对我起作用了，我只是摧毁了表然后重新初始化它。谢谢！ - blind Skwirl

仍在使用 Laravel 8 和 jQuery 3.6 进行开发。谢谢。 - Mohamed Raza

Answer 5

使用以下代码，它可以完美地工作，它可以保持你的分页而不会失去当前页：

$("#table-example").DataTable().ajax.reload(null, false );

- salithlal

Answer 6

$('.table').DataTable().ajax.reload(); 这对我来说有效。

- video mania

---

这个问题是四年前提出的，而你的答案只是其他答案的重复。如果你要回答一个旧问题，请考虑你所添加的价值。 - Tom

好的！我刚开始在这个平台上发布答案。下次我会注意的。 - video mania

Answer 7

我创建了这个简单的函数：

function refreshTable() {
  $('.dataTable').each(function() {
      dt = $(this).dataTable();
      dt.fnDraw();
  })
}

- Sibin John Mattappallil

Answer 8

.reload()在没有传递参数的情况下无法正常工作

var  = $("#example").DataTable() ;
datatbale_name.ajax.reload(null, false );

- mabdullahse

Answer 9

$("#Table_id").ajax.reload(); 没有起作用。

我实现了 -

var mytbl = $("#Table_id").datatable();
mytbl.ajax.reload;

- Adarsh Madrecha

---

.DataTable({}); - sixstring

你是否使用了正确的语法并传递了空对象？ - sixstring

Answer 10

试一下，希望它能够工作

$("#datatable_id").DataTable().ajax.reload();

- Waleed

---

这对我来说似乎不是一个好答案。除非你有任何新的补充，否则不应回答旧问题（这里是近4年前的问题）。还要在代码周围添加“代码框”。在继续回答之前，请查看如何回答。 - finnmglas