Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 601
AndrejJanoga Avatar asked Nov 08 '22 05:11

AndrejJanoga


1 Answers

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

like image 136
coderGuy Avatar answered Nov 15 '22 12:11

coderGuy