我正在一個項目,它已使用jquery.tablesorter.pager分頁。 它上面有分頁鏈接。現在我想添加同樣的鏈接到底部。 我嘗試在底部添加分頁器div,但它不起作用。任何幫助讚賞。jquery tablesorter尋呼機,頂部和底部分頁鏈接
0
A
回答
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");
});
1
我定製代碼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();}
注:發生了什麼事?頁腳分頁本身沒有功能(除了下一個,上一個,最後一個,第一個工作正常),我們只需填寫字段並將沒有功能的按鈕連接到標題分頁(具有功能)以使其工作。
0
用戶在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...
};
相關問題
- 1. 頂部和底部的ASP NET數據尋呼機
- 2. 頂部和底部分頁同步
- 3. 如何將傳呼機放在頁面的頂部和底部?
- 4. jquery的頂部和底部分割屏幕,限制頁面的下半部分
- 5. jQuery Animate頂部(從底部到頂部)
- 6. 機器人:TextView的:頂部和底部
- 7. 鏈接jQuery循環尋呼機元素
- 8. 頂部div出現在底部和底部到頂部
- 9. Tablesorter - 分頁時可以自動禁用尋呼機嗎?
- 10. 頂部和底部邊框
- 11. 在數據頂部和底部顯示SimplePager分頁菜單
- 12. 帶尋呼機和LightWindow問題的JQuery TableSorter
- 13. jQuery-tablesorter尋呼機和過濾器崩潰瀏覽器
- 14. 總是出現在頂部和底部的頁眉和頁腳
- 15. 使用尋呼機視圖輕掃頁面的一部分
- 16. 網頁底部/頂部的JavaScript?
- 17. 滾動頂部,然後底部,然後頂部,然後底部
- 18. 創建NPM鏈接工具 - 從底部跟蹤依賴頂部
- 19. 尋呼拖放tablesorter插件
- 20. 部分有一個邊距底部和頂部的100px
- 21. 點擊底部滾動條上的任何鏈接「捕捉」到頁面頂部
- 22. 分配值,以底部和頂部5百分numpy的陣列
- 23. td中的表格和div分別對齊頂部和底部
- 24. 頁面頂部的分頁鏈接,在實際腳本之前
- 25. UITableView陰影頂部和底部
- 26. 雙背景圖像頂部和底部
- 27. JApplets:去除頂部和底部帶
- 28. 頂部和底部的盒子陰影
- 29. SSAS - 頂部的總和或底部
- 30. 中心底部和頂部視圖
後一些代碼,這是怎麼相關CI?你使用CI的分頁類嗎? – Ross 2010-11-27 17:50:34