I want to use next and previous button in my pagination

Question

I want to use my pagination with next, previous, last and start button working. My jquery is:

$(document).ready(function(){
            $('#table').after('<div id="nav" style="width:800px; margin:0 auto;"></div>');
            var rowsShown = 2;
            var rowsTotal = $('#table tbody tr').length;
            var numPages = rowsTotal/rowsShown;
            for(var i = 0;i < numPages;i++) {
                var pageNum = i + 1;
                $('#nav').append('<a href="#" rel="'+i+'">'+pageNum+'</a> ');
            }
            $('#table tbody tr').hide();
            $('#table tbody tr').slice(0, rowsShown).show();
            $('#nav a:first').addClass('active').css("color", "blue");
            $('#nav a').bind('click', function(){

                $('#nav a').removeClass('active').css("color", "black");;
                $(this).addClass('active').css("color", "blue");;
                var currPage = $(this).attr('rel');
                var startItem = currPage * rowsShown;
                var endItem = startItem + rowsShown;
                $('#table tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
                        css('display','table-row').animate({opacity:1}, 300);
            });
        });

My jsfiddle is here jsfiddle. And in the pagination i want to see only 3 number remaining should come as i click next button. Can someone help me to solve this question. I tried very hard to solve, search on net but i could not solve. If someone can solve this then please help me. thanks in advance.

Answer 1

how about this

have implemented three things

1. Next
2. Prev

3. Show only three numbers

   $(document).ready(function() {
       $("#table").after('<div id="nav" style="width:800px; margin:0 auto;"></div>');
       var e = 4;
       var t = $("#table tbody tr").length;
       var n = t / e;
       for (var r = 0; r < n; r++) {
           var i = r + 1;
           $("#nav").append('<a class="btn nums" href="#" rel="' + r + '">' + i + "</a> ")
       }
       $("#table tbody tr").hide();
       $("#table tbody tr").slice(0, e).show();
       $("#nav a:first").addClass("active").css("color", "blue");
       if (n > 3) {
           $("#nav").append('<a class="btn" href="#" rel="next">></a> ');
           $("#nav").prepend('<a class="btn" href="#" rel="prev" style="display:none"><</a> ')
       }
       $("#nav").on("click", "a", function() {
           var t = $(".nums");
           var n = $(this).attr("rel");
           if (n == "next") {
               n = $("#nav a.active").attr("rel");
               n++
           } else if (n == "prev") {
               n = $("#nav a.active").attr("rel");
               n--
           }
           var r = n * e;
           var i = r + e;
           $("#nav a").removeClass("active").css("color", "black");
           $('#nav a[rel="' + n + '"]').addClass("active").css("color", "blue");
           $("#table tbody tr").css("opacity", "0.0").hide().slice(r, i).css("display", "table-row").animate({
               opacity: 1
           }, 300);
           if ($("#nav a").last().prev().hasClass("active")) $("#nav a").last().hide();
           else $("#nav a").last().show();
           if (!$("#nav a").first().next().hasClass("active")) $("#nav a").first().show();
           else $("#nav a").first().hide();
           t.hide();
           if (t.filter(".active").is(t.first())) t.first().show().next().show().next().show();
           else if (t.filter(".active").is(t.last())) t.last().show().prev().show().prev().show();
           else {
               $('#nav a[rel="' + n + '"]').show().prev().show();
               $('#nav a[rel="' + n + '"]').next().show()
           }
       }).find("a.active").trigger("click")
   })
   

UPDATE

FIDDLE

there will be a variable called numLimit. change this to the number you want and it will work

UPDATE 2

FIDDLE

Implemented

1. First
2. Last