如何在删除行后刷新jquery数据表

Question

数据表中的每一行都有一个删除按钮.

点击删除按钮,我调用此代码:

$('.deleteButton').live('click', function () {

             var $this = $(this);
             var url = $this.attr("id");
             $("#example").fnReloadAjax();
             $.getJSON(url, Success());
         });

url是控制器的动作,它接收Id并从数据库中删除数据.这样可行.我现在想要调用datatable的刷新/重绘功能,以便它可以加载新的结果,但它不起作用.

数据表是:

 $("#example").dataTable({
             "aoColumns": [
                     { "sTitle": "Id" },
                      { "sTitle": "Name" }],


             "bProcessing": true,
             "bServerSide": true,

             "sAjaxSource": '@Url.Action("FetchData", "Home")',
             "sPaginationType": "full_numbers",

});

有人可以请教吗？

Answer 1

引用API数据表页面 - 在fnReloadAjax()子弹上:

注意:要在使用服务器端处理时重新加载数据,只需使用内置的API函数fnDraw而不是此插件.

因此,你可能会更好地使用fnDraw.

[编辑]实际上,你的通话顺序应该是:

// you don't have to use $.json because you don't use the downloaded data
// first, ask the server to delete the data   
$.ajax({
   url: urlToDelete,
   success: function() {
       // if it worked, ask datatable to redraw the table with the new data
       $("#example").dataTable().fnDraw();
       // if this js function does anything useful (like deleting the row), then call it:
       Success();
   },
   error: function() {
       // display any error (like server couldn't be reached...), or at least try to log it
   }
});

Answer 2

我能够用比上面答案中提供的更简单的方法解决这个问题。

Ajax调用从后端删除数据

首先使用普通的 ajax 异步调用从后端删除数据。

从前端数据表中删除

获取要删除的行TR，并使用datatable函数fnDeleteRow删除该行。这将自动刷新表格，因此您不需要任何fnDraw或其他东西。

//in my case its delete button which was clicked 
//so I got its parents parent which is TR row
var row = $(this).parent().parent();


$('DATA TABLE SELECTOR').dataTable().fnDeleteRow(row);

你就完成了..:-)