【发布时间】：2016-01-25 23:04:58
【问题描述】：
我正在开发一个项目，它使用 jquery.tablesorter.pager 进行分页。 它在顶部有分页链接。现在我也想在底部添加相同的链接。 我尝试在底部添加寻呼机 div，但它不起作用。任何帮助表示赞赏。
【问题讨论】：
-
发布一些代码，这与 CI 有什么关系？你在使用 CI 的分页类吗？
标签： jquery codeigniter jquery-pagination
【发布时间】：2016-01-25 23:04:58
【问题描述】：
作为建议，您可以尝试使用相同的寻呼机，但在滚动时根据需要将其显示在顶部或底部。
我在表格上方和下方的页面中添加了 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");
});
【讨论】：
我有同样的问题，我将代码自定义为 followa，它运行良好。
这个想法是您将 2 个分页代码放在一个 div (<div id="pager">) 和一种形式 (<form name="pagination" id="pagination_id">) 中
之后，您应该处理由页脚分页引起的一些问题，其中转到按钮和页面选择默认情况下不适用于 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();}
注意：发生了什么？页脚分页本身没有功能（除了下一个、上一个、最后一个、第一个工作正常的按钮），我们只需填写字段并将没有功能的按钮连接到页眉分页（确实有功能）以使其工作。
【讨论】：
在 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...
};
【讨论】：