Pagination with only arrows

How do I modify the code below not to show page numbers but a back and forth arrow to flip through a table?

        $('#lessons-table').after('<div id="nav"></div>');
        var rowsShown = 5;
        var rowsTotal = $('#lessons-table tbody tr').length;
        console.log(rowsTotal);

        var numPages = rowsTotal/rowsShown;
        for(i = 0;i < numPages;i++) {
            var pageNum = i + 1;
            $('#nav').append('<a href="#" rel="'+i+'">'+pageNum+'</a> ');
        }
        $('#lessons-table tbody tr').hide();
        $('#lessons-table tbody tr').slice(0, rowsShown).show();
        $('#nav a:first').addClass('active');
        $('#nav a').bind('click', function(e){
            e.preventDefault();
            $('#nav a').removeClass('active');
            $(this).addClass('active');
            var currPage = $(this).attr('rel');
            var startItem = currPage * rowsShown;
            var endItem = startItem + rowsShown;
            $('#lessons-table tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
            css('display','block').animate({opacity:1}, 800);
        });

I wouldn’t do it just by blindly making broad changes to your code without being able to test it.

Please supply a test or demo page with the existing working code, so that we can use that as a basis from which to guide you to making further changes.

Hi Paul - if I create a demo page or give you access (login/password) would you be able to look at it?

Naive replacement

        for(i = 0;i < numPages;i++) {
            var pageNum = i + 1;
            $('#nav').append('<a href="#" rel="'+i+'">'+pageNum+'</a> ');
        }

=>

$('#nav').append('<a href="#" rel="-1">&lt;</a>');
$('#nav').append('<a href="#" rel="1">&gt;</a>');
            $('#nav a').removeClass('active');
            $(this).addClass('active');
            var currPage = $(this).attr('rel');

=>

currPage += Number($(this).attr('rel'));

and add a var currPage = 1 initializer somewhere.

1 Like

Im going to play around with this…thank you!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.