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

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

点击删除按钮，我调用此代码：

$('.deleteButton').live('click', function () { var $this = $(this); var url = $this.attr("id"); $("#example").fnReloadAjax(); $.getJSON(url, Success()); }); 

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

数据表是：

  $("#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，并使用数据表函数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); 

你完成.. 🙂

Answer 3

这里的答案对我不起作用，所以我使用了这个：

http://datatables.net/plug-ins/api#fnReloadAjax

将其添加到文件中：

 $.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw ) { if ( sNewSource !== undefined && sNewSource !== null ) { oSettings.sAjaxSource = sNewSource; } // Server-side processing should just call fnDraw if ( oSettings.oFeatures.bServerSide ) { this.fnDraw(); return; } this.oApi._fnProcessingDisplay( oSettings, true ); var that = this; var iStart = oSettings._iDisplayStart; var aData = []; this.oApi._fnServerParams( oSettings, aData ); oSettings.fnServerData.call( oSettings.oInstance, oSettings.sAjaxSource, aData, function(json) { /* Clear the old information from the table */ that.oApi._fnClearTable( oSettings ); /* Got the data - add it to the table */ var aData = (oSettings.sAjaxDataProp !== "") ? that.oApi._fnGetObjectDataFn( oSettings.sAjaxDataProp )( json ) : json; for ( var i=0 ; i 

在页面上包含该文件并按如下方式调用：

 // Example call to load a new file oTable.fnReloadAjax( 'media/examples_support/json_source2.txt' ); // Example call to reload from original file oTable.fnReloadAjax(); 

Answer 4

使用dataTable的实例并从datatable中删除行

 dataTable.fnDeleteRow($(that).closest('tr').remove()); dataTable.fnDraw();