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();

收到此错误：

接下来是这个：

Answer 1

假设你的数据表是这样分配的，

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

然后在您的success method 中进行停用，您只需要像这样重新加载您的数据表，

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

您忘记添加 ajax。请查看此official link 了解更多信息。

更新：

如果你的局部视图是strongly typed，那么在success方法中调用你的action方法并渲染它，比如在你上面的success方法中，

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 是 div 的 id，您的表所在的位置。

希望对你有帮助:)

Answer 2

在您的 php 文件或它可能是哪个文件中创建一个与您当前的 html 结构相同的表，但使用您通过 ajax 调用收到的新数据。

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