溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

jQuery使用DataTable實現(xiàn)刪除數(shù)據(jù)后重新加載功能

發(fā)布時間:2020-08-31 08:19:47 來源:腳本之家 閱讀:529 作者:Rexcnblog 欄目:web開發(fā)

問題描述:

利用jQuery Datatable和artTemplate組合來做的表格。但是當刪除數(shù)據(jù)時,需要重新加載table里的數(shù)據(jù)。但是問題是datatable并沒有直接的重新渲染,反而給數(shù)據(jù)累加上了。

解決辦法:

經(jīng)過查看高人的blog,發(fā)現(xiàn)可以先銷毀table,然后再重新渲染。

var dttable;
App.globalAjax("get", "/Order/MyJsonList", {}, function (result) {
  var html = template('Orders-template', result);
  $("#datatable1").find("tbody").html(html);
  dt = $('#datatable1').dataTable({
    "sPaginationType": "bs_full"
  });
});

這個是第一次通過ajax獲取到數(shù)據(jù),然后利用artTemplate來渲染數(shù)據(jù),最后填充到頁面中,然后進行渲染。

接下來就是執(zhí)行刪除操作,然后重新加載渲染table

App.globalAjax("post", "/Order/DeleteOrder", data, function (result) {
      App.globalAjax("get", "/Order/MyJsonList", {}, function (result) {
        var html = template('Orders-template', result);
        if ($('#datatable1').hasClass('dataTable')) {
          dttable = $('#datatable1').dataTable();
          dttable.fnClearTable(); //清空一下table
          dttable.fnDestroy(); //還原初始化了的datatable
        }
        $("#datatable1").find("tbody").html(html);
        $('#datatable1').dataTable();
      });
    });

到此,datatable就可以重新渲染了。

以上所述是小編給大家介紹的jQuery使用DataTable實現(xiàn)刪除數(shù)據(jù)后重新加載功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網(wǎng)站的支持!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI