删除行后刷新 Jquery 数据表
Refresh Jquery datatable after deleting a row
我有一个 Datatable 显示来自 table(角色)的数据,我使用 ajax 调用来删除一行:
function OnDeleteClick(el)
{
//var url = ($(this).attr('href'));
//alert(url);
//var employeeId = event.getAttribute(id); //e.target.id
//var url = ($(this).attr('id'));
var id = $(el).attr('id');
var roleid = getURLParameter(id, 'id');
var username = getURLParameter(id, 'name');
var flag = confirm('You are about to delete Role ' + username + ' permanently.Are you sure you want to delete this record?');
if (flag) {
$.ajax({
url: '/Role/DeleteAJAX',
type: 'POST',
data: { roleId: roleid },
dataType: 'json',
//success: function (result) { alert(result); $("#" + Name).parent().parent().remove(); },
success: function (result) {
alert(result);
},
error: function () { alert('Error!'); }
});
}
return false;
}
我的问题是如何在删除成功后刷新jquery数据table,这样删除的行也会从数据中删除table?
下面是我用来构建 JQuery 数据的代码table :
<div class="row" >
<fieldset class="col-md-10 col-md-offset-1" >
<legend>Liste des rôles </legend>
<div class="table-responsive" style="overflow-x: hidden;">
<table width="98%" class="table table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>Designation Role</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@item.Name
</td>
<td width="110">
<a class="btn btn-custom btn-xs" href="" onclick="return getbyID('@item.Id',false)" title="consulter">
<i class="fa fa-folder-open-o"></i>
</a>
<a class="btn btn-custom btn-xs" href="" onclick="return getbyID('@item.Id',true)" title="Editer">
<i class="fa fa-edit"></i>
</a>
<a class="btn btn-custom btn-xs" onclick="OnDeleteClick(this);" id="#?id=@item.Id&name=@item.Name" title=" supprimer">
<i class="fa fa-trash-o"></i>
</a>
</td>
</tr>
}
</tbody>
</table>
</div>
<div class="b-right">
<button type="button" class="btn btn-primary" onclick="location.href='@Url.Action("Create", "Role")'">
<i class="fa fa-plus"></i> Ajouter un role
</button>
</div>
</fieldset>
</div>
感谢您的帮助。
如果您正在使用 DataTables.net 并且您使用 AJAX 数据源像这样构建了 table:
var myTable = $("#myTable").DataTable({ ajax: "path/to/my/data" });
您可以像这样刷新 table 中的数据:
$.ajax({
<your deleting code>
success: function() {
myTable.ajax.reload();
})
});
如果您使用 Razor 使用来自 MVC 的视图模型构建了 table,您将需要 1) 在成功回调中重新加载页面:
$.ajax({
<your deleting code>
success: function() {
window.location.reload();
})
});
或 2) 从 DOM 中删除行,知道它已经从数据库中删除,以保持数据库和 UI 同步:
$.ajax({
<your deleting code>
success: function() {
myTable.row($(el).parents("tr")).remove().draw();
})
});
我有一个 Datatable 显示来自 table(角色)的数据,我使用 ajax 调用来删除一行:
function OnDeleteClick(el)
{
//var url = ($(this).attr('href'));
//alert(url);
//var employeeId = event.getAttribute(id); //e.target.id
//var url = ($(this).attr('id'));
var id = $(el).attr('id');
var roleid = getURLParameter(id, 'id');
var username = getURLParameter(id, 'name');
var flag = confirm('You are about to delete Role ' + username + ' permanently.Are you sure you want to delete this record?');
if (flag) {
$.ajax({
url: '/Role/DeleteAJAX',
type: 'POST',
data: { roleId: roleid },
dataType: 'json',
//success: function (result) { alert(result); $("#" + Name).parent().parent().remove(); },
success: function (result) {
alert(result);
},
error: function () { alert('Error!'); }
});
}
return false;
}
我的问题是如何在删除成功后刷新jquery数据table,这样删除的行也会从数据中删除table?
下面是我用来构建 JQuery 数据的代码table :
<div class="row" >
<fieldset class="col-md-10 col-md-offset-1" >
<legend>Liste des rôles </legend>
<div class="table-responsive" style="overflow-x: hidden;">
<table width="98%" class="table table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>Designation Role</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@item.Name
</td>
<td width="110">
<a class="btn btn-custom btn-xs" href="" onclick="return getbyID('@item.Id',false)" title="consulter">
<i class="fa fa-folder-open-o"></i>
</a>
<a class="btn btn-custom btn-xs" href="" onclick="return getbyID('@item.Id',true)" title="Editer">
<i class="fa fa-edit"></i>
</a>
<a class="btn btn-custom btn-xs" onclick="OnDeleteClick(this);" id="#?id=@item.Id&name=@item.Name" title=" supprimer">
<i class="fa fa-trash-o"></i>
</a>
</td>
</tr>
}
</tbody>
</table>
</div>
<div class="b-right">
<button type="button" class="btn btn-primary" onclick="location.href='@Url.Action("Create", "Role")'">
<i class="fa fa-plus"></i> Ajouter un role
</button>
</div>
</fieldset>
</div>
感谢您的帮助。
如果您正在使用 DataTables.net 并且您使用 AJAX 数据源像这样构建了 table:
var myTable = $("#myTable").DataTable({ ajax: "path/to/my/data" });
您可以像这样刷新 table 中的数据:
$.ajax({
<your deleting code>
success: function() {
myTable.ajax.reload();
})
});
如果您使用 Razor 使用来自 MVC 的视图模型构建了 table,您将需要 1) 在成功回调中重新加载页面:
$.ajax({
<your deleting code>
success: function() {
window.location.reload();
})
});
或 2) 从 DOM 中删除行,知道它已经从数据库中删除,以保持数据库和 UI 同步:
$.ajax({
<your deleting code>
success: function() {
myTable.row($(el).parents("tr")).remove().draw();
})
});