当前位置：首页 > news >正文

精简分页组件(手写)

news 来源：原创 2024/5/7 1:14:43

2019独角兽企业重金招聘Python工程师标准>>>

需要引入CSS(没错就是这4行)

.pagelist { text-align: center; color: #666; width: 100%; clear: both; margin: 20px 0; padding-top: 20px }
.pagelist a { color: #666; margin: 0 2px; border: 1px solid #000; padding: 5px 10px; }
.pagelist a:hover { color: #f00; text-decoration: underline }
.pagelist > b { border: 1px solid #000; padding: 5px 10px; }

需要写入JS代码

window.onload = function () {
        // 当前页数
        var pageNum = parseInt($("#pageNum").val());
        // 总页数
        var pageNumSum = parseInt($("#pageNumSum").val());
        // 总条数
        var numSum = parseInt($("#numSum").val());
        // 调用方法
        var method = '/index/home?pageNum=';
        var pageHtml = '';
        // 拼接组件的样式
        pageHtml += '<a href="javascript:;">当前页[' + pageNum + ']</a>';
        // 当前页不是首页的时候才会显示
        if (pageNum !== 1) {
            pageHtml += '<a href="' + method + 1 + '">' + '首页' + '</a>';
            pageHtml += '<a href="' + method + (pageNum - 1) + '">上一页</a>';
        }
        // 显示5页
        for (var i = 0; i < (pageNumSum < 5 ? pageNumSum : 5); i++) {
            // 最大数页>=显示页数
            if (pageNumSum >= pageNum + i) {
                pageHtml += '<a href="' + method + (pageNum + i) + '">' + (pageNum + i) + '</a>';
            }
        }
        // 当前页不是尾页的时候才会显示
        if (pageNum !== pageNumSum) {
            pageHtml += '<a href="' + method + (pageNum + 1) + '">下一页</a>';
            pageHtml += '<a href="' + method + pageNumSum + '">尾页</a>';
        }
        pageHtml += '<a href="javascript:;">总条数[' + numSum + ']</a>';
        
        $("#selectPage").html(pageHtml);
    }

隐藏域以及放组件的位置

 <!-- 当前页数 -->
 <input type="hidden" id="pageNum" th:value="${pageNum}">
 <!-- 总页数 -->
 <input type="hidden" id="pageNumSum" th:value="${pageNumSum}">
 <!-- 数据总条数 -->
 <input type="hidden" id="numSum" th:value="${numSum}">
 <!-- 显示组件的DIV -->
 <div class="pagelist" id="selectPage" value=""></div>

效果图