[英]How to get the count of checked rows of a table on a button click using jQuery?
[英]How to scroll table rows with jQuery jScroll?
jQuery
jscroll
的有用示例並不多,事實上它默認情況下不適用於表格行,因為它將結果放入一個 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?
您需要自己的 controller 來提供數據。 這不是此解決方案的一部分。 在這種情況下,output 必須是 HTML 並且必須包含表的下 X 行。
HTML 模板用一個額外的 div 包裹。 下一頁鏈接(指向控制器)被添加為新行。 jscroll
將刪除A
和TD
標簽,但不會刪除TR
,因為它不知道它。 我們必須稍后再做,否則空的TR
標簽會破壞HTML
。 我在data
參數中傳遞了auto-trigger
和loading-html
,我可以從 javascript 代碼訪問它們。 我在A
標簽中使用nextPageLoad
class 可以幫助我識別與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);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.