我正在做一个项目，它使用 jquery.tablesorter.pager 进行分页。它在顶部有分页链接。现在我也想在底部添加相同的链接。我尝试在底部添加寻呼机 div，但它不起作用。任何帮助表示赞赏。
问问题
2494 次
3 回答
1
作为建议，您可以尝试使用相同的寻呼机，但在滚动时根据需要将其显示在顶部或底部。
我在表格上方和下方的页面中添加了 2 个 div 作为占位符：
<div id="PagerTop">
</div>
<table id="mytable" class="tablesorter">
</table>
<div id="PagerBottom">
</div>
然后我添加了 JQuery 函数来检查寻呼机元素是否在视图中：
// Check if the element is in view
function isScrolledIntoViewBottom(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var my_elem_offset = $(elem).offset(); //Need to check the offset first as there is a bug in IE
if (my_elem_offset === null) {
return false;
}
else {
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return (elemBottom >= docViewTop);
}
}
// Check if the element is in view
function isScrolledIntoViewTop(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var my_elem_offset = $(elem).offset(); //Need to check the offset first as there is a bug in IE
if (my_elem_offset === null) {
return false;
}
else {
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return (elemTop <= docViewBottom);
}
}
将此脚本添加到页面顶部以在滚动时检查寻呼机位置：
// When scrolling always make sure that the Pager for the table in view
// is either at the top or bottom of the table.
$(window).scroll(function () {
if (!isScrolledIntoViewBottom('#pager')) {
$("#pager").appendTo("#PagerBottom");
}
if (!isScrolledIntoViewTop('#pager')) {
$("#pager").appendTo("#PagerTop");
}
});
此外，您可以使用此 JQuery 设置初始加载的默认位置：
// Set the Pagers to the top of the table on document load
$(document).ready(function () {
$("#pager").appendTo("#PagerTop");
});
于 2011-10-19T11:59:48.380 回答
1
我有同样的问题，我将代码自定义为 followa，它运行良好。这个想法是您将 2 个分页代码放在一个 div ( <div id="pager">) 中，然后在一个表单 ( <form name="pagination" id="pagination_id">) 中，您应该处理由页脚分页引起的一些问题，其中 Go 按钮和页面选择默认情况下不适用于 javascript。
这是代码：
<div id="pager" class="pager" >
<form name="pagination" id="pagination_id">
<img src="addons/pager/icons/first.png" title="" class="first"/>
<img src="addons/pager/icons/prev.png" title="" class="prev"/>
<input type="text" class="pagedisplay" name="numberofpages" onKeyPress="return handleEnter(this, event)" style="width:63px;"/>
<input type="button" class="gotopage" id="gotoPageButton" value="GO" style="width:auto"/>
<img src="addons/pager/icons/next.png" title="Next" class="next"/>
<img src="addons/pager/icons/last.png" title="Last page" class="last"/>
<select class="pagesize" name="pagesize" onchange="changePageSize(this)">
<option selected="selected" value="10">10 per page</option>
<option value="20">20 per page</option>
<option value="30">30 per page</option>
<option value="40">40 per page</option>
</select>
<table id="mytable" class="tablesorter"> blah blah</table>
<!-- pagination footer -->
<img src="addons/pager/icons/first.png" title="First page" class="first"/>
<img src="addons/pager/icons/prev.png" title=Previous class="prev"/>
<input type="text" class="pagedisplay" name="numberofpages2" onKeyPress="return handleEnter(this, event)" style="width:63px;"/>
<input type="button" class="gotopage" id="gotoPageButton2" value="GO" onclick="clickGObutton()" style="width:auto"/>
<img src="addons/pager/icons/next.png" title="Next" class="next"/>
<img src="addons/pager/icons/last.png" title="Last page" class="last"/>
<select class="pagesize" name="pagesize2" onchange="changePageSize(this)">
<option selected="selected" value="10">10 per page</option>
<option value="20">20 per page</option>
<option value="30">30 per page</option>
<option value="40">40 per page</option>
</select>
</form>
</div>
然后是 Go 按钮的 javascript 函数并选择：
// 在输入 name-numofpages 上按下 ENTER 键，然后执行按钮 GO（结果表转到所选页面）
function handleEnter (field, event) {
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
if (keyCode == 13) {
var i;
for (i = 0; i < field.form.elements.length; i++)
if (field == field.form.elements[i]) {
break;
}
if (field.name == "numberofpages2") {
document.forms["pagination"]["numberofpages"].value = field.value;
}
document.getElementById("gotoPageButton").click();
return false;
}
else
return true;}
//当更改页眉选择时，也对页脚进行更改。而反过来。
function changePageSize(field) {
if (field.name == "pagesize") {
document.forms["pagination"]["pagesize2"].value = field.value;
}
else if (field.name == "pagesize2") {
document.forms["pagination"]["pagesize"].value = field.value;
}}
//如果单击页脚 Go 按钮将页脚的 numofpages2 值放在页眉的 numofpages2 值上，然后单击页眉上的 Go 按钮
function clickGObutton(){
document.forms["pagination"]["numberofpages"].value = document.forms["pagination"]["numberofpages2"].value
document.getElementById("gotoPageButton").click();}
注意：发生了什么？页脚分页本身没有功能（除了下一个、上一个、最后一个、第一个可以正常工作的按钮），我们只需填写字段并将没有功能的按钮连接到页眉分页（确实有功能）以使其工作。
于 2012-03-20T14:26:24.690 回答
0
使用 html 中的“pager”类引用：
<div class="pager">
<span class="icon-step-backward first"></span>
<span class="icon-backward prev"></span>
<span class="pagedisplay"></span>
<span class="icon-forward next"></span>
<span class="icon-step-forward last"></span>
<select class="pagesize">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
<table>
...
</table>
<div class="pager">
<span class="icon-step-backward first"></span>
<span class="icon-backward prev"></span>
<span class="pagedisplay"></span>
<span class="icon-forward next"></span>
<span class="icon-step-forward last"></span>
<select class="pagesize">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
然后在 javascript 中设置 pageroptions，如下所示：
var pagerOptions = {
container: $(".pager"),
...other options...
};
于 2016-01-25T15:04:58.410 回答