如何在没有 Ajax 请求的情况下删除行

Question

使用 jQuery DataTables 1.9.4，我只是 post 行 ID 到服务器，当它从数据库中删除并返回到 ajax success() 函数时我使用 fnDeleteRow() 行函数从 table.

中删除该行

但这会触发 fnDraw() 函数 init 并向服务器发出不必要的 Ajax 请求。

我怎样才能简单地删除这一行并在客户端安排 table？

confirmDelete = function()
{
    var data = {
        "rowid_":rowid
    };

    $.ajax({
        url:"../../Controller/ObjectController.php5",
        type:"POST",
        dataType: "json",
        data: data,
        success: function(data) {
            debugger
            if(data.Success)
            {
                    tableObjects.fnDeleteRow($("#tr_"+rowid),function(){
                        event.theme ='lime';
                        event.heading ='<i class=\'fa fa-check\'></i> Process Completed';
                        event.message ='Row deleted successfully.';
                        ntf(event);
                    });
            }

这是我的表定义：

var tableObjects = $("#objectTable").DataTable({
        "bProcessing": false,
        "bServerSide": true,
        "sAjaxSource": "../../Controller/ObjectController.php5",
        "aoColumns": [
            { "mDataProp": "NAME"},
            { "mDataProp": "TYPE"},
            { "mDataProp": "IP"},
            { "mDataProp": "REMARK"},
            {"mDataProp": "btnEdit"},
            {"mDataProp": "btnDelete"}
        ],
        "fnServerData": function (sSource, aoData, fnCallback){
            aoData.push({"name":"tablename","value":"objects"})
            debugger
            $.ajax({
                "dataType": "json",
                "contentType": "application/json; charset=utf-8",
                "type": "GET",
                "url": sSource,
                "data": aoData,
                "success": function(result){
                    policyCount = result["iTotalRecords"];
                    $.each(result.aaData, function(index,value){
                        result.aaData[index]["btnEdit"] ="<a id=\"btnEdit\" class=\"btn btn-sm btn-success\" style=\"border-radius:4px\" onclick=\"fillFormwithDatasforEdit('"+value.NAME+"','"+value.REMARK+"','"+value.TYPE+"','"+value.IP+"')\" href=\"#mdlObjects\" data-toggle=\"modal\"><i class=\"fa fa-edit\"></i> Edit </a>";
                        result.aaData[index]["btnDelete"] ="<a class=\"btn btn-sm btn-danger\" href=\"#basic\" style=\"border-radius:4px\" onclick=\"setModalTitle('"+value.NAME+"','DeleteObject')\" data-toggle=\"modal\"><i class=\"fa fa-trash-o\"></i> Delete </a>";
                        result.aaData[index]["REMARK"] ="<a class=\"btn btn-sm btn-info\" style=\"border-radius:4px\" onclick=\"setremark('"+value.NAME+"','"+ value.REMARK +"')\" data-toggle=\"modal\" href=\"#full\"><i class=\"fa fa-comment\"></i> Remark</a>";
                    });
                    fnCallback(result);
                },
                error: function (xhr, textStatus, error){
                    if (typeof console == "object") {
                        console.log(xhr.status + "," + xhr.responseText + "," + textStatus + "," + error);
                    }
                }});
        },

        "oLanguage": {
            "sLengthMenu": '<select>' +
            '<option value="5">5</option>' +
            '<option value="10">10</option>' +
            '<option value="20">20</option>' +
            '<option value="30">30</option>' +
            '<option value="40">40</option>' +
            '<option value="50">50</option>' +
            '</select> Show'
        },
        "fnCreatedRow": function( nRow, aData, iDataIndex ) {
            objectname = aData["NAME"];
            newRowID = "tr_" +objectname;
            $(nRow).attr('id', newRowID);
            $(nRow).find('td').each (function(index) {
                newRowID = index==0?objectname+"_objectname":index==1?objectname+ "_type"
                    :index==2?objectname+"_ipaddress":index==3?objectname+"_btnremark"
                    :index==4?objectname+ "_btnedit":index==5?objectname+"_btndelete":"";
                $(this).attr('id', newRowID);
            });
        },
        "fnDrawCallback": function(){
        },
        "aaSorting": [
            [2, 'asc']
        ],
        "aLengthMenu": [
            [5, 15, 20, -1],
            [5, 15, 20, "All"] // change per page values here
        ],
        "iDisplayLength": 5
    });

Answer 1

客户端处理方式

在客户端处理模式下（"bServerSide": false），fnRowDelete()不会触发Ajax请求。

查看此 JSFiddle 进行演示。发出请求时在控制台中查找 Request。

服务器端处理方式

但是，在服务端处理模式下（"bServerSide": true），fnRowDelete()会触发Ajax请求。

备注

API 方法 fnRowDelete() 有第三个可选的布尔参数，用于确定 table 是否应该重绘。例如：

oTable.fnRowDelete(0, function(){ console.log('Deleted'); }, false);

如果不请求重新绘制，您将负责稍后使用 fnDraw() 自己重新绘制 table，它也接受可选的布尔参数，用于确定是否重新过滤和求助table 开奖前。例如：

oTable.fnDraw(false);

如何在没有 Ajax 请求的情况下删除行

How to delete a row without Ajax request

javascript

ajax

datatables