使用自定义按钮从 DataTable 中删除行答案

【问题标题】：Remove Row from DataTable using a custom button使用自定义按钮从 DataTable 中删除行
【发布时间】：2017-12-04 07:08:18
【问题描述】：

我正在尝试使用 dataTable (datatables.net) 中的自定义按钮删除选定的行。我试图按照文档进行操作，但有些东西我不明白。我所做的是在确认弹出窗口中单击Approve 后，我执行文档rows().remove() 中给出的代码，但没有任何反应。

这是我的代码：

<script>
    $(function () {
        var dataSet = [
                        [
                            "<div class='pull-right'>" +
                            "<br />" +
                            "<button type='button' class='btn btn-success' id='Approve' onclick='Approve(1)'> APPROVE </button> &nbsp;" +
                            "<button type='button' class='btn btn-danger' id='Decline' onclick='Decline(1)' > DECLINE </button>" +
                            "</div>" 
                        ]
                      ]

        $('#AccomplishmentTable').dataTable({
            data: dataSet,
            columns: [
                { title: "Employee" }
            ]
        });
    });
</script>

我正在尝试执行的事件：

<script>
    $('#AccomplishmentTable tbody').on('click', '#Approve', function () {
        swal({
        title: "Approve this Accomplishment?",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#5cb85c",
        confirmButtonText: "Approve",
        closeOnConfirm: true,
        closeOnCancel: true
        },
        function (isConfirm) {
            if (isConfirm) {
                var url = "@Url.Action("Approve", "Utilities")";
                // $.get(url, { id: id }, function (e) {
                //     swal(e.MTitle, e.MBody, e.MType);
                // });
                console.log("Check");
                var table = $('#AccomplishmentTable').DataTable();
                    table
                    .row($(this).parents('tr'))
                    .remove()
                    .draw();
            } 
        });
    });
</script>

编辑： 我正在使用ASP.NET MVC，这是我的代码 UI 以避免混淆

【问题讨论】：

@Satindersingh 我正在使用Asp.Net MVC。我编辑的不好。
我认为c#和asp.net-mvc标签在这里无关紧要，.NET的datatable标签应该替换为正确的datatables标签。

标签： jquery datatables

【解决方案1】：

您有一个简单的范围问题，this 指的是嵌入式确认函数（或它是什么），而不是外部事件处理程序。改为这样做：

$('#AccomplishmentTable tbody').on('click', '#Approve', function () {
  var row = $(this).closest('tr');
  var api = $('#AccomplishmentTable').DataTable();

    swal({
    title: "Approve this Accomplishment?",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#5cb85c",
    confirmButtonText: "Approve",
    closeOnConfirm: true,
    closeOnCancel: true
    },
    function (isConfirm) {
        if (isConfirm) {
            var url = "@Url.Action("Approve", "Utilities")";
            // $.get(url, { id: id }, function (e) {
            //     swal(e.MTitle, e.MBody, e.MType);
            // });
            console.log("Check");
            api.row(row).remove().draw();
        } 
    });
});

【讨论】：

【解决方案2】：

我遇到了类似的问题并尝试了几个示例，但找到了最好的方法 here。

我修改了一些东西，它对我有用

var tableOSList = $('#example').DataTable({
        "pageLength": 3,
        "aoColumnDefs": [
            { "bSortable": false, "aTargets": ["_all"] } //disable ordering events and takeout the icon
        ],
        "bLengthChange": false,
        "bFilter": false,
        "data": jsonObj,
        "columns":
            [
                {
                    "data": "imageName",
                },

                {
                    "data": "imageSize"
                },
                {
                    "render": function (data, type, full, meta) {
                        return '<a href="" class="editor_remove"><span class="fa fa-trash fa-2x"></span></a>';

                },
            ]

    });
}

$('#example').on('click', 'a.editor_remove', function (e) {

    if (confirm("Do you want to delete the file?")) {

        e.preventDefault();

        $(this).parents("tr").remove();
    }
   
});

【讨论】：