Các hàng trong bảng hiển thị cùng với nút

Question

Tôi cần lời khuyên của bạn với mã của tôi. Trước tiên, tôi hiển thị mã:

$('tr:gt(9)').hide(); 
 
$('button.btn-primary').on('click', function() { 
 
    var visible = $('tr:visible').length; 
 
    $('tr:gt('+visible+')').slice(0,5).show(); 
 
})

<table class="table table-striped table-bordered"> 
 
      <thead> 
 
       <tr> 
 
       <th>Producent</th> 
 
       <th>Produkt</th> 
 
       <th>Foto</th> 
 
       <th>Typ</th> 
 
       <th>Cena netto</th> 
 
       <th>Cena brutto</th> 
 
       <th>Interface</th> 
 
       <th>Ilość dysków</th> 
 
       <th>Pojemność</th> 
 
       <th>RAID</th> 
 
       <th>Wydajność</th> 
 
       <th>Opis</th> 
 
       <th>Specyfikacja</th> 
 
       <th>Zakup</th> 
 
       </tr> 
 
      </thead> 
 
    
 
      <tbody class="results"> 
 
      <tr><td>G-Tech</td><td>vcxv</td><td><img src="admin/forms/temp/" style = "width:50px;height:50px;" alt="BRAK ZDJĘCIA"/></td><td>DAS Direct Attached Storage</td><td>50.00</td><td>70.00</td><td>USB 3.0</td><td>5</td><td>400</td><td>5*5*</td><td>500</td><td>dsadsad</td><td style='display:none;'>1</td><td><a href=http://www.o2.pl target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'> 
 
    <input type='hidden' name='id' value='34' /> 
 
    <input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr><td>LaCie</td><td>Macierz</td><td><img src="admin/forms/temp/depositphotos_12071772-Website-Development-PHP-HTML-Arrows.jpg" style = "width:50px;height:50px;" alt="BRAK ZDJĘCIA"/></td><td>SAN Srorage Area Network</td><td>98.00</td><td>120.00</td><td>miniSAS</td><td>6</td><td>4 TB</td><td>5</td><td>Duża</td><td>Tu powinien być opis, ale testuje i go nie wpisuje! </td><td style='display:none;'>2</td><td><a href=http://www.google.pl target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'> 
 
    <input type='hidden' name='id' value='36' /> 
 
    <input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr><td>LaCie</td><td>dsad</td><td><img src="admin/forms/temp/IMG_20150504_074450.jpg" style = "width:50px;height:50px;" alt="BRAK ZDJĘCIA"/></td><td>SAN Srorage Area Network</td><td>50.00</td><td>70.00</td><td>Thunderbolt</td><td>8</td><td>400</td><td>8/8/8</td><td>500</td><td>fasdf</td><td style='display:none;'>2</td><td><a href=http://fsdfsdf target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'> 
 
    <input type='hidden' name='id' value='37' /> 
 
    <input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr><td>mLogic</td><td>test</td><td><img src="admin/forms/temp/ff.jpg" style = "width:50px;height:50px;" alt="BRAK ZDJĘCIA"/></td><td>DAS Direct Attached Storage</td><td>80.00</td><td>100.00</td><td>Thunderbolt</td><td>8</td><td>900</td><td>5/8/8</td><td>600</td><td>fsdfd</td><td style='display:none;'>1</td><td><a href=http://fsdfds target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'> 
 
    <input type='hidden' name='id' value='38' /> 
 
    <input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr><td>Promise</td><td>Zdjęcie</td><td><img src="admin/forms/temp/depositphotos_12071772-Website-Development-PHP-HTML-Arrows.jpg" style = "width:50px;height:50px;" alt="BRAK ZDJĘCIA"/></td><td>DAS Direct Attached Storage</td><td>4564.00</td><td>999999.99</td><td>Thunderbolt</td><td>4</td><td>5</td><td>1</td><td>300</td><td>SPrawdzam czy działaja fotki .... .... .. .. .. .</td><td style='display:none;'>1</td><td><a href=http://feasd target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'> 
 
    <input type='hidden' name='id' value='39' /> 
 
    <input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr><td>Promise</td><td>g</td><td><img src="admin/forms/temp/rc.jpg" style = "width:50px;height:50px;" alt="BRAK ZDJĘCIA"/></td><td>DAS Direct Attached Storage</td><td>45.00</td><td>5.00</td><td>Thunderbolt</td><td>12</td><td>1</td><td>1</td><td>l</td><td>l</td><td style='display:none;'>1</td><td><a href=http://l target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'> 
 
    <input type='hidden' name='id' value='40' /> 
 
    <input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr><td>Promise</td><td>jj</td><td><img src="admin/forms/temp/" style = "width:50px;height:50px;" alt="BRAK ZDJĘCIA"/></td><td>DAS Direct Attached Storage</td><td>1.00</td><td>1.00</td><td>Thunderbolt</td><td>2</td><td>j</td><td>j</td><td>j</td><td>n</td><td style='display:none;'>1</td><td><a href=http://j target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'> 
 
    <input type='hidden' name='id' value='43' /> 
 
    <input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr><td>Promise</td><td>jj</td><td><img src="admin/forms/temp/" style = "width:50px;height:50px;" alt="BRAK ZDJĘCIA"/></td><td>DAS Direct Attached Storage</td><td>1.00</td><td>1.00</td><td>Thunderbolt</td><td>2</td><td>j</td><td>j</td><td>j</td><td>n</td><td style='display:none;'>1</td><td><a href=http://j target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'> 
 
    <input type='hidden' name='id' value='44' /> 
 
    <input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr><td>G-Tech</td><td>Tesciowa</td><td><img src="admin/forms/temp/babcia xd.jpg" style = "width:50px;height:50px;" alt="BRAK ZDJĘCIA"/></td><td>NAS Network Attached Storage</td><td>1.00</td><td>3.00</td><td>LAN</td><td>4</td><td>45</td><td>45</td><td>45</td><td>Chciałbym pozbyć się teściowej. Wredna babka ciągle ma jakieś problemy. </td><td style='display:none;'>2</td><td><a href=http://69 target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'> 
 
    <input type='hidden' name='id' value='45' /> 
 
    <input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr><td>LaCie</td><td>Macierz</td><td><img src="admin/forms/temp/depositphotos_12071772-Website-Development-PHP-HTML-Arrows.jpg" style = "width:50px;height:50px;" alt="BRAK ZDJĘCIA"/></td><td>SAN Srorage Area Network</td><td>98.00</td><td>120.00</td><td>miniSAS</td><td>6</td><td>4 TB</td><td>5</td><td>Duża</td><td>Tu powinien być opis, ale testuje i go nie wpisuje! </td><td style='display:none;'>2</td><td><a href=http://www.google.pl target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'> 
 
    <input type='hidden' name='id' value='49' /> 
 
    <input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr>   </tbody> 
 
      </table> 
 
    <button type="button" class="btn btn-primary btn-md"> 
 
    Pokaż więcej 
 
