带有省略号的分页组件

最新推荐文章于 2023-03-23 23:20:16 发布

洗衣粉heart

最新推荐文章于 2023-03-23 23:20:16 发布

阅读量7.1k

点赞数 10

分类专栏： nav 文章标签： nav 分页省略号

本文链接：https://blog.csdn.net/o3460765/article/details/53907328

版权

nav 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

带有省略号的分页组件

html中只要引入bootstrap、jquery以及我的js（元素的id及数据结构请根据实际情况自行修改）

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
  <div id="pub">
    <nav class="pull-right my-nav">
      <ul class="pagination"></ul>
    </nav>
  </div>
</body>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="nav.js"></script>
<script type="text/javascript">
  var nav = new Nav(1, 10, 1, '1.json');
  nav.myAjax();
  nav.getSinglePageData();
</script>
</html>



/*
 *   推荐使用bootstrap中的分页组件，然后使用本段代码
 *      
 * */
function Nav(pageNo, pageSize, startIndex, url) {
    this.pageNo = pageNo || 1;			// 第几页
    this.pageSize = pageSize || 10;		// 每页几个数据
    this.startIndex = startIndex || 1;	// 开始的页数 只有1,11,21等等
    this.url = url;						// 接口地址
    this.ajaxFlag = true;				// 是否更新分页导航
    this.direction = "right";			// 触发的是左侧的省略号还是右侧的省略号
    this.allCount = 0;					// 总数据条数
    this.pubData = [];					// ajax获取的数据，根据具体数据需要调整
}

Nav.prototype.myAjax = function () {
    var _this = this;
    $.ajax({
        url: _this.url,
        type: "GET",
        data: {
            pageNo: _this.pageNo,
            pageSize: _this.pageSize
        },
        async: true,
        success: function (data) {
            _this.pubData = data.data;
            _this.allCount = _this.pubData.totalCount;
            if (_this.ajaxFlag) {
                _this.createNav();
            }

        },
        error: function (data) {
            console.log(data.code);
        }
    });
}

Nav.prototype.createNav = function () {
    this.ajaxFlag = false;
    var myNav = $("#pub .my-nav");			// 这里的$("#pub .my-nav")请根据情况自行修改
    var activeClass = "active";
	
	// 是否给数字1active
    if (this.startIndex === 1 && this.direction === "right") {
        activeClass = "active";
    }else {
        activeClass = "";
    }
	
	// 创建 《，1
    myNav.find("ul").empty();
    myNav.find("ul").append($("<li><a href='javascript:void(0)'>«</a></li>"));
    myNav.find("ul").append($("<li class='"+ activeClass +"'><a href='javascript:void(0)'>1</a></li>"));
	
	// 是否创建左侧省略号
    if (this.startIndex !== 1) {
        myNav.find("ul").append($("<li><a href='javascript:void(0)'>...</a></li>"));
    }
	
	// 循环创建中间部分
    for (var i = this.startIndex; i <= this.startIndex + 9; i++) {
		
		// 跳过第一个和最后一个
        if (i === 1 || i >=  Math.ceil( this.allCount / 10)) {
            continue;
        }

        var oLi = $("<li><a href='javascript:void(0)'>" + i + "</a></li>");
		
		// 向左时最右边的nav添加active，向右时最左边的添加active
        if ((this.direction === "left" && i % 10 === 0) || (this.direction === "right" && i % 10 === 1)) {
            oLi.addClass("active");
        }

        myNav.find("ul").append(oLi);
    }

	//判断是否添加右侧省略号
    if (this.startIndex + 10 < Math.ceil(this.allCount / 10)) {
        myNav.find("ul").append($("<li><a href='javascript:void(0)'>...</a></li>"));
    }
    
    // 当页面只有一页的时候跳过
    if (Math.ceil(this.allCount / 10) !== 1) {
        myNav.find("ul").append($("<li><a href='javascript:void(0)'>" + Math.ceil(this.allCount / 10) + "</a></li>"));
    }
    myNav.find("ul").append($("<li><a href='javascript:void(0)'>»</a></li>"));
}

Nav.prototype.getSinglePageData = function () {
    var _this = this;
    
    /*
     * 外层的元素id自行修改
     * 点击事件以 activeLiIndex 为核心
     */
    $(document).on("click", "#pub .my-nav li", function () {
        var activeLiIndex = $("#pub .my-nav li.active").index();
		
		// 《 与  》两个按钮不会有 active
        if ($(this).index() > 0 && $(this).index() < $("#pub .my-nav li").length - 1) {
            activeLiIndex = $(this).index();
        }
        
        // 到最左边和最右边active不变
        if ($(this).index() === 0) {
            if (activeLiIndex == 1) {
                return;
            }
            activeLiIndex--;
        }
        if ($(this).index() === $("#pub .my-nav li").length - 1) {
            if (activeLiIndex == $("#pub .my-nav li").length - 2) {
                return;
            }
            activeLiIndex++;
        }
		
		// 《 与 》两个按钮的 disabled属性修改
        if (activeLiIndex === 1) {
            $("#pub .my-nav li").eq(0).addClass("disabled");
        }else {
            $("#pub .my-nav li").eq(0).removeClass("disabled");
        }
        if (activeLiIndex === $("#pub .my-nav li").length - 2) {
            $("#pub .my-nav li").eq($("#pub .my-nav li").length - 1).addClass("disabled");
        }else {
            $("#pub .my-nav li").eq($("#pub .my-nav li").length - 1).removeClass("disabled");
        }

        $("#pub .my-nav li").removeClass("active");
        $("#pub .my-nav li").eq(activeLiIndex).addClass("active");
        
        // 如果active的按钮是省略号，根据index（）判断左右，然后调用ajax
        if ($("#pub .my-nav li.active a").html() === "...") {
            _this.ajaxFlag = true;

            if ($("#pub .my-nav li.active").index() === 2) {
                _this.direction = "left";
                var  leftHtml = $("#pub .my-nav li").eq(activeLiIndex + 1).find("a").html();
                _this.pageNo = leftHtml - 1;
                _this.startIndex = leftHtml - 10;
                _this.myAjax();
            }else{
                _this.direction = "right";
                var rightHtml = $("#pub .my-nav li").eq(activeLiIndex - 1).find("a").html();
                _this.pageNo = rightHtml / 1 + 1;
                _this.startIndex = rightHtml / 1 + 1;
                _this.myAjax();
            }

            return;
        }
		
	// 如果active的不是省略号，调用ajax，不修改nav导航
        _this.pageNo = $("#pub .my-nav li.active a").html() - 0;
        _this.myAjax();
    });
}