jqueryjquery-uisimplepager

How to show (1-15) of 50 records on a page using jquery pagination


I'm using the jquery ui simplePagination plugin, and I'm trying to display the number of current record on the page.

I have something like this:

enter image description here

The feature I'm trying to achieve here is the 'Showing 1-15 of 50' ( these are the items on one page and 50 is the total number of items in the json object).

Here is how I implemented the above attached feature using jquery simplepagination:

var items = $("table tbody tr");
var numItems = items.length; //total items
var perPage = 10; //per page
var startindex = 15;
totalPages = ceil(numItems / perPage);
currentPage = ceil(startindex / perPage);
items.slice(perPage).hide();
$(".pagination-page").pagination({
    items: numItems,
    itemsOnPage: perPage,
    cssStyle: "light-theme",
    onPageClick: function (pageNumber) {
        var showFrom = perPage * (pageNumber - 1);
        var showTo = showFrom + perPage;

        items.hide().slice(showFrom, showTo).show();
    }
});

With the above code I can get the <prev> and <next> buttons to work and display the records accordingly. However, I'm not able to figure out how can I display the current record range (1-15) using jquery.


Solution

  • That should helps you http://plnkr.co/edit/3elrtkqzChAnHCal9Fg1?p=preview

    JS:

       $(function() {
      var items = $("table tbody tr");
      var numItems = items.length-1; //total items
      var perPage = 3; //per page
      var startindex = 0;
      totalPages = Math.floor(numItems / perPage);
      currentPage = Math.ceil(startindex / perPage);
      $('.pagination-info').text("from " + (startindex + 1) + " to " + (perPage * (startindex + 1)));
    
    
      items.slice(perPage + 1).hide();
      $(".pagination-page").pagination({
        items: numItems,
        itemsOnPage: perPage,
        cssStyle: "light-theme",
    
        onPageClick: function(pageNumber) {
    
          var showFrom = ((pageNumber-1)  * perPage)+1;
          var showTo = (showFrom + perPage) ;
    
          $('.pagination-info').text("from " + (showFrom) + " to " + ((showTo-1)>numItems ? numItems :(showTo-1) ));
    
          items.hide().slice(showFrom, showTo).show();
        }
      });
    });
    

    HTML :

    just add span

    <span class="pagination-info"></span>