顯示更多點擊表

Question

我已經到了與我的JQuery的地方，我需要一些援助，我想創建一個更多的表格行，但我想顯示最初的第一個10，然後加載它們10，在一個時間，但目前其1和1在一個時間：

<script type="text/javascript"> 
var curr = 0; 
var rowN = $('.table tr').length; 

$('.table tr').eq(curr).siblings().hide(); // hide all but current one 

$('a.load_more').on('click',function(e){ 
    e.preventDefault(); // prevent default anchor behavior  
    $('.table tr').eq(++curr).show(); 
}); 

</script> 

我曾試圖改變目前的，但它只是開始於一個特定的行號，而不是第1行，所以我想它顯示然後點擊加載下十個，依此類推...

Answer 1

避免使用全局變量的更好的解決方案是在顯示的行上放置一個類。然後，您可以使用該類來查找最後一個可見元素的索引並顯示下一組元素。嘗試：

$('table tr:first').addClass('active'); 
 

 
$('a.load_more').on('click', function(e) { 
 
    e.preventDefault(); 
 
    var $rows = $('table tr'); 
 
    var lastActiveIndex = $rows.filter('.active:last').index(); 
 
    $rows.filter(':lt(' + (lastActiveIndex + 3) + ')').addClass('active'); 
 
});

table tr { display: none; } 
 
table tr.active { display: table-row; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr><td>Row 1</td></tr> 
 
    <tr><td>Row 2</td></tr> 
 
    <tr><td>Row 3</td></tr> 
 
    <tr><td>Row 4</td></tr> 
 
    <tr><td>Row 5</td></tr> 
 
    <tr><td>Row 6</td></tr> 
 
    <tr><td>Row 7</td></tr> 
 
    <tr><td>Row 8</td></tr> 
 
    <tr><td>Row 9</td></tr> 
 
    <tr><td>Row 10</td></tr> 
 
</table> 
 

 
<a href="#" class="load_more">Load more</a>

在它顯示每次點擊2個還行上述樣品，但是根據需要這可以很容易進行修正。

Answer 2

這會幫助嗎？ fiddle here

<table> 
    <tr> 
    <td>1</td> 
    </tr> 
    <tr> 
    <td>1</td> 
    </tr> .............. 
</table> 


$(document).ready(function() { 

    var pagelength = 10; 
    var pageIndex = 1; 
    //hide all tr greater than page length 
    var selector = "tr:gt(" + pagelength + ")"; 
    $(selector).hide(); 

    $("#loadMore").click(function(){ 
    var itemsCount = ((pageIndex * pagelength) + pagelength); 
    var selector = "tr:lt(" + itemsCount + ")"; 
    $(selector).show(); 
    pageIndex++; 
    }); 

});