Dynamic load more button on multiple tables

122
January 29, 2020, at 6:30 PM

I have two standard tables (maybe more in the future) with over 100 rows each. I've inserted a load more button for each table over 8 rows.

Only one button works (the first table). I assume I need to assign this code for EACH table for it to work? But unsure of how to do that?

Each button needs to control their own table alone.

    var totalRows = $('.spotify-table tr').length;
    if ( totalRows > 8 ) {
        $('.spotify-table').after('<div class="load-more"><input id="show" type="button" value="Load More" /></div>');
    }
    var totalrowshidden;
    var rows2display=8;
    var rem=0;
    var rowCount=0;
    var forCntr;
    var forCntr1;
    var MaxCntr=0;
    $('#hide').click(function() {
        var rowCount = $('.spotify-table tr').length;
        rowCount=rowCount/2;
        rowCount=Math.round(rowCount)
        for (var i = 0; i < rowCount; i++) {
            $('tr:nth-child('+ i +')').hide(300); 
        }                            
    });
    $('#show').click(function() {
        rowCount = $('.spotify-table tr').length;
        MaxCntr=forStarter+rows2display;
        if (forStarter<=$('.spotify-table tr').length) {
            for (var i = forStarter; i < MaxCntr; i++) {
             $('tr:nth-child('+ i +')').show(200);
            }
            forStarter=forStarter+rows2display
        } else {
            $('#show').hide();
        }
    });
    var rowCount = $('.spotify-table tr').length;
    for (var i = $('.spotify-table tr').length; i > rows2display; i--) {
        rem=rem+1
        $('tr:nth-child('+ i +')').hide(200);
    }
    forCntr=$('.spotify-table tr').length-rem;
    forStarter=forCntr+1
READ ALSO
How to make KendoStockChart x-axis label visible for last datapoint i.e show label for categoryaxis.max using step while using navigator

How to make KendoStockChart x-axis label visible for last datapoint i.e show label for categoryaxis.max using step while using navigator

I use KendoStockChart to plot an year data, How can show label of categoryaxismax label everytime on the categoryaxis up on navigation selection

121
jQuery - Remove active class if checkbox checked (multiple conditions)

jQuery - Remove active class if checkbox checked (multiple conditions)

I want to maintain having only onemenu active at a time so I set up the code to remove the active class of the last

121