为什么 bootstrap- 在不点击的情况下确认数据表触发服务器端代码

Question

我有一个 bootstrap 项目，我使用 datatables 插件。我想在删除行之前添加确认。当我先用中继器和链接按钮填充 table 时，我可以正确地完成它。但我现在想要，只发送我需要的信息。然后我尝试用服务器端模式来做。这是我的代码：

  $('#LBENEF').DataTable({
        "aaSorting": [],
        "processing": true,
        "serverSide": true,
        "ajax": "/Beneficiaire/ListBeneficiaires.asmx/GetListBenef",
        "columnDefs": [{ "orderable": false, "targets": 6 }],
        "columns": [
            { "data": null, },
            { "data": "TypeLibelle", },
            { "data": "ID_CLIENT" },
            { "data": "NomPrenom" },
            { "data": "SitLibelle" },
            { "data": "PerimLibelle" },
            { "data": null }
        ],
        "createdRow": function (row, data, index) {
            if (!data.Actif) { $('td', row).eq(0).html("<span Class='glyphicon glyphicon-ban-circle'></span>"); }
            else { $('td', row).eq(0).html(""); }
            if (data.PeutConsult) { $('td', row).eq(6).html('<a href="/edit.aspx?ID=' + data.ID + '"><span Class="glyphicon glyphicon-pencil"></span></a>'); }
            if (data.PeutSup) { $('td', row).eq(6).append('<a onclick="DelBenef(' + data.ID + ');" data-toggle="confirmation" href="#"><span class="glyphicon glyphicon-trash"></span></a>'); }
        },
        drawCallback : function (oSettings) { $('[data-toggle="confirmation"]').confirmation(paramPopOverFileList);  }
    });

    function DelBenef(IdBen) {
        $.ajax(
            {
                type: "POST", url: "/toto.asmx/DelBenef", contentType: "application/json; charset=utf-8", dataType: "json", data:'{"IdBenef":' + IdBen + "}",
                success: function (msg) {
                    if (msg.d.Reussi) { $('#LBENEF').DataTable().ajax.reload(); }
                    else { AfficheMsgRetour(msg.d); }
                },
                error: function () { //Code errors
                       }
            });
    }

我的 Table 看起来不错，我可以搜索或订购，我可以编辑。我的问题是当我点击垃圾桶图标时，我看到了弹出式确认，但同时 DelBenef 函数在 toto 上运行。asmx/DelBenef... 有人有想法吗？

Answer 1

尝试在 $.ajax 调用前添加确认

function DelBenef(IdBen) ({
    if (window.confirm("Do you really want to delete this ?")) { 
        $.ajax({
            ...
        });
    }
})

Doc

Answer 2

我创建了一个带有弹出窗口的 fiddle here（包含 HTML 内容）。为使其工作而执行的代码更改是 -

在drawcallback函数中

$("[data-toggle=confirmation]").confirmation({
    title: "Confirmation required!",
    html: true,
    content: "<h1> Are you sure you want to delete </h1>",
    onConfirm: function(event, element) {
        alert('Replace this alert with your ajax call!');
    }
});

createdRow功能的改动仅供测试。您可以将其替换为代码中的图像。

希望对您有所帮助！

https://jsfiddle.net/ksivasenthil/cxbacd3v/13/

Answer 3

只是为了完成 Siva 的回复我发现一个简单的方法

 <script>
    var last_clicked_id = null;
    $('#LBENEF').DataTable({
        rowId: 'ID',
        "aaSorting": [],
        "processing": true,
        "serverSide": true,
        "ajax": "/MaPage.asmx/GetListBenef",
        "columnDefs": [{ "orderable": false, "targets": 6 }],
        "columns": [
            { "data": null, },
            { "data": "TypeLibelle", },
            { "data": "ID_CLIENT" },
            { "data": "NomPrenom" },
            { "data": "SitLibelle" },
            { "data": "PerimLibelle" },
            { "data": null }
        ],
        "createdRow": function (row, data, index) {
            if (!data.Actif) { $('td', row).eq(0).html("<span Class='glyphicon glyphicon-ban-circle'></span>"); }
            else { $('td', row).eq(0).html(""); }
            if (data.PeutConsult) { $('td', row).eq(6).html('<a href="/BENEFICIAIRE/edit.aspx?ID=' + data.ID + '"><span Class="glyphicon glyphicon-pencil"></span></a>'); }
            if (data.PeutSup) { $('td', row).eq(6).append('<a onclick="last_clicked_id=' + data.ID + ';" data-toggle="confirmation" href="#"><span class="glyphicon glyphicon-trash"></span></a>'); }
        },
        drawCallback: function (oSettings) {
            paramPopOverFileList["onConfirm"] = function (event, element) { DelBenef(); };
            $('[data-toggle="confirmation"]').confirmation(paramPopOverFileList);
        }
    });

    function DelBenef() {
        $.ajax(
            {
                type: "POST", url: "/MaPage.asmx/DelBenef", contentType: "application/json; charset=utf-8", dataType: "json", data: '{"IdBenef":' + last_clicked_id + "}",
                success: function (msg) {
                    if (msg.d.Reussi) { $('#LBENEF').DataTable().ajax.reload(); }
                    else { AfficheMsgRetour(msg.d); }
                },
                error: function () { AfficheMsgRetour({ Titre: "Désactivation bénéficiaire", Reussi: false, Msg: "Erreur accès fonction" }); }
            });
    }
</script>

只需使用一个全局变量关联 singleton=true（已完成）。我在 link 元素上的 onclik 中更新了这个。尽情享受吧

为什么 bootstrap- 在不点击的情况下确认数据表触发服务器端代码

Why bootstrap-confirmation on datatable fire server side code without clicking

jquery

datatables

bootstrap-4

bootstrap-confirmation