DataTables ajax.reload在保持分頁時會跳轉到頁面底部

Question

我正在使用帶有ajax源數據的jQuery DataTables。 我必須每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

我的解決方案

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

Answer 2

當我為我的表實現時，jacopo.galli的解決方案非常笨重，但可能是因為我的代碼很亂。 添加模糊（）的想法很棒。

我稍微重寫了他的代碼：

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

我找到了一個適合我的解決方案。

問題在於DataTables分頁鏈接的“焦點”。

當用戶單擊鏈接頁面時，它會將焦點設置在該鏈接上，並且當ajax.reload()被觸發時，瀏覽器ajax.reload()焦點元素放在哪里。 我的表是頁面的最后一個元素，因此頁面滾動到底部。

點擊第2頁鏈接后，當我點擊頁面的另一個區域時，我得到了它。 “跳躍”問題消失了。

因此，當DataTables完成初始化並且ajax.reload()完成時（由於允許您定義函數的第一個參數blur() ，我解決了觸發blur()問題。

在DataTables選項中，我添加了以下內容：

"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);

不知道這是否是“最佳解決方案”......但它有效，可以幫助某人。