jQuery客戶端分頁

openkk 12年前發布 | 42K 次閱讀 jQuery Ajax框架

 <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></pre>

 本文由用戶 openkk 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!