Question

我正在开发一个项目，它使用jquery.tablesorter.pager进行分页。它顶部有分页链接。现在我想添加相同的链接到底部。我尝试在底部添加寻呼机div，但它不起作用。任何帮助表示感谢。

Answer 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");
    });

Answer 2

我有同样的问题，我将代码定制为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函数并选择：

//在输入名称-noofpages上按下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();}

注意：发生了什么？页脚分页本身没有任何功能（除了下一个，上一个，最后一个，第一个工作正常按钮除外）我们只填充字段并将按钮连接到没有功能的标题分页（确实有功能）以使它们工作。 / p>

Answer 3

在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中设置如下所示的页面：

var pagerOptions = {
    container: $(".pager"),
    ...other options...
};

jquery tablesorter寻呼机，顶部和底部分页链接

3 个答案: