如何使用 jQuery jScroll 滚动表格行？答案

【问题标题】：How to scroll table rows with jQuery jScroll?如何使用 jQuery jScroll 滚动表格行？
【发布时间】：2019-10-22 11:51:22
【问题描述】：

jQueryjscroll 的有用示例并不多，事实上它默认情况下不适用于表格行，因为它将结果放入一个 div 元素中，这会搞砸表格。

我有这个 HTML 模板

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

我怎样才能使它成为 jScrollable？

【问题讨论】：

标签： jquery-plugins jquery-jscroll

【解决方案1】：

您需要自己的控制器来提供数据。这不是此解决方案的一部分。在这种情况下，输出必须是 HTML，并且必须包含表格的下 X 行。

用一个额外的 div 包裹的 HTML 模板。下一页链接（指向控制器）被添加为新行。 jscroll 将删除 A 和 TD 标签，但不会删除 TR，因为它不知道。我们必须稍后再做，否则空的TR 标签会破坏HTML。我在data 参数中传递了auto-trigger 和loading-html，我可以从javascript 代码访问它们。我在A 标签中使用nextPageLoad 类，这有助于我识别jscroll 相关链接。

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

javascript 代码。调试已激活！

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

【讨论】：