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