DataTables ajax.reload當保持分頁它跳轉到頁面的底部

Question

我使用jQuery DataTables與Ajax來源的數據。 我必須保持數據最新每30秒刷新頁面，而ajax.reload()是我需要的功能。

我把ajax.reload()一個setInterval函數內。

而且所有的作品都是正確的（如果你留在第1頁）。但是，當你在瀏覽頁面2或3，當setInterval燒製在桌子上，它可以讓你回到第1

所以...... 望着這個網址到文檔：http://datatables.net/reference/api/ajax.reload()

如果我通過「false」作爲保存當前分頁位置的第二個參數，並且分頁在重新加載時不會被重置。答對了！

它的工作原理！但是......我有一個新的問題，一個試圖解決整天，現在我卡住了。這就是爲什麼我發佈這個問題。

它保持分頁，但如果你不在第1頁上，每當ajax.reload()被觸發，頁面就會滾動（直接跳轉）到底部。

這非常不友好，不可讀，無法使用。 我不知道爲什麼頁面滾動到底部。

我發佈一個鏈接到我在我的網頁上使用我的簡單的數據表的js。 jsfiddle

 var url = table.data('url'); 
     var filterType = table.data('filtertype'); 

     var options = { 
      "ajax": { 
       "url": url, 
       "type": "GET", 
       "data": function (d) { 
        d.contact_type = filterType 
        // this variable will set by server when page load. It should be "lead", "prospect", "client". Leave empty to get all. 
       } 
      }, 
      "columns": [ 
       {"data": "html_is_company"}, 
       {"data": "name"}, 
       {"data": "html_type_label"}, 
       {"data": "created"}, 
       {"data": "last_update"}, 
       {"data": "html_actions"}, 
       {"data": "tsu"}, 
       {"data": "business_name"} 
      ], 
      "bLengthChange": false, 
      "pageLength": 20, 
      "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]], 
      "columnDefs": [ 
       { 
        "targets": [ 7 ], 
        "visible": false, 
        "searchable": true, 
       }, 
       { 
        "targets": [ 6, 7 ], 
        "searchable": false, 
        "visible": false 
       }, 
       { 
        "targets": [0, 5], 
        "searchable": false, 
        "orderable": false 
       }, 
       { 
        "targets": [ 4 ], 
        "render": function (data, type, row) { 
         return moment(data, IN_DATE_TIME_FORMAT, 'it').fromNow();//.format(DATE_TIME_FORMAT);////; 
        } 
       }, 
       { 
       // Sort column 4 (formatted date) by column 6 (hidden seconds) 
        "orderData":[ 6 ], 
        "targets": [ 4 ] 
       }], 
      "order": [[4, "desc"]], 
      "search": "_INPUT_", 
      "language": { 
       "sSearchPlaceholder": "Cerca...", 
       "paginate": { 
        "previous": '<i class="icon wb-chevron-left-mini"></i>', 
        "next": '<i class="icon wb-chevron-right-mini"></i>' 
       }, 
       //"url": "//cdn.datatables.net/plug-ins/1.10.9/i18n/Italian.json" 
      } 
     }; 

     var datatable = table.DataTable(options); 
     this.setDataTable(datatable); 

     setInterval(function(){ 
     datatable.ajax.reload(null, false); 
     }, 5000); 

Answer 1

我發現我工作的解決方案。

問題是「專注」於數據表分頁鏈接。

當用戶點擊一個鏈接頁面上，它設置該鏈接在一個焦點上，當ajax.reload()觸發瀏覽器讓你當注目元素。我的表格是頁面的最後一個元素，因此頁面會滾動到底部。

我得到了它，當我在頁面的其他區域點擊點擊第2頁鏈接之後。 「跳躍」問題消失了。

所以，我解決了當DataTables完成初始化並且完成ajax.reload()（感謝第一個允許您定義函數的參數）時觸發blur()。

在數據表選項添加此：

"initComplete": function(settings, json) { 
       $(".paginate_button > a").on("focus", function(){ 
        $(this).blur(); 
       }); 
      }, 

，然後在setInterval：

setInterval(function(){ 
      datatable.ajax.reload(function(){ 
       $(".paginate_button > a").on("focus", function(){ 
        $(this).blur(); 
       }); 
      }, false); 
     }, 30000); 

不知道這是否是 「最佳解決方案」 ...但它的工作原理和可以幫助某人。

Answer 2

jacopo.galli的解決方案是非常笨重，當我實現了我的表，但它可能是因爲我的代碼是一個爛攤子。添加blur（）的想法非常棒。

我重寫他的代碼位：

$(window).scroll(function(){ 
    $(".paginate_button > a").blur(); 
}); 

分頁欄上的按鈕，將「聚焦」一旦頁面滾動。 所以你的最終代碼應該是這樣的：

var url = table.data('url'); 
    var filterType = table.data('filtertype'); 

    var options = { 
     "ajax": { 
      "url": url, 
      "type": "GET", 
      "data": function (d) { 
       d.contact_type = filterType 
       // this variable will set by server when page load. It should be "lead", "prospect", "client". Leave empty to get all. 
      } 
     }, 
     "columns": [ 
      {"data": "html_is_company"}, 
      {"data": "name"}, 
      {"data": "html_type_label"}, 
      {"data": "created"}, 
      {"data": "last_update"}, 
      {"data": "html_actions"}, 
      {"data": "tsu"}, 
      {"data": "business_name"} 
     ], 
     "bLengthChange": false, 
     "pageLength": 20, 
     "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]], 
     "columnDefs": [ 
      { 
       "targets": [ 7 ], 
       "visible": false, 
       "searchable": true, 
      }, 
      { 
       "targets": [ 6, 7 ], 
       "searchable": false, 
       "visible": false 
      }, 
      { 
       "targets": [0, 5], 
       "searchable": false, 
       "orderable": false 
      }, 
      { 
       "targets": [ 4 ], 
       "render": function (data, type, row) { 
        return moment(data, IN_DATE_TIME_FORMAT, 'it').fromNow();//.format(DATE_TIME_FORMAT);////; 
       } 
      }, 
      { 
      // Sort column 4 (formatted date) by column 6 (hidden seconds) 
       "orderData":[ 6 ], 
       "targets": [ 4 ] 
      }], 
     "order": [[4, "desc"]], 
     "search": "_INPUT_", 
     "language": { 
      "sSearchPlaceholder": "Cerca...", 
      "paginate": { 
       "previous": '<i class="icon wb-chevron-left-mini"></i>', 
       "next": '<i class="icon wb-chevron-right-mini"></i>' 
      }, 
      //"url": "//cdn.datatables.net/plug-ins/1.10.9/i18n/Italian.json" 
     } 
    }; 

    var datatable = table.DataTable(options); 
    this.setDataTable(datatable); 

    $(window).scroll(function(){ 
    $(".paginate_button > a").blur(); 
    }); 

    setInterval(function(){ 
    datatable.ajax.reload(null, false); 
    }, 5000); 

Answer 3

我的解決辦法：

"fnDrawCallback": function(data) { 
    $(".paginate_button > a").on("focus", function() { 
     $(this).blur(); 
    }); 
}