</button>

Fiddle

Cách hoạt động:

tải page = hiển thị 10 <tr> s. Khi người dùng nhấp vào nút (dưới cùng), nó sẽ hiển thị 10 hàng khác nhưng không bao giờ hiển thị cuối cùng. Bạn có biết tại sao và tôi phải làm gì với vấn đề đó? Khi 9 đang thay đổi thành 4, tất cả đều hoạt động. Tại sao?

Answer 1

Mã của bạn

var visible = $('tr:visible').length; 
    $('tr:gt('+visible+')').slice(0,5).show(); 

Bạn đặt 'nhìn thấy' ban đầu là 10 bởi

$('tr:gt(9)').hide(); 

Vì vậy $(‘tr:gt(10)’) sẽ trả về một mảng trống kể từ khi nó được chọn <tr> thẻ từ một 12 và bạn chỉ có yếu tố thứ 11. Để khắc phục điều này, tôi khuyên bạn nên thay đổi

var visible = $('tr:visible').length; 

để

var visible = $('tr:visible').length - 1; 

Vấn đề này là do bộ chọn $(“:gt(index)”). Nó trông giống như một bộ chọn css, mà bắt đầu đếm từ 1. Nhưng nó thực sự là một bộ chọn jQuery, mà bắt đầu đếm từ 0. Tôi hy vọng điều này có thể giúp đỡ. Chúc may mắn.

Answer 2

Đó là do mảng javascript không dựa trên chỉ mục. Có nghĩa là mục đầu tiên trong mảng là chỉ số 0. .length sẽ cung cấp cho bạn số lượng mục trong mảng nhưng số đó lớn hơn chỉ số lớn nhất kể từ lần đầu tiên là 0. Tôi hy vọng điều đó có ý nghĩa.

Thử thay đổi biến số visible thành số trừ.

var visible = $('tr:visible').length - 1; 

Để minh họa:

$('tr:visible') 

sẽ trả về một mảng như vậy

[ 
    <tr>...</tr>, // index 0 
    <tr>...</tr>, // index 1 
    <tr>...</tr>, // index 2 
    <tr>...</tr> // index 3 
] 

Chiều dài của mảng là 4, nhưng chỉ số lớn nhất là 3.

Sau đó, :gt() trong jQuery dựa trên index và không phải là số mục. Vì vậy, nếu tôi muốn mục số 2 tôi sẽ sử dụng chỉ mục 1,: gt (1), sẽ trả về mục thứ hai trong mảng.