implementing infinite scrolling with data tables in rails using jquery-datatables-rails

Question

I'm trying to implement infinite scrolling with data tables as described here: and having some issues

this is what I've done so far:

//JS
@.load_datatables = (container, options) ->
    container = "" if not container?
    datatable_options = {
      "destroy": true
      "serverSide": true
      "processing": true
      "lengthMenu": [40]
      "scroller": true
      "scrollY": "200",
      "scrollCollapse": true
      "dom": "<'row'<'col-xs-12 filter'f>r>t<'row'<'col-xs-12'p>>"
    }

$(this).dataTable(datatable_options).removeClass('hidden')

and I have dataTables/extras/dataTables.scroller required both in both of my base asset files(script and CSS).

However, I'm facing the following problems:

One: A whole new table is getting rendered in my .dataTables_scrollBody

Two: the table is not fetching more data on scroll (Infinite scroll not responding)

Three: I sometimes get an error: Uncaught TypeError: Cannot read property 'style' of undefined.

My html(or erb) is as follow:

  <div class="row">
    <div class="col-md-12">
      <table id="loans" class="datatable hidden click-through styled" data-search-label="Loans search" data-source="<%= data_path(:format => 'json') %>" >
        <thead>
          <tr>
            <th>#</th>
            <th>#</th>
            <th>#</th>
            ...
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </div>

What can I be doing wrong? Is my template well set up?

Any help here is well appreciated!

Answer 1

As of now (2019), the solution to datatable infinite scroll is to use the Scroller plugin. The documentation is quite explicit, all you really need to add is

scroller: true,
paging: true