Question

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

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

如何在客户端删除此行并安排表？

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()有第三个可选的布尔参数，用于确定表是否应该重绘。例如：

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

如果重新绘制不是请求，您将负责稍后使用fnDraw()自己重新绘制表，oTable.fnDraw(false);也接受可选的布尔参数，该参数确定是否在绘制之前重新过滤和求助表。例如：

An error occurred during local report processing. Method 'HandleImpersonation' in type 'Microsoft.Reporting.WebForms.DataSetExtensionConnection' from assembly 'Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91' does not have an implementation.

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

1 个答案: