返回顶部

收藏

JQuery写的一个分页插件

更多

刚学会JQuery不久,还有很多地方不足!!!!

进公司不久,一直在做前台页面,公司项目叫做一也信息分页现实,在网上找了一些类似的插件,然后自己修改成现在这个样子,希望大家多多提一件,修复BUG。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery.js"></script>
    <title>分页插件CodeSnippet.cn</title>
    <script type="text/javascript">
        var $paging;
        function showPage(page) {
            // 分页
            //var pageCount = newCounts%4==0?newCounts/4:Math.ceil(newCounts/4); //总页码(共几页)
            var pageCount = 20;
            pageNo = page;
            var prevPage = pageNo - 1;
            var nextPage = pageNo + 1;
            var strHtml = '';
            strHtml += '<ul>';
            if (prevPage < 1) {
                strHtml += '';
            } else {
                strHtml += '<li title="Prev Page"><a href="#" onclick="gotoPage(' + prevPage + ')"><</a></li>';
            }
            if (pageCount == 0) {
                strHtml += '<li title="Page0"></li>';
            } else if (pageCount > 0 && pageCount <= 5) {
                for (var i = 1; i <= pageCount; i++) {
                    if (i == pageNo) {
                        strHtml += '<li title="Page ' + i + '">' + i + '</li>';
                    } else {
                        strHtml += '<li title="Page ' + i + '"><a href="#" onclick="gotoPage(' + i + ')">' + i + '</a>';
                    }
                }
            } else {
                if (pageNo <= 4) {
                    for (var i = 1; i <= 5; i++) {
                        if (i == pageNo) {
                            strHtml += '<li title="Page ' + i + '">' + i + '</li>';
                        } else {
                            strHtml += '<li title="Page ' + i + '"><a href="#" onclick="gotoPage(' + i + ')">' + i + '</a>';
                        }
                    }
                    strHtml += '...<a href="#" onclick="gotoPage(' + pageCount + ')">' + pageCount + '</a></li>'
                } else if (pageNo > 4 && pageNo < pageCount - 3) {
                    strHtml += '<li title="Page ' + i + '"><a href="#" onclick="gotoPage(1,)">1</a>...</li>'
                    for (var i = pageNo - 2; i <= pageNo + 2; i++) {
                        if (i == pageNo) {
                            strHtml += '<li title="Page ' + i + '">' + i + '</li>';
                        } else {
                            strHtml += '<li title="Page ' + i + '"><a href="#" onclick="gotoPage(' + i + ')">' + i + '</a>';
                        }
                    }
                    strHtml += '...<a href="#" onclick="gotoPage(' + pageCount + ')">' + pageCount + '</a></li>'
                } else {
                    strHtml += '<li title="Page ' + i + '"><a href="#" onclick="gotoPage(1,)">1</a>...</li>'
                    for (var i = pageCount - 4; i <= pageCount; i++) {
                        if (i == pageNo) {
                            strHtml += '<li title="Page ' + i + '">' + i + '</li>';
                        } else {
                            strHtml += '<li title="Page ' + i + '"><a href="#" onclick="gotoPage(' + i + ')">' + i + '</a>';
                        }
                    }
                }
            }
            if (nextPage > pageCount) {
                strHtml += '';
            } else {
                strHtml += '<li title="Next Page"><a href="#" onclick="gotoPage(' + nextPage + ')">></a></li>';
                //  console.log("ss");
            }
            strHtml += '<li>    总共' + pageCount + '页</li>'
            strHtml += '</ul>';
            $paging = strHtml;
            $("#nextpage").append(strHtml);
        }

        function gotoPage(pageNo) {
            page = pageNo;
            $(".nextpage").html("");
            showPage(page);
        }

        $(document).ready(function () {
            showPage(1);
        })
</script>
    <style>
        .nextpage { line-height: 22px; font-size: 12px; padding-bottom: 50px; }
        .nextpage ul { }
        .nextpage ul li { text-align: center; float: left; list-style: none; display: inline-block; margin-left: 5px; }
        .nextpage ul li a { display: inline-block; width: 20px; height: 22px; border: #ccc 1px solid; cursor: pointer; }
        .nextpage ul li a:hover { color: #fff; background: #2b529c; }
        .nextpage input { width: 20px; }
    </style>
</head>
<body>
    <div id="nextpage" class="nextpage">
        <!--         <ul></ul> -->
    </div>
</body>
</html>
//该片段来自于http://outofmemory.cn

标签:jquery,javascript,控件

收藏

0人收藏

支持

0

反对

0

发表评论