limit the pagination number that shows the pager-Twitter bootstrap

Sam
June 14, 2018
128 views
0 votes
2 Answers

I have the html table and did the pagination for that it is working fine,but i want to show the pager like 5 then on click of >> this arrow the next 5 has to show,because when i have more number of data it gives the lengthy pager that occupies the more space.
Here is my fiddle

Html:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>

 <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
 <table class="tb_pagination_width">
   <tbody id="myTable">
     <tr>
       <td>1</td>
     </tr>
     <tr>
       <td>2</td>
     </tr>
     <tr>
       <td>3</td>
     </tr>
     <tr>
       <td>4</td>
     </tr>
        <tr>
       <td>5</td>
     </tr>
     <tr>
       <td>6</td>
     </tr>
     <tr>
       <td>7</td>
     </tr>
     <tr>
       <td>8</td>
     </tr>
   </tbody>
</table>
<div class="col-md-12 text-center">
  <ul class="pagination" id="myPager"></ul>
</div>

script:

<script>
  $.fn.pageMe = function(opts){
    var $this = this,
    defaults = {
      perPage: 10,
      showPrevNext: false,
      hidePageNumbers: false
    },
    settings = $.extend(defaults, opts);

    var listElement = $this;
    var perPage = settings.perPage; 
    var children = listElement.children();
    var pager = $('.pager');

    if (typeof settings.childSelector!="undefined") {
      children = listElement.find(settings.childSelector);
    }

    if (typeof settings.pagerSelector!="undefined") {
      pager = $(settings.pagerSelector);
    }

    var numItems = children.size();
    var numPages = Math.ceil(numItems/perPage);

    pager.data("curr",0);

    if (settings.showPrevNext){
      $('<li><a href="#" class="prev_link">«</a></li>').appendTo(pager);
    }

    var curr = 0;
    while(numPages > curr && (settings.hidePageNumbers==false)){
      $('<li><a href="#" class="page_link">'+(curr+1)+'</a></li>').appendTo(pager);
      curr++;
    }

    if (settings.showPrevNext){
      $('<li><a href="#" class="next_link">»</a></li>').appendTo(pager);
    }

    pager.find('.page_link:first').addClass('active');
    pager.find('.prev_link').hide();
    if (numPages<=1) {
      pager.find('.next_link').hide();
    }
    pager.children().eq(1).addClass("active");

    children.hide();
    children.slice(0, perPage).show();

    pager.find('li .page_link').click(function(){
      var clickedPage = $(this).html().valueOf()-1;
      goTo(clickedPage,perPage);
      return false;
    });
    pager.find('li .prev_link').click(function(){
      previous();
      return false;
    });
    pager.find('li .next_link').click(function(){
      next();
      return false;
    });

    function previous(){
      var goToPage = parseInt(pager.data("curr")) - 1;
      goTo(goToPage);
    }

    function next(){
      goToPage = parseInt(pager.data("curr")) + 1;
      goTo(goToPage);
    }

    function goTo(page){
      var startAt = page * perPage,
      endOn = startAt + perPage;

      children.css('display','none').slice(startAt, endOn).show();

      if (page>=1) {
        pager.find('.prev_link').show();
      }
      else {
        pager.find('.prev_link').hide();
      }

      if (page<(numPages-1)) {
        pager.find('.next_link').show();
      }
      else {
        pager.find('.next_link').hide();
      }

      pager.data("curr",page);
      pager.children().removeClass("active");
      pager.children().eq(page+1).addClass("active");

    }
  };

  $(document).ready(function(){
    $('#myTable').pageMe({pagerSelector:'#myPager',showPrevNext:true,hidePageNumbers:false,perPage:1});
  });
</script>

can anyone suggest me how to solve this

Answers

