如何創建像stackoverflow分頁?如何創建像堆棧溢出網站的分頁
6
A
回答
7
你沒有說你正在使用哪種服務器端技術,但如果你想要一個純粹的客戶端解決方案,你可以看看jQuery Pagination插件。這是demo page。
1
使用jQuery插件分頁:
2
只需在您的網頁的jQuery和jQuery插件分頁和使用,
$(document).ready(function() {
$(".pager").pagination(300, {
callback: pagecallback,
current_page: 0,
items_per_page: 5,
num_display_entries: 5,
next_text: 'Next',
prev_text: 'Prev',
num_edge_entries: 1
});
});
.pager {
margin-bottom: 10px;
margin-top: 10px;
}
.page-numbers {
border: 1px solid #CCCCCC;
color: #808185;
display: block;
float: left;
font-family: Trebuchet MS, Helvetica, sans-serif;
font-size: 130%;
margin-right: 3px;
padding: 4px 4px 3px;
text-decoration: none;
}
.page-numbers.desc {
border: medium none;
}
.page-numbers:hover {
text-decoration: none;
}
.pager a {
color: #808185;
cursor: pointer;
text-decoration: none;
outline: none;
}
.pager a:hover {
text-decoration: underline;
}
.pager a:visited {
color: #808185;
outline: none;
}
.page-numbers.next,
.page-numbers.prev {
border: 1px solid #CCCCCC;
}
.page-numbers.current {
background-color: #808185;
border: 1px solid #808185;
color: #FFFFFF;
font-weight: bold;
}
.page-numbers.dots {
border: 1px solid #FFFFFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="pager" id="Pagination">
<!-- the container for your first pagination area -->
</div>
1
1
您可以使用twitter bootstrap不到10行的代碼,這樣
0
分頁,你可以使用這個功能太:
function makePaging(totalPages, pageIndex) {
var oPaging, i, j, k;
var totalPages = parseInt(totalPages);
pageIndex++;
i = pageIndex;
j = pageIndex - 1;
k = pageIndex + 1;
var oBefore, oAfter;
oBefore = "";
oAfter = "";
while (j != 0 && j != i - 6) {
oBefore = "<a class='Page' href='#' data-index='" + (j - 1) + "'>" + j + "</a> " + oBefore;
j--;
}
for (; k < totalPages + 1 && k < i + 6; k++) {
oAfter += "<a class='Page' href='#' data-index='" + (k - 1) + "'>" + k + "</a> ";
}
oPaging = oBefore + "<a class='CurPage' href='#' rel='' style='color:Red;'>" + i.toString() + "</a> " + oAfter;
return oPaging;
}
相關問題
- 1. 如何創建像堆棧溢出一樣的響應圖?
- 2. 如何爲堆棧溢出/下溢創建錯誤消息
- 3. OpenID像堆棧溢出
- 4. 創建堆棧溢出通知器
- 5. 創建TreeView時堆棧溢出
- 6. 合併排序創建堆棧溢出
- 7. 堆棧溢出
- 8. 網站URL - 堆棧溢出如何工作?
- 9. 從堆分配時堆棧溢出
- 10. 如何重新創建堆棧溢出的歡迎欄
- 11. 如何創建類似堆棧溢出的註冊過程?
- 12. 我怎樣才能得到我的網站上彈出像堆棧溢出?
- 13. .NET堆棧溢出?
- 14. Threading.Timer堆棧溢出
- 15. 堆棧溢出C++
- 16. C#堆棧溢出
- 17. Lua堆棧溢出
- 18. MPMoviePlayerController堆棧溢出
- 19. C++堆棧溢出
- 20. Malloc堆棧溢出
- 21. 如何在堆棧溢出或Quora上創建標記系統
- 22. 如何使用drupal創建像評論系統一樣的堆棧溢出
- 23. 堆棧搜索導致堆棧溢出
- 24. 如何讓我的堆棧溢出?
- 25. 如何解決堆棧溢出的Android
- 26. 如何溢出堆棧而不推送新的堆棧幀?
- 27. 標題消息就像堆棧溢出
- 28. 堆棧溢出中的SAML?
- 29. Jboss中的堆棧溢出
- 30. freertos中的堆棧溢出
爲什麼特別堆棧溢出?它與其他任何形式的分頁有所不同嗎? – nickf 2010-04-20 04:52:26
就我所見,Stack Overflow的分頁完全是服務器端:它與Javascript或jQuery無關。 – 2010-04-20 04:53:18
其客戶端分頁,如果您在瀏覽器中禁用了JavaScript 您可以看到此消息「堆棧溢出在啓用JavaScript的情況下效果最好」,並且所有頁面顯示在一個頁面中 – user1400 2010-04-20 04:56:27