jQuery 删除一行后如何刷新jquery数据表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8648843/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to refresh jquery datatable after deleting a row
提问by InfoLearner
Each row in the data table has a delete button.
数据表中的每一行都有一个删除按钮。
On click of the delete button, I am calling this code:
单击删除按钮后，我调用此代码：
$('.deleteButton').live('click', function () {
var $this = $(this);
var url = $this.attr("id");
$("#example").fnReloadAjax();
$.getJSON(url, Success());
});
The url is action of the controller that takes the Id and deletes the data from the database. That works. I now want to call the refresh/redraw function of datatable so it can load new results but it doesn't work.
url 是控制器的操作，它采用 Id 并从数据库中删除数据。那个有效。我现在想调用数据表的刷新/重绘功能，以便它可以加载新结果，但它不起作用。
Datatable is:
数据表是：
$("#example").dataTable({
"aoColumns": [
{ "sTitle": "Id" },
{ "sTitle": "Name" }],
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": '@Url.Action("FetchData", "Home")',
"sPaginationType": "full_numbers",
});
Can anyone please advice?
任何人都可以请教吗？
回答by JMax
Quoted from the API datatable page- on the fnReloadAjax()bullet:
引自API 数据表页面- 在fnReloadAjax()项目符号上：
Note: To reload data when using server-side processing, just use the built-in API function fnDraw rather than this plug-in.
注意：使用服务器端处理时要重新加载数据，只需使用内置的API函数fnDraw而不是这个插件。
Thus, you'd probably better use fnDraw.
因此，您可能最好使用fnDraw.
[EDIT] Actually, the order of your calls should be:
[编辑] 实际上，您的通话顺序应该是：
// 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
}
});
回答by hhsadiq
I was able to solve this issue with much simple approach than provided in above answers.
我能够用比上述答案中提供的方法简单得多的方法解决这个问题。
Ajax call to delete data from backend
Ajax 调用从后端删除数据
First of all delete the data from backend using normal ajax async call.
首先使用普通的ajax异步调用从后端删除数据。
Delete from frontend datatable
从前端数据表中删除
Get the row TR which you want to delete and use the datatable function fnDeleteRowto delete this row. This will automatically refresh the table so you will not need any fnDrawor other stuff.
获取要删除的行 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);
And you are done.. :-)
你完成了.. :-)
回答by user1477388
The answer here didn't work for me, so I used this:
这里的答案对我不起作用，所以我使用了这个：
http://datatables.net/plug-ins/api#fnReloadAjax
http://datatables.net/plug-ins/api#fnReloadAjax
Add this to a file:
将此添加到文件中：
$.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<aData.length ; i++ )
{
that.oApi._fnAddData( oSettings, aData[i] );
}
oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
that.fnDraw();
if ( bStandingRedraw === true )
{
oSettings._iDisplayStart = iStart;
that.oApi._fnCalculateEnd( oSettings );
that.fnDraw( false );
}
that.oApi._fnProcessingDisplay( oSettings, false );
/* Callback user function - for event handlers etc */
if ( typeof fnCallback == 'function' && fnCallback !== null )
{
fnCallback( oSettings );
}
}, oSettings );
};
Include the file on your page and call like this:
将文件包含在您的页面上并像这样调用：
// Example call to load a new file
oTable.fnReloadAjax( 'media/examples_support/json_source2.txt' );
// Example call to reload from original file
oTable.fnReloadAjax();
回答by Govind Samrow
Use instance of dataTable and remove row from datatable
使用数据表的实例并从数据表中删除行
dataTable.fnDeleteRow($(that).closest('tr').remove());
dataTable.fnDraw();
