How to scroll table rows with jQuery jScroll?

Question

There is not many useful examples with jQuery jscroll and it is a fact it doesn't work with table rows by default because it puts the results into a div element which screws up the table.

I had this HTML template

<table class="table responsive-table-list">
    <thead>
        <tr>
            <th>label 1</th>
            <th>label 2</th>
            <th>label 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data 1.1</td>
            <td>data 1.2</td>
            <td>data 1.3</td>
        </tr>
        <tr>
            <td>data 2.1</td>
            <td>data 2.2</td>
            <td>data 2.3</td>
        </tr>
    <tbody>
</table>

How can I make it jScrollable?

Answer 1

You need your own controller which provides the data. This is not part of this solution. The output in this case has to be HTML and has to contain the next X rows of the table.

The HTML template wrapped with an extra div. The next page link (pointing to the controller) is added as a new row. jscroll will remove the A and the TD tags but will not remove the TR as it is not aware of it. We have to do it later otherwise the empty TR tags break the HTML . I pass the auto-trigger and the loading-html in the data argument which I can access from the javascript code. I use nextPageLoad class in the A tag which helps me to recognize the jscroll related link.

<div class="jscroll" data-auto-trigger="true" data-loading-html="Loading..">
    <table class="table responsive-table-list">
        <thead>
        <tr>
            <th>label 1</th>
            <th>label 2</th>
            <th>label 3</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>data 1.1</td>
            <td>data 1.2</td>
            <td>data 1.3</td>
        </tr>
        <tr>
            <td>data 2.1</td>
            <td>data 2.2</td>
            <td>data 2.3</td>
        </tr>
        <tr>
            <td colspan="3">
                <a href="/link-to-action-for-the-next-rows" class="nextPageLoad">Next page</a>
            </td>
        </tr>
        <tbody>
    </table>
</div>

the javascript code. The debug is activated!

var EndlessScroll = (function ($) {

    function init() {
        var $scrollEl = $('.jscroll');
        var autoTrigger = $scrollEl.data('auto-trigger');
        var loadingHtml = $('<span>');
        loadingHtml.text($scrollEl.data('loading-html'));

        $scrollEl.jscroll({
            loadingHtml: loadingHtml[0].outerHTML,
            padding: 20,
            autoTrigger: autoTrigger,
            nextSelector: '.nextPageLoad',
            callback: function (data) {
                var $table = $('.jscroll table tbody');

                // moves the new elements from the jscroll div to the table
                $('.jscroll-added tr').appendTo($table);

                // removes the empty tr encapsulated the jscroll pagination
                var rows = $table.find('tr');
                rows.each(function(idx, el){
                    if ($(el).children().length === 0) {
                        $(el).remove();
                    }
                });
            },
            debug: true
        });
    }


    return {
        init: init
    };
})(jQuery);

$(EndlessScroll.init);