ajax成功后重新加載數據表

Question

我使用 JQuery 數據表。 我在 ajax 成功將數據發送到 json 文件中的數據表 onclick 。第一次點擊一切都很好，但下一次點擊我只得到正確的數據和錯誤的 dataTables_info 值它總是顯示 dataTables_info 的第一個值和分頁和行也來自第一個結果。 這是數據表中數據的第一次顯示：

所有下一個點擊我只得到正確的數據：對於這個例子，它們是下圖中顯示的一個結果，但其他所有內容（信息、顯示、分頁）屬於第一張圖片中顯示的第一個搜索：

在第二個例子中，當我點擊分頁的任何頁面時，我得到第一頁結果的內容！！ 這是我的功能 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>

謝謝。

Answer 1

首先獲取表 id，例如：

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

只需將這些行放在 ajax success函數之后即可重新加載數據表

Answer 2

在單擊按鈕時，您不需要清空表體並使用 ajax 再次啟動數據表。

您只需要再次調用 ajax，因為您已經啟動了文檔就緒功能

只是使用

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

檢查下面的鏈接，你會有更好的主意。

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

如果這對您沒有幫助，請告訴我

Answer 3

喜歡就用

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

Answer 4

此鏈接刷新jQuery DataTables中的數據

是verry helpfful，我鼓勵它來解決我的問題。

Answer 5

我創建了這個簡單的函數：

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

Answer 6

使用下面的代碼..它完美地工作，它可以保持你的分頁而不會丟失當前頁面

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

Answer 7

我有同樣的問題。 我在一個項目中找到了一個處理這個問題的函數。 這是我制作的一個簡單的 2 列表。

<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 調用中重新填充它。

希望這會有所幫助。

更新：在玩了很多數據表之后，我發現將 table 設置為函數的全局范圍內的變量允許您使用重新加載。

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

然后

table.ajax.reload();

應該工作。

Answer 8

$("#Table_id").ajax.reload(); 沒有用。

我實施 -

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

Answer 9

.reload() 不能正常工作，直到我們傳遞一些參數

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

Answer 10

試試這個我希望它會起作用

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

Answer 11

$('.table').DataTable().ajax.reload(); 這對我有用..