Implement button navigation: [first] [next] [previous] [last]

3

Explanation:

I have a table in HTML + jQuery and I have an enumerated paging that is functional, but I would like to add an additional navigation to it.

Question:

I would like to add an implementation, of which it would be a 4-button navigation that should work as follows:

  • Button: First - Feature: Navigate to the first page.
  • Button: Previous - functionality: navigate to the previous page.
  • Button: Next - Feature: Navigate to the next page.
  • Button: Last - functionality: navigate to the last page.
  • Note:

    I use jQuery paginate in my table, as the example demonstrates.

    Example:

    JSFiddle

    SOLUTION

    I found this jquery plugin on the net, solved my case, thank you jQuery * - *

    link

        
    asked by anonymous 11.11.2014 / 14:12

    1 answer

    2

    You can add the same way you created the pages, following the implementation of the buttons you requested, which work exactly the same as paging:

    Previous (prev) button

    $('<span class="page-number"></span>').text('Ant.').bind('click', { 
            newPage: currentPage-1
    }, function(event) { 
        if (currentPage > 0){
          currentPage = currentPage-1;//event.data['newPage'];
          $table.trigger('repaginate');
          var pgSelected = $('.active').prev();
          $(this).siblings().removeClass('active');    
          pgSelected.addClass('active');
        }
    }).prependTo($pager).addClass('clickable');
    

    Next button (next)

    $('<span class="page-number"></span>').text('Prox.').bind('click', { 
        newPage: currentPage+1
    }, function(event) { 
    if (currentPage < numPages-1){
        currentPage = currentPage+1;//event.data['newPage'];
        $table.trigger('repaginate');
        var pgSelected = $('.active').next();
        $(this).siblings().removeClass('active');    
        pgSelected.addClass('active');
      }
    }).appendTo($pager).addClass('clickable');
    

    First button

    $('<span class="page-number"></span>').text('First').bind('click', { 
            newPage: 1
        }, function(event) { 
            currentPage = 1;//event.data['newPage'];
            $table.trigger('repaginate');
            var pgSelected = $('.page-number').eq(2);
            $(this).siblings().removeClass('active');    
            pgSelected.addClass('active');
        }).prependTo($pager).addClass('clickable');
    

    Last button

    $('<span class="page-number"></span>').text('Ult.').bind('click', { 
            newPage: numPages-1
        }, function(event) { 
            currentPage = numPages-1;//event.data['newPage'];
            $table.trigger('repaginate');
            var pgLen = $('.page-number').length;
            var pgSelected = $('.page-number').eq(pgLen-3);
            $(this).siblings().removeClass('active');    
            pgSelected.addClass('active');
        }).appendTo($pager).addClass('clickable')
    

    Just add these codes to the javascript and they will be working, here's an example working on JSFiddle .

    Observations:

    The implementation of the buttons follows the same logic of the implementation of the pages however the change is in the control of the current page (currentPage) and page to be selected by the table, so in the case of the next and previous is simply currentPage-1 and% with the help of the functions currentPage+1 and prev() of jquery that identify the previous element (prev) and the next element respectively, it was possible to add the class next() to the element thus realizing the visual transition and setting the active as I said earlier, it is possible to make this transition in the table itself. For the first one would just select the first page, which would be the currentPage element because of the first and previous buttons that are 2 and 0 . Now the last one, you should just take the size of your pagination and decrease 1 that would be to set 1 to currentPage , however the visual part to add numPages-1 in this case would be active element because of the fact that there are two buttons at the end that would be the next and the last one.

        
    11.11.2014 / 15:08