jQuery客戶端分頁實例代碼
更新時間:2013年11月18日 15:46:45 作者:
這篇文章主要介紹了jQuery客戶端分頁實例代碼,有需要的朋友可以參考一下
復制代碼 代碼如下:
<script src="/js/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
var pageindex = 1;
var pagesize = 2;
$(function () {
previous();
})
function previous() {
if (pageindex < 1 || pageindex == 1) {
pageindex = 1;
$("#imgdiv img:lt(" + pagesize + ")").show();
$("#imgdiv img").not($("#imgdiv img:lt(" + pagesize + ")")).hide();
}
else {
pageindex--;
if (pageindex != 1) {
$("#imgdiv img:gt(" + ((pageindex - 1) * pagesize - 1) + "):lt(" + pagesize + ")").show();
$("#imgdiv img").not($("#imgdiv img:gt(" + ((pageindex - 1) * pagesize - 1) + "):lt(" + pagesize + ")")).hide();
}
if (pageindex == 1) {
$("#imgdiv img:lt(" + pagesize + ")").show();
$("#imgdiv img").not($("#imgdiv img:lt(" + pagesize + ")")).hide();
}
}
}
function next() {
var p = $("#imgdiv img").length / pagesize;
var pagecount = parseInt(Math.ceil(p));
if (pageindex + 1 > pagecount) {
pageindex = pagecount;
} else {
pageindex++;
}
$("#imgdiv img:gt(" + ((pageindex - 1) * pagesize - 1) + "):lt(" + pagesize + ")").show();
$("#imgdiv img").not($("#imgdiv img:gt(" + ((pageindex - 1) * pagesize - 1) + "):lt(" + pagesize + ")")).hide();
}
</script>
<div>
<a href="javascript:previous()">上一頁</a>
<div id="imgdiv">
<img src="/images/001.jpg" alt="第一頁的第一張"/>
<img src="/images/002.jpg" />
<img src="/images/003.jpg" />
<img src="/images/004.jpg" />
<img src="/images/005.jpg" />
</div>
<a href="javascript:next()">下一頁</a>
</div>
您可能感興趣的文章:
- jquery分頁插件jpaginate在IE中不兼容問題
- jquery分頁對象使用示例
- 使用PHP+JQuery+Ajax分頁的實現(xiàn)
- jQuery Pagination Ajax分頁插件(分頁切換時無刷新與延遲)中文翻譯版
- jquery.pagination.js 無刷新分頁實現(xiàn)步驟分享
- jquery.pagination +JSON 動態(tài)無刷新分頁實現(xiàn)代碼
- 基于jquery封裝的一個js分頁
- jQuery中jqGrid分頁實現(xiàn)代碼
- jQuery EasyUI API 中文文檔 - Pagination分頁
- 用jQuery中的ajax分頁實現(xiàn)代碼
- 一款Jquery 分頁插件的改造方法(服務器端分頁)
- 基于Jquery實現(xiàn)表格動態(tài)分頁實現(xiàn)代碼
- 基于jquery實現(xiàn)的表格分頁實現(xiàn)代碼
- 基于jQuery的實現(xiàn)簡單的分頁控件
- 基于JQuery的Pager分頁器實現(xiàn)代碼
- 基于jQuery的js分頁代碼
- jquery+ashx無刷新GridView數據顯示插件(實現(xiàn)分頁、排序、過濾功能)
- jquery+json實現(xiàn)的搜索加分頁效果
- php jquery 實現(xiàn)新聞標簽分類與無刷新分頁
- jquery pagination插件實現(xiàn)無刷新分頁代碼
- JS+Ajax+Jquery實現(xiàn)頁面無刷新分頁以及分組 超強的實現(xiàn)
- jQuery插件分享之分頁插件jqPagination
相關文章
jquery創(chuàng)建一個ajax關鍵詞數據搜索實現(xiàn)思路
我們經常需要在前臺頁面輸入關鍵詞進行數據的搜索這已經成為了一種習慣今天給大家分享一下如何使用 jQuery,MySQL和Ajax創(chuàng)建簡單和有吸引力的Ajax搜索,感興趣的你可不要錯過了哈2013-02-02jQuery實現(xiàn)的背景動態(tài)變化導航菜單效果
這篇文章主要介紹了jQuery實現(xiàn)的背景動態(tài)變化導航菜單效果,涉及jquery頁面元素背景動態(tài)變換的實現(xiàn)技巧,非常具有實用價值,需要的朋友可以參考下2015-08-08jQuery實現(xiàn)字符串按指定長度加入特定內容的方法
這篇文章主要介紹了jQuery實現(xiàn)字符串按指定長度加入特定內容的方法,實例分析了jQuery操作字符串的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03