Here is the demo : https://jsfiddle.net/thecreativedev/0dwzrfnm/

 $.fn.pageMe = function(opts) {
  var $this = this,
    defaults = {
      perPage: 10,
      showPrevNext: false,
      hidePageNumbers: false
    },
    settings = $.extend(defaults, opts);

  var listElement = $this;
  var perPage = settings.perPage;
  var children = listElement.children();
  var pager = $('.pager');

  if (typeof settings.childSelector != "undefined") {
    children = listElement.find(settings.childSelector);
  }

  if (typeof settings.pagerSelector != "undefined") {
    pager = $(settings.pagerSelector);
  }

  var numItems = children.size();
  var numPages = Math.ceil(numItems / perPage);

  pager.data("curr", 0);

  if (settings.showPrevNext) {
    $('<li><a href="#" class="prev_link">«</a></li>').appendTo(pager);
  }

  var curr = 0;
  // Added class and id in li start
  while (numPages > curr && (settings.hidePageNumbers == false)) {
    $('<li id="pg' + (curr + 1) + '" class="pg"><a href="#" class="page_link">' + (curr + 1) + '</a></li>').appendTo(pager);
    curr++;
  }
  // Added class and id in li end

  if (settings.showPrevNext) {
    $('<li><a href="#" class="next_link">»</a></li>').appendTo(pager);
  }

  pager.find('.page_link:first').addClass('active');
  pager.find('.prev_link').hide();
  if (numPages <= 1) {
    pager.find('.next_link').hide();
  }
  pager.children().eq(1).addClass("active");

  children.hide();
  children.slice(0, perPage).show();
  if (numPages > 5) {
    $('.pg').hide();
    $('#pg1,#pg2,#pg3,#pg4,#pg5').show();
    $("#pg5").after($("<li class='ell'>").html("<span>...</span>"));
  }

  pager.find('li .page_link').click(function() {
    var clickedPage = $(this).html().valueOf() - 1;
    goTo(clickedPage, perPage);
    return false;
  });
  pager.find('li .prev_link').click(function() {
    previous();
    return false;
  });
  pager.find('li .next_link').click(function() {
    next();
    return false;
  });

  function previous() {
    var goToPage = parseInt(pager.data("curr")) - 1;
    goTo(goToPage);
  }

  function next() {
    goToPage = parseInt(pager.data("curr")) + 1;
    goTo(goToPage);
  }

  function goTo(page) {
    var startAt = page * perPage,
      endOn = startAt + perPage;

    // Added few lines from here start

    $('.pg').hide();
    $(".ell").remove();
    var prevpg = $("#pg" + page).show();
    var currpg = $("#pg" + (page + 1)).show();
    var nextpg = $("#pg" + (page + 2)).show();
    if (prevpg.length == 0) nextpg = $("#pg" + (page + 3)).show();
    if (prevpg.length == 1 && nextpg.length == 0) {
      prevpg = $("#pg" + (page - 1)).show();
    }
    if (curr > 5) {
      if (page > 1) prevpg.before($("<li class='ell'>").html("<span>...</span>"));
      if (page < curr - 2) nextpg.after($("<li class='ell'>").html("<span>...</span>"));
    }
    currpg.addClass("active").siblings().removeClass("active");
    // Added few lines till here end


    children.css('display', 'none').slice(startAt, endOn).show();

    if (page >= 1) {
      pager.find('.prev_link').show();
    } else {
      pager.find('.prev_link').hide();
    }

    if (page < (numPages - 1)) {
      pager.find('.next_link').show();
    } else {
      pager.find('.next_link').hide();
    }

    pager.data("curr", page);
    /*pager.children().removeClass("active");
    pager.children().eq(page + 1).addClass("active");*/

  }
};

         $(document).ready(function(){

           $('#myTable').pageMe({pagerSelector:'#myPager',showPrevNext:true,hidePageNumbers:false,perPage:1});

         });

Just add a function adjustPager as below, it works fine if I didn’t misunderstood the question.

