javascript - 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

我的解决方案:

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