DataTableでページを変更すると確認ポップアップを表示する方法

Question

DataTableの最初のページに着陸しています。 次に、2ページ目に移動します。

実際に確認のポップアップが表示されますが、2番目のページに移動します。

期待されています：確認のポップは表示されますが、まだ最初に着陸します。ここで

は私のコードです：

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

EDIT：あなたは、それは本当のように動作しないよう（一般的に再描画をキャンセルし、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;     
       } 
      } 
     } 
    }); 
});