jquery表排序器分页器，顶部和底部分页链接

我正在处理一个项目，它使用jquery.tablesorter.pager进行分页。 它的顶部有分页链接。现在我想在底部添加相同的链接。

---

我尝试在底部添加寻呼机div，但它不起作用。感谢您的帮助。

建议您可以尝试使用相同的寻呼机，但在滚动时，请根据需要将其显示在顶部或底部

我在表格上方和下方的页面中添加了2个div作为占位符：

    <div id="PagerTop">
    </div>
    <table id="mytable" class="tablesorter">
    </table>
    <div id="PagerBottom">
    </div>

此外，您还可以使用以下JQuery设置初始加载时的默认位置：

    // Set the Pagers to the top of the table on document load
    $(document).ready(function () {
        $("#pager").appendTo("#PagerTop");
    });

---

我也有同样的问题，我定制了followa代码，它工作得非常完美。 其思想是将两个分页代码放在一个div（

）和一种形式（

） 在这之后，您应该处理一些由页脚分页引起的问题，默认情况下，where Go按钮和page select在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按钮，则将页脚的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>

---

发布一些代码，这与CI有什么关系？您正在使用CI的paginate类吗？

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;
}}

function clickGObutton(){
document.forms["pagination"]["numberofpages"].value = document.forms["pagination"]["numberofpages2"].value
document.getElementById("gotoPageButton").click();}

<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>

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