CODEWITHSUNDEEP
jquerydatatablesdatatables-1.10
AndrejJanoga
AndrejJanoga

Reputation: 51

DataTables Infinite Scroll in 1.10

After updating DataTables to 1.10, bScrollInfinite was replaced by new extension Scroller. Problem is that Scroller is working with virtual scrollbar within table's div. I want to create simple (I know, infinite scroller has lot of troubles) infinite scroll by MAIN BROWSER scrollbar.

Currently, I've something like that:

var dataTable = $('#data-table').DataTable({
    serverSide: true,
    pageLength: 100,
    searching: true,
    fixedHeader: {
        header: true,
        headerOffset: 50
    },
    ajax: {
        url: '/url',
        method: 'POST'
    },
    columns: [ 'col1', 'col2' ],
});

$(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
        console.log("bottom!");
        dataTable.page('next').draw('page');
    }
});

This works fine but it replaces existing rows by new rows (from new page). I've experimented with success callback of Ajax call and rows().add(...).draw() method but after firing draw(), I got infinite loop (because draw calls Ajax) and not infinite scroll :(

Basically, I need to add new rows to end of the table instead of replacing existing rows.

Btw, similar question was posted to DataTables forum but without helpful answer.

Upvotes: 5

Views: 6173

Answers (1)

Akhil Gautam
Akhil Gautam

Reputation: 169

table.datatable({      
      iDisplayLength: 25,
      serverSide: true,
      ordering: false,
      searching: false,
      sAjaxSource: //url here,
      scrollY: 1014 //can be any value,
      scroller: {
        loadingIndicator: true
      }
}

This is will work but one thing you should keep in mind to INCLUDE THE SCROLLER PLUGIN. It is not a part of jquery.datatables.js

Upvotes: 1

Related Questions