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>

在上面的示例中，每次点击会显示另外两行，但可以根据需要轻松修改。

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

});

点击表格显示更多信息

2 个答案: