使用jQuery DataTables重新加载而不刷新页面

Question

我正在使用jQuery DataTables，以下是我的表格当前的样子：

现在，当我点击Deactivate时，我使用ajax调用我的WebApi方法将该记录设置为active = false。因此，表格中的复选框应该取消选中。

public IHttpActionResult Deletecode_AutoMake(int id)
{
    code_AutoMake code_AutoMake = db.code_AutoMake.Find(id);
    if (code_AutoMake == null)
    {
        return NotFound();
    }

    code_AutoMake.Active = false;
    db.Entry(code_AutoMake).State = EntityState.Modified;
    db.SaveChanges();

    return Ok(code_AutoMake);
}

这一切按预期运行...但是表格不会重新加载，除非我刷新页面才能看到复选框实际上被取消选中。

这是我的DataTable设置方式。

$("#Auto-Make-Table").on("click",
    ".js-automake-delete",
    function () {

        var link = $(this);
        var autoMakeName = $(this).data("automake-name");
        var autoMakeId = $(this).data("automake-id");

        bootbox.confirm("Are you sure you want to delete this auto make?",
            function (result) {
                if (result) {
                    $.ajax({
                        url: infoGetUrl + autoMakeId,
                        method: "DELETE",
                        success: function () {
                            autoMakeTable.reload();
                            toastr.success(autoMakeName + " successfully deleted");
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            var status = capitalizeFirstLetter(textStatus);
                            var error = $.parseJSON(jqXHR.responseText);
                            console.log(error);
                            toastr.error(status + " - " + error.exceptionMessage);
                        }
                    });
                }
            });
    });

我的问题/目标是.. 如何在不刷新页面的情况下使表格自动刷新/重新加载？

感谢任何帮助。

更新

尝试使用autoMakeTable.ajax.reload();

收到了这个错误：

接着是这个：

- Grizzly

Answer 1

假设您的数据表格被分配为下面这样：

var myDataTable = $('#myTableId').DataTable({
  //Rest code
 })

然后在你的停用success方法中，只需这样重新加载数据表：

 success: function()
 {
  myDataTable.ajax.reload();
  //rest code
 }

您忘记添加 ajax。请查看此官方链接以了解更多信息。

更新:

如果您的部分视图是强类型，则在成功方法中调用您的操作方法并呈现它，例如，在您上面的成功方法中：

success: function()
 { 
   $.ajax({ 
       url: "@Url.Action("Index", "code_AutoMake")", //As you have mentioned in the chat
       method: "GET",
       success: function (data) 
        { 
         //Here just render that partial view like 
         $("#myDiv").html('').html(data); //This will empty first then render the new data
        }
      })

注意：此处的myDiv是你的表格所在的

标签的id属性。

希望对你有所帮助 :)

- Basanta Matia

---

我相信你正在使用Ajax绑定你的数据表。你需要写上你的数据表名称，而不是myDataTable。我认为你的数据表变量名是autoMakeTable。所以在成功方法中，你需要写上autoMakeTable.ajax.reload();。 - Basanta Matia

抱歉，我确实这样做了。我只是复制并粘贴了您的代码。但我使用了我的个人表名“autoMakeTable”，然后收到了那些错误。 - Grizzly

你的datatable获取操作方法是否以json格式返回数据，还是仅返回视图？ - Basanta Matia

那么，既然我调用了 PUT 方法来停用记录，那我不应该在返回数据时使用 json 或 xml 吗？ - Grizzly

让我们在聊天中继续这个讨论。 - Basanta Matia

Answer 2

创建一个与当前HTML结构相同但包含通过ajax调用获得的新数据的表格，可以在你的php文件或其他任何文件中进行。

$.post( "newTable.php", function( data ) {
     $( ".currentTable" ).html( data );
});

- Feras Al Sous

---

您可以在此处查看示例：https://datatables.net/forums/discussion/38969/reload-refresh-table-after-event - Feras Al Sous