使用引导程序的表分页不起作用

我已经使用下面的代码进行表分页，包括bootstrap提供的javascript。我在分页三通，"1", "2", "3"这将打开表下的行中的相应数字，当我点击下一步按钮后，我打开"3", "1"页面应该由"4", "2"由"5"取代，"3"通过"6"，使用引导程序的表分页不起作用

这是我的JS和HTML文件

HTML

<div class="container"> 
    <div class="row"> 
     <div class="table-responsive"> 
     <table class="table table-hover"> 
      <thead> 
      <tr> 
       <th>#</th> 
       <th>Table heading</th> 
       <th>Table heading</th> 
       <th>Table heading</th> 
       <th>Table heading</th> 
       <th>Table heading</th> 
       <th>Table heading</th> 
      </tr> 
      </thead> 
      <tbody id="myTable"> 
      <tr> 
       <td>1</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
      </tr> 
      <tr> 
       <td>2</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
      </tr> 
      <tr> 
       <td>3</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
      </tr> 
      <tr> 
       <td>4</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
      </tr> 
      <tr class="success"> 
       <td>5</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
      </tr> 
      <tr> 
       <td>6</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
      </tr> 
      <tr> 
       <td>7</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
      </tr> 
      <tr> 
       <td>8</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
      </tr> 
      <tr> 
       <td>9</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
      </tr> 
      <tr> 
       <td>10</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
      </tr> 
      <tr> 
       <td>11</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
      </tr> 
      <tr> 
       <td>12</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
       <td>Table cell</td> 
      </tr> 
      </tbody> 
     </table> 
     </div> 
     <div class="col-md-12 text-center"> 
     <ul class="pagination pagination-lg pager" id="myPager"></ul> 
     </div> 
    </div> 
</div>

个js文件：

$.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); 
    var curr = 0; 

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

    $('<li><a href="#" class="page_link">'+(1)+'</a></li>').appendTo(pager); 
    $('<li><a href="#" class="page_link">'+(2)+'</a></li>').appendTo(pager); 
    $('<li><a href="#" class="page_link">'+(3)+'</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); 
     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); 
     if(page >=1) { 
      document.getElementByClassName(".page_link").value = curr + 1; 
      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:2}); 

});

请帮

来源

2016-11-04 Owner

我觉得这个链接很有帮助：http://botmonster.com/jquery-bootpag/#.WBxNNS197cs –

或者你可以使用http://www.jqueryscript.net/demo/Simple-Customizable-Pagination-Plugin-与-jQuery的引导-拼焊板-分页/ –

当你这样做$('#myTable').pageMe(...)，listElement.children();发现<thead>和<tbody>元素。使用$('#myTable tbody')找到<tr>元素。

来源

2018-01-23 13:07:26 Vindolin

使用引导程序的表分页不起作用

回答

相关问题