返回顶部

收藏

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

相关聚客文章
  1. 博主 发表 2017-09-22 23:50:00 为 Hexo 博客创建本地搜索引擎
  2. w3cui 发表 2017-11-17 03:07:15 可视化编辑viewEdit.js
  3. 逝去日子 发表 2015-04-15 13:25:49 MVC实现DropdownList联动
  4. chirs <> 发表 2009-01-05 13:18:12 基于jQuery的表单验证插件
  5. Hiro 发表 2010-02-26 07:17:13 jQuery:丰富效果的Flash图片播放(JS重写版)
  6. 天外飞仙 发表 2015-05-21 12:00:35 js与jquery中获取当前鼠标的x、y坐标位置的代码
  7. maisui99 发表 2012-09-06 07:48:36 小述今年淘宝UED的前端招聘题目
  8. 博主 发表 2013-02-20 21:58:00 调试js 也要关注它的调用过程(debugging jquery error )
  9. 张映 发表 2013-06-13 08:30:42 js console.log 打印 对像 数组 详解
  10. damon 发表 2015-07-21 07:36:11 常用JavaScript类库与框架总结
  11. dwqs 发表 2015-07-28 14:53:43 Qunit初探
  12. Jessica 发表 2011-04-18 04:04:45 [每日一学]live vs bind