ajax成功后重新加载数据表

Posted 2023-02-22

【中文标题】ajax成功后重新加载数据表

【英文标题】：reload datatable after ajax success

【发布时间】：2016-12-17 02:22:57

【问题描述】：

我使用 JQuery 数据表。我在 ajax 成功时将数据发送到 json 文件中的数据表 onclick 。第一次单击一切都很好，但是下一次单击我只得到正确的数据和 dataTables_info 的错误值，它始终显示 dataTables_info 的第一个值和 paginatio AND 行也来自第一个结果。 这是datatable中数据的第一次展示：

所有下一次点击我只得到正确的数据： 例如，它们是下图中显示的一个结果，但其他所有内容（信息、显示、分页）都属于第一张图片中显示的第一个搜索：

在第二个示例中，当我点击分页的任何页面时，我会得到第一页结果的内容！ 这是我的功能 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>

谢谢。

【参考方案1】：

$('.table').DataTable().ajax.reload(); 这对我有用..

【讨论】：

这个问题是四年前提出的，您的回答只是对其他答案的重复。如果您要为一个老问题添加答案，请考虑您正在添加什么价值。

好的！我刚刚开始在这个平台上发布答案。下次我会记住的。

【参考方案2】：

先获取表id，如：

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

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

【参考方案3】：

我遇到了同样的问题。我找到了一个我在一个处理这个问题的项目上写的函数。这是我制作的一个简单的 2 列表。

<table id="memberships" class="table table-striped table-bordered table-hover"  >
        <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 调用中重新填充数据。

希望这会有所帮助。

更新：在多次使用数据表之后，我发现将表设置为函数全局范围内的变量允许您使用重新加载。

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

然后

table.ajax.reload();

应该可以。

【讨论】：

这对我有用，我只是破坏了表然后重新初始化它。谢谢！

仍在使用 laravel 8 和 jquery 3.6。谢谢

【参考方案4】：

试试这个我希望它会工作

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

【讨论】：

这对我来说似乎不是一个好的答案。你不应该回答老问题（大约 4 年前），除非你有什么新的东西要补充而其他答案没有。还要在您的代码周围添加code boxes。请在继续回答之前查看How to answer。

【参考方案5】：

像这样使用

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

【参考方案6】：

.reload() 在我们传递一些参数之前无法正常工作

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

【参考方案7】：

使用下面的代码..它完美地工作，它保持你的分页而不会丢失当前页面

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

【参考方案8】：

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

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

【参考方案9】：

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

我实现了 -

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

【参考方案10】：

在单击按钮时，您无需清空表体并使用 ajax 再次启动数据表。

您只需再次调用您的 ajax，因为您已经启动了文档就绪功能

随便用

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

查看下面的链接，你会有更好的想法。

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

如果这对您没有帮助，请告诉我

【讨论】：

我在这里也尝试过：afterSend: function() $('.datatable-ajax-source table').DataTable().ajax.reload(); 它不工作

对不起，我不明白你的问题

您的代码是否在实时服务器上？还是仅在您的本地电脑中？

仅限本地；我使用 wampServer