jQuery分页的下一个和上一个按钮不起作用

Question

Please help me to do custom dynamic pagination next and previous. Here is my work which is available in this example. I have given in a static page. actually, I am trying it for dynamic page. Please guide me to do the pagination

<table id="myTable">
    <thead>
    <tr>
        <th>S.No</th>
        <th>Category</th>
        <th>Product</th>
        <th>Price</th>
        <th>Status</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Clothing</td>
        <td>North Jacket</td>
        <td>$189.99</td>
        <td>In-stock</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Shoes</td>
        <td>Nike</td>
        <td>$59.99</td>
        <td>In-stock</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Electronics</td>
        <td>LED TV</td>
        <td>$589.99</td>
        <td>Out of stock</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Sporting </td>
        <td>Ping Golf </td>
        <td>$159.99</td>
        <td>In-stock</td>
    </tr>
    <tr>
        <td>5</td>
        <td>Clothing</td>
        <td>Sweater</td>
        <td>$19.99</td>
        <td>In-stock</td>
    </tr>
    <tr>
        <td>6</td>
        <td>Clothing</td>
        <td>North Jacket</td>
        <td>$189.99</td>
        <td>In-stock</td>
    </tr>
    <tr>
        <td>7</td>
        <td>Shoes</td>
        <td>Nike</td>
        <td>$59.99</td>
        <td>In-stock</td>
    </tr>
    <tr>
        <td>8</td>
        <td>Electronics</td>
        <td>LED TV</td>
        <td>$589.99</td>
        <td>Out of stock</td>
    </tr>
    <tr>
        <td>9</td>
        <td>Sporting</td>
        <td>Ping Golf</td>
        <td>$159.99</td>
        <td>In-stock</td>
    </tr>
    <tr>
        <td>10</td>
        <td>Shoes</td>
        <td>Nike</td>
        <td>$59.99</td>
        <td>In-stock</td>
    </tr>
    <tr>
        <td>11</td>
        <td>Electronics</td>
        <td>LED TV</td>
        <td>$589.99</td>
        <td>Out of stock</td>
    </tr>
    <tr>
        <td>12</td>
        <td>Sporting </td>
        <td>North Jacket </td>
        <td>$159.99</td>
        <td>In-stock</td>
    </tr>

    </tbody>

$('#myTable').after('<nav id="nav" style="display:inline;width:350px;"><ul class="pagination" style="margin: 2px 0 0;"></ul></nav>');
var rowsShown = 5;
var rowsTotal = $('#myTable tbody tr').length;
var numPages = Math.round(rowsTotal/rowsShown);
console.log("mat",Math.round(numPages) );
$('.pagination').append('<li><a id="previous" href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>');
for(i = 0;i < numPages;i++) {
    var pageNum = i + 1;
    console.log("te",pageNum);
    $('.pagination').append('<li><a id="tot1"href="#" rel="'+i+'">'+pageNum+'</a></li>');
    console.log("i", pageNum, numPages)
    if(i == numPages -1){
        $('.pagination').append('<li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>');
    }
}
$('#myTable tbody tr').hide();
$('#myTable tbody tr').slice(0, rowsShown).show();
//$('#nav a:first').addClass('active');
$('.pagination a').bind('click', function(){
    $('.pagination a').removeClass('active');
    //$(this).addClass('active');
    var currPage = $(this).attr('rel');
    console.log("curnt",currPage);
    var startItem = currPage * rowsShown;
    var endItem = startItem + rowsShown;
    $('#myTable tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
    css('display','table-row').animate({opacity:1}, 300);
});

Example on jsfiddle

Thanks in advance

Answer 1

Try this

Fiddle Demo

 $('.pagination a').bind('click', function(){
            $('.pagination a').removeClass('active');
            //$(this).addClass('active');
            if($(this).attr("aria-label") == "Next")
            {
                                hf_page.value=parseInt(hf_page.value)+1;
                var startItem = hf_page.value * rowsShown;
            var endItem = startItem + rowsShown;

            }
            else if ($(this).attr("aria-label") == "Previous")
            {

                hf_page.value=parseInt(hf_page.value)-1
               var startItem = (hf_page.value) * rowsShown;
            var endItem = startItem + rowsShown;
            }
            else
            {
            var currPage = $(this).attr('rel');
            console.log("curnt",currPage);
            var startItem = currPage * rowsShown;
            var endItem = startItem + rowsShown;
                hf_page.value = currPage;
            }