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

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

A LSO，您可以设置INTIAL负载使用这个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> 

然后执行按钮的JavaScript功能和选择：

//在ENTER键按压输入的名称 - numofpages然后执行按钮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值，点击标题转到按钮

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

注：发生了什么事？页脚分页本身没有功能（除了下一个，上一个，最后一个，第一个工作正常），我们只需填写字段并将没有功能的按钮连接到标题分页（具有功能）以使其工作。

Answer 3

用户在HTML中的 “寻呼机” 类的引用：

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