How to display 5 more rows of a table on the click on a button using jQuery

Question

I pre-load a table with all of its rows. However, I only want to show only the top 10 rows that are within the <tbody> tag and now every <tr> in the table.

So here is what I have done so far:

var trs =  $("#internalActivities > table > tbody > tr");
trs.hide();
trs.slice(0, 9).show(); 

$("#seeMoreRecords").click(function (e) { 
    e.preventDefault();
    $("#internalActivities tr:hidden").slice(0, 10).show();          
});

$("#seeLessRecords").click(function (e) { 
    e.preventDefault();
    $("#internalActivities tr").slice(9, 19).hide();          
});

The issue with the code above is that:

1. It does look for the <tr> only with the the <tbody> tag.
2. The see less button need to remove 10 rows from the bottom up and not all of them.
3. I need to hide the button seeMoreRecords if all of them are displayed.
4. If the minimum row is displayed then hide the seeLessRecords button.

Final look my script will display 10 rows by defaults and if the user click see more then you see 10 more. So it is an increment of 10 at a time and once you hit max then hide the see more button. See less is visible only if there are more than 10 rows displayed.

Answer 1

1. You can use the selector $("#internalActivities tr") which will select all <tr>'s, regardless of a <tbody> or not

2. You need to save the current displayed index in a separate variable, or calculate the current index based on how many elements are selected (use the .length property)

3. Check the current count of elements displayed and show/hide the corresponding buttons.

Example

HTML

<table id="internalActivities">

</table>
<input type="button" id="seeMoreRecords" value="More">
<input type="button" id="seeLessRecords" value="Less">

Javascript

for (var i=0;i<21;i++) {
    $('#internalActivities').append('<tr><td>my data</td></tr>');
}

var trs = $("#internalActivities tr");
var btnMore = $("#seeMoreRecords");
var btnLess = $("#seeLessRecords");
var trsLength = trs.length;
var currentIndex = 10;

trs.hide();
trs.slice(0, 10).show(); 
checkButton();

btnMore.click(function (e) { 
    e.preventDefault();
    $("#internalActivities tr").slice(currentIndex, currentIndex + 10).show();
    currentIndex += 10;
    checkButton();
});

btnLess.click(function (e) { 
    e.preventDefault();
    $("#internalActivities tr").slice(currentIndex - 10, currentIndex).hide();          
    currentIndex -= 10;
    checkButton();
});

function checkButton() {
    var currentLength = $("#internalActivities tr:visible").length;

    if (currentLength >= trsLength) {
        btnMore.hide();            
    } else {
        btnMore.show();   
    }

    if (trsLength > 10 && currentLength > 10) {
        btnLess.show();
    } else {
        btnLess.hide();
    }

}

I created a jsFiddle demo to see this in action.

Answer 2

1) If you need the tr tags not only with the tbody tag then rewrite your jquery select to

$("#internalActivities > table tr");

2) You can get the number of rows and use that count in the slice

var $records = $("#internalActivities tr");
$records.slice($records.length - 10, $records.length).hide();

3) Check the count of hidden rows in the seeMoreRecords click event handler

if ($("#internalActivities tr:hidden").length === 0) {
    $("#seeMoreRecords").hide();
}

4) Check the count of shown rows

if ($("#internalActivities tr").not(":hidden").length <= 10) {
    $("#seeLessRecords").hide();
}