How to implement pagination with nav tabs in bootstrap?

Question

I try to use pagination for the nav tabs.i have 2 nav tabs first one is home and the second one is profile.intally the home tab will be active for that pagination works fine on click of the profile tab the pagination with table has to come.but here its not coming proper.

Here is my code

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.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>
<div class="container">
 <div class="row">
   <div class="col-md-11 col-sm-12 wf-tab">
     <!-- 2nd tab -->
     <div class="tabbable-panel" style="margin-top: 10px;">
       <div>
         <ul class="nav nav-tabs">   
           <li class="active">
             <a href="#tab_default_1" data-toggle="tab" class="">
               home </a>
           </li>
           <li>
             <a href="#tab_default_3" data-toggle="tab">          profile </a>
           </li>
         </ul>
         <div class="tab-content">
           <div class="tab-pane active" id="tab_default_1">
             <div>
               <!-- 1st -->
               <table>
                <tbody id="myTable">
                  <tr>
                          <td><div>1 </div></td>
                  </tr>
                   <tr>
                          <td><div>2 </div></td>
                  </tr>
                   <tr>
                          <td><div>3</div></td>
                  </tr>
                   <tr>
                          <td><div>4</div></td>
                  </tr>
                </tbody>
              </table>  

             </div> 
             <div class="col-md-12 text-center">
               <ul class="pagination" id="myPager"></ul>
             </div>
           </div>

           <div class="tab-pane" id="tab_default_3">
             <div>
                            <!-- 2ndt -->
               <table>
                  <tbody id="secondTable">
                    <tr>
                      <td><div>1 </div></td>
                    </tr>
                     <tr>
                      <td><div>2 </div></td>
                    </tr>
                     <tr>
                      <td><div>3</div></td>
                    </tr>
                     <tr>
                      <td><div>4</div></td>
                    </tr>
                  </tbody>
                </table>  
              </div> 
             <div class="col-md-12 text-center">
               <ul class="pagination" id="secondPager"></ul>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>                
  </div> 
</div>

Script:

$.fn.pageMe = function(opts){
    var $this = this,
        defaults = {
            perPage: 7,
            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");

    }
};
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var target = $(e.target).attr("href") // activated tab
   alert(target);
  if(target=="#tab_default_3"){
    $('#secondTable').pageMe({pagerSelector:'#secondPager',showPrevNext:true,hidePageNumbers:false,perPage:2});
  }
  else if(target==="#tab_default_1"){
   alert("===");
  }
});
$(document).ready(function(){

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

});

For the home tab its working fine but when i click on the profile tab the paginations display again if i click home tab and then on profile the pagination increases.how to solve this can anyone suggest me how to do.

Answer 1

Use Simple and easy concept by using below code

 $(document).ready(function(){ $('.next').click(function(){ $('.nav-tabs > .active').next('li').find('a').trigger('click'); }); $('.previous').click(function(){ $('.nav-tabs > .active').prev('li').find('a').trigger('click'); }); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script> <!-- tabs --> <div class="col-md-3 col-sm-3"> <ul class="nav nav-tabs nav-stacked nav-alternate"> <li class="active"> <a href="#tab_1" data-toggle="tab">Tab- 1 </a> </li> <li> <a href="#tab_2" data-toggle="tab">Tab - 2 </a> </li> <li> <a href="#tab_3" data-toggle="tab">Tab - 3 </a> </li> </ul> </div> <!-- tabs content --> <div class="col-md-9 col-sm-9"> <div class="tab-content tab-stacked nav-alternate"> <div id="tab_1" class="tab-pane active"> <div class="panel panel-default"> <div class="panel-body"> <p>Some Text Tab 1</p> </div> </div> <ul class="pager"> <li class="next"><a class="radius-0" href="#" data-toggle="tab">Next &rarr;</a></li> </ul> </div> <div id="tab_2" class="tab-pane"> <div class="panel panel-default"> <div class="panel-body"> <p>Some Text Tab 2</p> </div> </div> <ul class="pager"> <li class="previous"><a class="radius-0" href="#">&larr; Previous</a></li> <li class="next"><a class="radius-0" href="#">Next &rarr;</a></li> </ul> </div> <div id="tab_3" class="tab-pane"> <div class="panel panel-default"> <div class="panel-body"> <p>Some Text Tab 3</p> </div> </div> <ul class="pager"> <li class="previous"><a class="radius-0" href="#">&larr; Previous</a></li> </ul> </div> </div> </div>