0

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?

UPDATE:

I've managed to get each button to control their own table, however I have another issue now.

When I click one load-more button, it loads the next 8 rows as it should, when I click the other load-more button, it loads the next 8 rows that were loaded in the previous table, so it jumps from 8 to 17, 18, 19... etc

You can see here in this codepen:
https://codepen.io/pixelboutiqueuk-the-lessful/pen/JjogZXa?editors=1000

This is what I currently have after many tweaks:

         // load more buttons
    var songTotalRows = $('.songs-table tr').length;
    if ( songTotalRows > 8 ) {
        $('.songs-table').after('<div class="load-more"><input id="song-show" type="button" value="Load More" /></div>');
    }
    
    var albumTotalRows = $('.album-table tr').length;
    if ( albumTotalRows > 8 ) {
        $('.album-table').after('<div class="load-more"><input id="album-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); 
        }                            
    });
    
    $('#song-show').click(function() {
        rowCount = $('.songs-table tr').length;
        MaxCntr=forStarter+rows2display;
    
        if (forStarter<=$('.songs-table tr').length) {
            for (var i = forStarter; i < MaxCntr; i++) {
             $('.songs-table tr:nth-child('+ i +')').show(200);
            }
            forStarter=forStarter+rows2display
        } else {
            $('#song-show').hide();
        }
    });
    
    $('#album-show').click(function() {
        rowCount = $('.album-table tr').length;
        MaxCntr=forStarter+rows2display;
    
        if (forStarter<=$('.album-table tr').length) {
            for (var i = forStarter; i < MaxCntr; i++) {
             $('.album-table tr:nth-child('+ i +')').show(200);
            }
            forStarter=forStarter+rows2display
        } else {
            $('#album-show').hide();
        }
    });
    
    var rowCount = $('.spotify-table tr').length;
    for (var i = $('.spotify-table tr').length; i > rows2display; i--) {
        rem=rem+1
        $('.spotify-table tr:nth-child('+ i +')').hide(200);
    }
    
    forCntr=$('.spotify-table tr').length-rem;
    forStarter=forCntr+1
Community
  • 1
  • 1
Leanne Dickenson
  • 11
  • 4
  • 1
    What is the relevant html snippet for this? You should probably assign show and hide as classes, instead of id's, at least if they are going to be assigned to two different objects (buttons). – Juan Carlos Ramirez Jan 28 '20 at 14:51
  • I'm using the 'Table Press' plugin so I don't have the HTML i'm afraid. Can I ask why classes and not IDS? – Leanne Dickenson Jan 29 '20 at 08:34
  • an id is meant to be a unique element identifier, in particular you might get unexpected behavior: https://stackoverflow.com/questions/8498579/how-jquery-works-when-there-are-multiple-elements-with-the-same-id – Juan Carlos Ramirez Jan 29 '20 at 17:03
  • Oh yes, of course. I knew that. So I've changed them to classes now, but now both buttons control both tables. They need to control their own table only. – Leanne Dickenson Jan 30 '20 at 09:43
  • Well, you need to be able to associate the table where the event happens in your function. Assuming the table is the parent of your button,you can use the this element to get the relevant table, something like: table= $(this).parent(); (rest of your function implementation) – Juan Carlos Ramirez Jan 31 '20 at 14:33
  • This is where I'm at: https://codepen.io/pixelboutiqueuk-the-lessful/pen/JjogZXa – Leanne Dickenson Feb 03 '20 at 10:59

0 Answers0