Question

我使用以下JQuery代码将数据添加到dataTable：

$('#orderList').DataTable().row.add([
        resp.counter,
        resp.quantity,
        resp.width,
        resp.height,
        resp.cost,
        resp.action
    ]).draw(false);

这是我通过ajax从服务器响应的代码：

echo json_encode(array(
    "status" => 'success',
    "amount" => $amounts->fetch_object()->amount,
    "counter" => "#1",
    "quantity" => "<input type='number' value='".$quantity."' class='form-control orderListAlterQuantity' placeholder='Qty'>",
    "width" => $_POST['formDat'][0]['width']." CM",
    "height" => $_POST['formDat'][0]['width']." CM",
    "cost" => "Rs. ".$cost."/-",
    "action" => "<button data-orderid='".$orderID."' class='orderListDeleteEntry btn btn-rounded btn-outline-danger waves-effect waves-light m-r-10'><i class='fa fa-close'></i></button>"
));

以上代码的工作原理如下：

当我从表单添加数据时，它会被发送到服务器。当服务器在添加数据库后对其进行处理时，我通过json_encode对其进行响应，以便我可以成功处理ajax函数以添加到DataTable。数据将添加到表中。问题是，在我单击删除按钮后，它不会从DataTable中删除数据，但会从服务器中删除它。

这是我在点击删除按钮时用来处理的代码：

    $("body").on('click', 'button.orderListDeleteEntry', function(event)    
    {
        var id = $(this).data("orderid");
        var $this = $(this);
        $(this).html("Deleting..");
        $(this).prop('disabled', 'true');

        $.ajax({
            url: '/alter',
            type: 'POST',
            dataType: "json",
            data: {type: "delete", orderid: id},
        })
        .done(function(resp)
            {
                if(resp.status == "success")
                    {
                        $('table#orderList tbody tr#'+id).fadeOut("slow");
                        // $('#orderList').DataTable().row("#"+id).slideUp("slow");
                        // $('table#orderList tbody tr#'+id).remove();
                        // $this.parents('tr').remove().draw();
                        $('#orderList').DataTable().row("#"+id).remove().draw(false);
                        $('#orderList').DataTable().columns.adjust().draw(false);
                        $("span#orderTotalAmt").html(resp.amount);
                        // alert("Order Deleted");
                    }

                else if(resp.status == "failed")
                    {
                        $this.html("<i class='fa fa-close'></i>");
                        $this.removeAttr('disabled');
                        // alert("Problem Deleting Order! Please Try Again after Sometime.");
                    }

                else
                    {
                        $this.html("<i class='fa fa-close'></i>");
                        $this.removeAttr('disabled');
                    }
            })
        .fail(function(resp)
            {
                console.log(resp);
            });
    });

为什么会这样？

这是按钮位置：

就像这样：

`<tr id="180" role="row" class="odd">
    <td class="sorting_1">#1</td>
    <td>
        <input type="number" value="1" class="form-control orderListAlterQuantity" placeholder="Qty">
    </td>
    <td>20 CM</td>
    <td>20 CM</td>
    <td class="updatedAmount">Rs. <span class="totalPriceForThisItem">3200</span>/-</td>
    <td>
        <button data-orderid="180" class="orderListDeleteEntry btn btn-rounded btn-outline-danger waves-effect waves-light m-r-10"><i class="fa fa-close"></i></button>
    </td>
</tr>`

Answer 1

删除

$('#orderList').DataTable().row("#"+id).remove().draw(false);

并使用

$ this.parent（）。父（）。除去（）

因为$这是引用按钮然后.parent（）。parent（）将引用该行，而.remove（）将删除它。

添加到DataTable的新数据未被删除

1 个答案: