如何使用jQuery jScroll滚动表格行?

Question

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>

如何使它可滚动？

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