Table rows show with button

Question

I need your advice with my code. First, I show code:

$('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

How it works:

Load page = show 10 <tr>s. When the user click button (bottom), it shows 10 more rows but never show last. Do you know why and what have I to do with that problem? When the 9 is changing to 4, all works. Why?

Answer 1

Your code

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

You set the ‘visible’ initially to be 10 by

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

So $(‘tr:gt(10)’) will return an empty array since it is selecting the <tr> tags from the 12th one and you only have 11th element. To fix this, I recommend you change

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

to

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

This problem is caused by the $(“:gt(index)”) selector. It looks like a css selector, which starts counting from 1. But it is actually a jQuery selector, which starts counting from 0. I hope this can help. Good luck.

Answer 2

It is because javascript arrays are zero index based. Meaning the first item in the array is index 0. .length will give you the number of items in the array but that number is 1 greater than the greatest index since the first is 0. I hope that make sense.

Try changing the visible variable to minus one.

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

To illustrate:

$('tr:visible') 

would return an array as such

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

The length of the array is 4, but the greatest index is 3.

Then :gt() in jQuery goes based on index and not item number. So if I wanted item number 2 I would use index 1, :gt(1), that would return the second item in the array.