javascript - 在DataTable中更改页面时如何显示确认弹出窗口

Question

我正在登陆 DataTable 的第一页，进行一些更改。然后我转到第二页。

实际上，显示了确认弹出窗口，但它导航到第二页。

预期:已显示确认 pop，但它仍然在第一个着陆。

这是我的代码:

 $('#dataTable-id').on( 'page.dt', function (event) {            
if( change ){ 
    bootbox.dialog({
        title: "Confirmation",
        message : "Discard changes?",
        buttons :{
            main: {
                label : "Leave",
                className : "btn-primary",
                callback: function (){
                    // To avoid broking page/length controller
                    // move to other pages
                    return true; // cancel draw
                }
            },
            cancel: {
                label : "Stay",
                className : "btn-default",
                callback : function() {
                    // stay at current page.
                    return true;
                }
            }   
        },onEscape: function () {return true;}
    });

}

});

如何在页面更改前显示确认弹窗？

Answer 1

page.dt 事件仅供引用，无法取消。

您可以通过编写一个自定义的 preDrawCallback 来解决这个限制，就像这里讨论的那样:https://datatables.net/forums/discussion/25507

编辑:您通常必须取消重绘并在引导框回调中手动执行分页(因为它不像 native javascript confirm() 那样作为真正的模式对话框工作)。我修改了上面的示例以在分页上合并引导框确认对话框:https://jsfiddle.net/bk4nvds5/

$(document).ready(function () {    
    var pageLen = 10;

    var originalPage = 0;
    var originalPageLen = pageLen;
    var gotoPage = 0;
    var gotoPageLen = originalPageLen;
    var fromBootbox = false;

    var table = $('#example').DataTable({
        "pageLength": pageLen,
        "preDrawCallback": function (settings) {

            if(table){ // ignore first draw

                if (!fromBootbox) {
                    // To avoid broking page/length controller, we have to reset the paging information
                    gotoPage = settings._iDisplayStart;
                    gotoPageLen = settings._iDisplayLength;                
                    bootbox.confirm("Are you sure?", function(result) {
                      console.log("goto page" + gotoPage + " (result: " + result + ")");
                                        if (result) {
                        fromBootbox = true;
                        table.page.len(gotoPageLen);
                        table.page(gotoPage / gotoPageLen).draw(false);
                        fromBootbox = false;
                      }
                                        });
                    settings._iDisplayStart = originalPage;
                    settings._iDisplayLength = originalPageLen;
                    $('[name="example_length"]').val(originalPageLen);

                    return false; // cancel draw

                }else{
                    originalPage = settings._iDisplayStart;
                    originalPageLen = settings._iDisplayLength;                
                }
            }
        }
    });
});