如何使用jQuery缩短表分页

Question

我正在研究jQuery表分页。 这个想法是在表有很多行时显示分页。

我设法显示了所有分页链接，包括上一个和下一个链接，但是我还希望省略号（...）显示并缩短分页链接，如下所示。

这是一个简单的例子，可以很清楚地说明。 这就是我现在所拥有的：

页数：1 2 3 4 [5] 6 7 8 9 10 11

这是我要实现的目标：

页数：... 4 [5] 6 ...

PS：代码应使用引导样式。 请帮忙。

编码 ：

 $.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"); } }; $(document).ready(function(){ $('#myTable').pageMe({pagerSelector:'#myPager',showPrevNext:true,hidePageNumbers:false,perPage:4}); }); 

 <link rel="stylesheet" type="text/css" href="http://getbootstrap.com/1.4.0/assets/css/bootstrap.css"> <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> </tr> </thead> <tbody id="myTable"> <tr> <td>1</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>2</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>3</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>4</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr class="success"> <td>5</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>6</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>7</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>8</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>9</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>10</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>11</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>12</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>13</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>14</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>15</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>16</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>17</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>18</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>19</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>20</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>21</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> 

我尝试修改此功能，但没有结果

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

Answer 1

我设法按您的要求显示了省略号。 但是，当前仅当您单击任何一个分页链接时才有效。 一旦知道了主意，您就可以在单击之前先显示省略号。 我将这一步交给您，直接向您介绍我的工作。

1. 搜索注释// Added class and id in li start在以下代码中以// Added class and id in li start以查看第一个更改。 该评论中明确提到了它的作用。 它添加了id和class以供将来参考。
2. 搜索注释// Added few lines from here start下面的代码// Added few lines from here start ，在// Added few lines from here start以查看其他一些代码。 首先，我们隐藏除上一个和下一个链接之外的所有li，并删除省略号（如果存在的话）；其次，我们显示三个分页链接；其次，我们检查是否仅显示了两个链接而不是三个链接，并确保显示了三个链接，最后显示了省略号如果页面多于三个。

更新：

我已经更新了可与Bootstrap CSS结合使用的代码，并为您添加了省略号。 希望你满意。

 $.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; // 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 > 3) { $('.pg').hide(); $('#pg1,#pg2,#pg3').show(); $("#pg3").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 > 3) { 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: 4 }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <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> </tr> </thead> <tbody id="myTable"> <tr> <td>1</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>2</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>3</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>4</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr class="success"> <td>5</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>6</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>7</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>8</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>9</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>10</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>11</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>12</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>13</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>14</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>15</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>16</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>17</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>18</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>19</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>20</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>21</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> 

Answer 2

我认为您的资源就是工作！ 但是也许，您忘记设置插件了：

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" type="text/css" href="http://getbootstrap.com/1.4.0/assets/css/bootstrap.css">