如何在引导程序中使用导航选项卡实现分页？

Posted 2023-05-08

【中文标题】如何在引导程序中使用导航选项卡实现分页？

【英文标题】：How to implement pagination with nav tabs in bootstrap?

【发布时间】：2018-09-22 03:29:21

【问题描述】：

我尝试对导航选项卡使用分页。我有 2 个导航选项卡，第一个是主页，第二个是配置文件。在单击配置文件选项卡时，主页选项卡将处于活动状态。表必须来。但这里它不正确。

这是我的代码

<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>

脚本：

$.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);

);

对于主页选项卡，它工作正常，但是当我单击配置文件选项卡时，如果我单击主页选项卡然后在配置文件上增加分页，则分页会再次显示。如何解决这个问题任何人都可以建议我怎么做。

【参考方案1】：

使用下面的代码使用简单易懂的概念

$(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>