Question

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

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

预期：显示确认弹出，但它仍然落在第一个。

这是我的代码：

 $('#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

编辑：你必须一般取消重绘并在bootbox回调中手动进行分页（因为它不能像真正的模式对话框那样使用本机javascript confirm（））。我修改了上面的例子，在分页上加入了一个bootbox确认对话框：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;                
                }
            }
        }
    });
});

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

1 个答案: