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

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

javascript ajax datatables

Javascript 如何在没有Ajax请求的情况下删除行,javascript,ajax,datatables,Javascript,Ajax,Datatables,使用jQuery DataTables 1.9.4，我只需将行ID发布到服务器，当它从数据库中删除并返回到ajaxsuccess（）函数时，我使用fndeteRow（）行函数从表中删除这一行但是这会触发fnDraw（）函数init，并向服务器发出一个不必要的Ajax请求如何简单地删除这一行并在客户端安排表 confirmDelete = function() { var data = { "rowid_":rowid }; $.ajax({

使用jQuery DataTables 1.9.4，我只需将行ID发布到服务器，当它从数据库中删除并返回到ajax

success（）

函数时，我使用

fndeteRow（）

行函数从表中删除这一行

但是这会触发

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

confirmDelete=函数（）
{
风险值数据={
“rowid”：rowid
};
$.ajax({
url:“../Controller/ObjectController.php5”，
类型：“POST”，
数据类型：“json”，
数据：数据，
成功：功能（数据）{
调试器
if（data.Success）
{
tableObjects.fnDeleteRow（$（“#tr#”+rowid），function（）{
event.theme='lime'；
event.heading=‘流程已完成’；
event.message='Row deleted successfully'；
ntf（事件）；
});
}

以下是我的taable定义：

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

var tableObjects=$（“#objectTable”）.DataTable({
“b处理”：false，
“bServerSide”：正确，
“sAjaxSource”：“../../Controller/ObjectController.php5”，
“aoColumns”：[
{“mDataProp”：“NAME”}，
{“mDataProp”：“TYPE”}，
{“mDataProp”：“IP”}，
{“mDataProp”：“备注”}，
{“mDataProp”：“btnEdit”}，
{“mDataProp”：“btnDelete”}
],
“fnServerData”：函数（sSource、aoData、fnServerData回调）{
推送（{“name”：“tablename”，“value”：“objects”}）
调试器
$.ajax({
“数据类型”：“json”，
“contentType”：“application/json；charset=utf-8”，
“类型”：“获取”，
“url”：sSource，
“数据”：aoData，
“成功”：功能（结果）{
policyCount=结果[“iTotalRecords”]；
$.each（result.aaData，函数（索引，值）{
结果.aaData[索引][“btnEdit”]=“”；
结果.aaData[索引][“btnDelete”]=“”；
结果.aaData[索引][“备注”]=”；
});
fn（结果）；
},
错误：函数（xhr、textStatus、error）{
if（控制台类型==“对象”）{
日志（xhr.status+”、“+xhr.responseText+”、“+textStatus+”、“+error”）；
}
}});
},
“语言”：{
“菜单”：”+
'5' +
'10' +
'20' +
'30' +
'40' +
'50' +
“表演”
},
“fnCreatedRow”：函数（nRow、aData、iDataIndex）{
objectname=aData[“NAME”]；
newRowID=“tr_”+objectname；
$（nRow.attr（'id'，newRowID）；
$（nRow）.find（'td'）.each（函数（索引）{
newRowID=index==0？objectname+“\u objectname”：index==1？objectname+“\u type”
：index==2？objectname+“\u-ipaddress”：index==3？objectname+“\u-btnremark”
：index==4？objectname+“\u btnedit”：index==5？objectname+“\u btndelete”：”；
$（this.attr（'id'，newRowID）；
});
},
“fnDrawCallback”：函数（）{
},
“aaSorting”：[
[2，‘asc’]
],
“阿伦哲努”：[
[5, 15, 20, -1],
[5,15,20，“全部”]//此处更改每页的值
],
“iDisplayLength”：5
});

客户端处理模式

在客户端处理模式（

“bServerSide”：false

）中，

fnRowDelete（）

不会触发Ajax请求

查看此演示。发出请求时，在控制台中查找

请求

服务器端处理模式

但是，在服务器端处理模式（

“bServerSide”：true

）中，

fnRowDelete（）

将触发Ajax请求

注释

API方法

fnRowDelete（）

有第三个可选的布尔参数，用于确定表是否应该进行重画。例如：

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

oTable.fnDraw(false);

如果未请求重新绘制，您将负责稍后使用

fnDraw（）

重新绘制表，该函数还接受可选的布尔参数，用于确定是否在绘制前重新筛选和使用表。例如：

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

oTable.fnDraw(false);