Ajax方式渲染分页

最新推荐文章于 2024-07-26 20:46:33 发布

kangr.

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量223

点赞数

文章标签： javascript js html html5

本文链接：https://blog.csdn.net/qianduankangkang/article/details/116642477

版权

Ajax方式渲染分页

分页效果：直接上代码注：要引入require.js插件，ajax和json数据

模块.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
            user-select: none;
        }
        .box{
            margin-left: 50px;
            margin-top: 50px;
        }
        ol li{
            float: left;
            padding: 5px;
            border: solid 1px #ccc;
            margin-right: 15px;
        }
        .on{
            background-color: green;
            color: red;
        }
        .buy{
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div class="shak">
        <span>点击验证</span>
        <div class="zhe">
            <ul class="frm">
                <li>用户名<input type="text" class=""></li>
                <li>密码<input type="text" class=""></li>
                <li>划过验证<div class="hyz">
                                <div class="hyzleft"></div><div class="hyzright"></div>
                            </div></li>
                <li><button>立即注册</button></li>
            </ul>
        </div>
    </div>
    <div class="box">
        <ul></ul>
        <ol></ol>
    </div>
    <script src="./require.js" data-main="main"></script>
</body>
</html>

main.js

require(['rancon',"ajax","zhezhao"],function(rancon,Ajax,zhezhao){
    new Ajax("./json.json",function(d){
        new rancon({
            num:d,
            ul:document.querySelector("ul"),
            ol:document.querySelector("ol")
        })
    })
})

rancon.js

define(function () {
    function Feye(opt) {
        Object.assign(this, opt)
        this.init()
    }
    Feye.prototype = {
        constructor: Feye,
        init: function () {
            this.pageNo = 2
            this.pageNum = 3;
            this.pageTotal = Math.ceil(this.num.length / this.pageNum)
            this.maxNum = 5;
            this.randerList();
            this.renderLink();
            this.linkEvent();
        }
        , randerList: function () {
            // 每页显示的数据 = 总数据.slice(((页码 - 1)*每页显示的条数), (页码 * 每页显示条数))
            var d = this.num.slice(((this.pageNo - 1) * this.pageNum), (this.pageNo * this.pageNum));
            // console.log(d)
            this.ul.innerHTML = d.map(function (item) {
                return `<li>${item}</li>`
            }).join("")
        }
        , renderLink: function () {
            var html = "";
            if (this.pageNo > 1) {
                html += '<li>上一页</li>'
            } else {
                html += '<li class="buy">上一页</li>'
            }

            // 最多可显示的数字链接的个数  this.maxNum
            var leftNum = Math.floor(this.maxNum / 2);//当前页左右需要有的数字链接个数
            var start = this.pageNo - leftNum;
            if(start < 1){
                start =1; 
            }
            var end = start + this.maxNum - 1;
            if (end > this.pageTotal){
                end = this.pageTotal;
                start = end - this.maxNum + 1;
            }
            for (var i = start; i <= end; i++) {
                html += `<li${this.pageNo == i ? ' class="on"' : ''}>${i}</li>`;
            }

            if (this.pageNo < this.pageTotal) {
                html += "<li>下一页</li>";
            } else {
                html += "<li class='buy'>下一页</li>"
            }
            this.ol.innerHTML = html;
            // console.log(html)
        }
        , linkEvent: function () {
            var that = this;
            this.ol.onclick = function (e) {
                var el = e.target;
                if (el.tagName == "LI") {
                    if (el.className != 'buy') {
                        switch (el.innerHTML) {
                            case '上一页':
                                that.pageNo--;
                                break;
                            case '下一页':
                                that.pageNo++;
                                break;
                            default:
                                that.pageNo = el.innerHTML * 1;
                        }
                        that.randerList();
                        that.renderLink();
                    }
                }
            }
        }
    }
    return Feye
})

kangr.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax方式渲染分页

Ajax方式渲染分页分页效果：直接上代码注：要引入require.js插件HTML段：模块.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con...
复制链接

扫一扫