DataTables ajax.reload when keeping pagination it jumps to the bottom of the page

Question

I'm using jQuery DataTables with ajax sourced data. I have to keep the data up to date every 30 seconds without refreshing the page, and ajax.reload() is the function that I need.

I put ajax.reload() inside a setInterval function.

And all works right (if you stay on page 1). But when you surf the table on page 2 or 3, when setInterval is fired, it gets you back to the page 1.

So ... Looking to docs at this url: http://datatables.net/reference/api/ajax.reload()

if I pass "false" as second parameter it holds the current paging position, and paging is not reset on reload. BINGO!

It works! BUT ... I have a new problem that a tried to solve the all day and now I'm stuck. That's why I post this question.

It keeps paging but if you are not on page 1, every time that ajax.reload() is fired, the page scrolls (jump directly) to the bottom.

It's very unfriendly, unreadable, unusable. I don't know WHY the page scrolls to the end-bottom.

I post a link to my simple datatable js that I use on my page. 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

My solution:

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

Answer 2

jacopo.galli's solution was very clunky when I implemented for my table, but it's probably because my code was a mess. The idea of adding blur() is great thou.

I rewrite his code a bit:

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

The buttons on the pagination bar will be "unfocused" once the page scrolls. So your final code should look like this:

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