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 tag and now every <

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