我正在做一个jQuery表分页。这个想法是在表有很多行的时候显示分页。
我已经成功地显示了所有的分页链接,包括Previous和Next链接,但是我还想要省略号(…)显示并缩短分页链接,如下所示。
这里有一个简单的例子来说明。这是我现在的代码:页数:1 2 3 4 [5]6 7 8 9 10 11
这就是我想要达到的目标:
页面:…[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++;
}
我已经按照您的要求显示了省略号。但是,目前它只在您单击任何一个分页链接时起作用。一旦你知道了这个想法,你就很容易在点击之前让省略号出现。我把这一步留给你,直接向你介绍我所做的一切。
- 在以下代码中搜索注释
// Added class and id in li start
以查看第一个更改。评论中清楚地提到了它的作用。它添加了id和类以供将来参考。 - 在以下代码中搜索注释
// Added few lines from here start
以查看一些其他代码。首先,我们隐藏除前一个和下一个链接之外的所有链接,如果存在,也删除省略号,其次,我们显示三个分页链接,第三,我们检查是否只显示两个链接而不是三个链接,并确保其中三个被显示,最后,如果页面超过三个,我们显示省略号。
更新:
我已经更新了代码与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>
我认为你的来源是工作!但是也许,你忘记设置插件了:
<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">