$.fn.pageMe = function(opts){
             var $this = this,
                 defaults = {
                     perPage: 10,
                     showPrevNext: false,
                     hidePageNumbers: false
                 },
                 settings = $.extend(defaults, opts);

             var listElement = $this;
             var perPage = settings.perPage; 
             var children = listElement.children();
             var pager = $('.pager');

             if (typeof settings.childSelector!="undefined") {
                 children = listElement.find(settings.childSelector);
             }

             if (typeof settings.pagerSelector!="undefined") {
                 pager = $(settings.pagerSelector);
             }

             var numItems = children.size();
             var numPages = Math.ceil(numItems/perPage);

             pager.data("curr",0);

             if (settings.showPrevNext){
                 $('<li><a href="#" class="prev_link">«</a></li>').appendTo(pager);
             }

             var curr = 0;
             while(numPages > curr && (settings.hidePageNumbers==false)){
                 $('<li><a href="#" class="page_link">'+(curr+1)+'</a></li>').appendTo(pager);
                 curr++;
             }

             if (settings.showPrevNext){
                 $('<li><a href="#" class="next_link">»</a></li>').appendTo(pager);
             }

             pager.find('.page_link:first').addClass('active');
             pager.find('.prev_link').hide();
             if (numPages<=1) {
                 pager.find('.next_link').hide();
             }
               pager.children().eq(1).addClass("active");

             children.hide();
             children.slice(0, perPage).show();

             pager.find('li .page_link').click(function(){
                 var clickedPage = $(this).html().valueOf()-1;
                 goTo(clickedPage,perPage);
                 return false;
             });
             pager.find('li .prev_link').click(function(){
                 previous();
                 return false;
             });
             pager.find('li .next_link').click(function(){
                 next();
                 return false;
             });

             function previous(){
                 var goToPage = parseInt(pager.data("curr")) - 1;
                 goTo(goToPage);
             }

             function next(){
                 goToPage = parseInt(pager.data("curr")) + 1;
                 goTo(goToPage);
             }

             function goTo(page){
                 var startAt = page * perPage,
                     endOn = startAt + perPage;

                 children.css('display','none').slice(startAt, endOn).show();

                 if (page>=1) {
                     pager.find('.prev_link').show();
                 }
                 else {
                     pager.find('.prev_link').hide();
                 }

                 if (page<(numPages-1)) {
                     pager.find('.next_link').show();
                 }
                 else {
                     pager.find('.next_link').hide();
                 }

                 pager.data("curr",page);
                 pager.children().removeClass("active");
                 pager.children().eq(page+1).addClass("active");
                 adjustPager(page+1);
             }
                 
               // this to add
               function adjustPager(page){
                 var length = pager.children().length;
                 for(var i=1;i<length-1;i++)
                 {
                    if(i<6 && page<6)
                      pager.children().eq(i).show();
                    else if(i>=(length-6) && page>(length-6))
                      pager.children().eq(i).show();
                    else if(i<(page-2) || i>(page+2))
                      pager.children().eq(i).hide();
                    else
                      pager.children().eq(i).show();
                 }
               };
               adjustPager(1);// call the first time
               
               // add end
         };

         $(document).ready(function(){

           $('#myTable').pageMe({pagerSelector:'#myPager',showPrevNext:true,hidePageNumbers:false,perPage:1});

         });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>

 <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
 <table class="tb_pagination_width">
   <tbody id="myTable">
     <tr>
       <td>1</td>
     </tr>
     <tr>
       <td>2</td>
     </tr>
     <tr>
       <td>3</td>
     </tr>
     <tr>
       <td>4</td>
     </tr>
        <tr>
       <td>5</td>
     </tr>
     <tr>
       <td>6</td>
     </tr>
     <tr>
       <td>7</td>
     </tr>
     <tr>
       <td>8</td>
     </tr>
     <tr>
       <td>9</td>
     </tr>
     <tr>
       <td>10</td>
     </tr>
     <tr>
       <td>11</td>
     </tr>
     <tr>
       <td>12</td>
     </tr>
   </tbody>
</table>
<div class="col-md-12 text-center">
  <ul class="pagination" id="myPager"></ul>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.