前端实现伪分页_前端假分页

作者：笔触狂放9 | 2024-02-27 18:05:09

踩

前端假分页

有时候，做静态页面的时候，需要用到分页，当然绝绝绝大多数的情况下，分页这个事是后台来做的，用户请求时再给数据，至于两者利弊，稍后再讲。因此，我们在这里称作它为伪分页。

此分页分为四部分，首先是页面布局，为了简洁布局，直接用了BootStrap中的分页，代码如下


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>实现伪分页</title>
</head>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
<body>
    <div id="list-icount">
        <!--存放数据的div-->
    </div>
    <ul class="pagination" id="paging">
        <!--存放页数列表ul-->
    </ul>
</body>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</html>

第二我们暂且用本地数据，也可以请求后台，不过请求后台的话还是用后端做比较合适


  var data = {
        1: "<p>俺家酒儿清</p>",
        2: "<p>一贯买两瓶</p>",
        3: "<p>灌得肚儿胀</p>",
        4: "<p>自家店小二是也</p>",
        5: "<p>在这岳阳楼下开着一个酒店</p>",
        6: "<p>但是南来北往经商客旅</p>",
        7: "<p>做买做卖</p>",
        8: "<p>都来这楼上饮酒</p>",
        9: "<p>今日早晨间</p>",
        10: "<p>我将这镟锅儿烧的热了</p>",
        11: "<p>将酒望子挑起来</p>",
        12: "<p>招过客，招过客</p>",
        13: "<p>贫道姓吕名岩字洞宾</p>",
        14: "<p>道号纯阳子</p>",
        15: "<p>先为唐朝儒士</p>",
        16: "<p>后遇钟离师父点化</p>",
        17: "<p>得成仙道</p>",
        18: "<p>贫道在蟠桃会上饮宴</p>"
    }

第三我们绑定数据及加载数据


    function turnJson(oJsonArr, oJsonArrValue) {
        var iCount = 0;
        var turn_json_arr = [];
        if (arguments.length == 1) {
            for (key in oJsonArr) {
                turn_json_arr.push(key);
                //一个值时是将json的key转化成数组
            }
        } else {
            for (key in oJsonArr) {
                turn_json_arr.push(oJsonArr[key]);
            };
        }
        return turn_json_arr;
    }
    var iPageCount,
        iPageList = 6,
        sLi = '',
        k = 0,
        oPaging = document.getElementById('paging'), //获取ul  ID
        oList_icount = document.getElementById('list-icount'); //获取数据列表ID
    var dataArr = turnJson(data, 'newsList'); //将对象中的键值转换为数组
    iPageCount = Math.ceil(dataArr.length / iPageList); //将页数进行向上取整
    for (var i = 0; i < iPageCount; i++) {
        sLi += '<li class="page-footer"><a href="javascript:;">' + (i + 1) + '</a></li>'; //动态创建页数
    }
    // 将前一页和后一页标签加上
    oPaging.innerHTML = '<li id="prePage"><a href="javascript:;">«</a></li>' + sLi +
        '<li id="nextPage"><a href="javascript:;">»</a></li>';
    // 对控制数据的显隐和绑定数据
    while (k < dataArr.length) {
        switch (true) {
            case k <= 5:
                if (k == 0) {
                    var wraperP_1 = document.createElement('div')
                }
                wraperP_1.innerHTML += dataArr[k];
                if (k == 5) {
                    wraperP_1.className = 'ShowPara';
                    wraperP_1.style.display = 'block';
                    oList_icount.appendChild(wraperP_1)
                }
                break;
            case k > 5 && k <= 11:
                if (k == 6) {
                    var wraperP_2 = document.createElement('div')
                }
                wraperP_2.innerHTML += dataArr[k];
                if (k == 11) {
                    wraperP_2.className = 'ShowPara';
                    wraperP_2.style.display = 'none';
                    oList_icount.appendChild(wraperP_2)
                }
                break;
            case k > 11 && k <= 17:
                if (k == 12) {
                    var wraperP_3 = document.createElement('div')
                }
                wraperP_3.innerHTML += dataArr[k];
                if (k == 17) {
                    wraperP_3.className = 'ShowPara';
                    wraperP_3.style.display = 'none';
                    oList_icount.appendChild(wraperP_3)
                }
                break;
            case k > 17 && k <= dataArr.length - 1:
                if (k == 18) {
                    var wraperP_4 = document.createElement('div')
                }
                wraperP_4.innerHTML += dataArr[k];
                if (k == dataArr.length - 1) {
                    wraperP_4.className = 'ShowPara';
                    wraperP_4.style.display = 'none';
                    oList_icount.appendChild(wraperP_4)
                }
                break;
            default:
                break
        }
        k++
    }

第四，对元素对象进行事件操作


    iPage_footer = document.getElementsByClassName('page-footer').length,
        oShowPara = document.getElementsByClassName('ShowPara'),
        iShowPara = document.getElementsByClassName('ShowPara').length;
    document.getElementsByClassName('page-footer')[0].classList.add('active');
    // 为每一个页数增加点击事件，设置active类
    for (var i = 0; i < iPage_footer; i++) {
        oPage_footer[i].index = i;
        oPage_footer[i].onclick = function () {
            for (var j = 0; j < iPage_footer; j++) {
                oShowPara[j].style.display = 'none';
                oPage_footer[j].className = 'page-footer'
            }
            oShowPara[this.index].style.display = 'block';
            this.className = 'page-footer active'
        }
    };
    var oPre = document.getElementById('prePage');
    var oNext = document.getElementById('nextPage');
    // 控制列表的显隐
    function circleList() {
        for (var j = 0; j < iPage_footer; j++) {
            oShowPara[j].style.display = 'none';
            oPage_footer[j].className = 'page-footer'
        }
    }
    //进行下一页的切换
    function nextPage() {
        for (var i = 0; i < iPage_footer; i++) {
            if (oShowPara[i].style.display == 'block') {
                if (i == iPage_footer - 1) return;
                circleList();
                oShowPara[(i + 1)].style.display = 'block';
                oPage_footer[(i + 1)].className = 'page-footer active';
                return
            }
        }
    };
    //进行上一页切换
    function prePage() {
        for (var i = 0; i < iPage_footer; i++) {
            if (oShowPara[i].style.display == 'block') {
                if (i == 0) return;
                circleList();
                oShowPara[(i - 1)].style.display = 'block';
                oPage_footer[(i - 1)].className = 'page-footer active';
                return
            }
        }
    };
 
    oPre.onclick = prePage;
    oNext.onclick = nextPage;

最后整个代码如下


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>实现伪分页</title>
</head>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
<body>
    <div id="list-icount">
        <!--存放数据的div-->
    </div>
    <ul class="pagination" id="paging">
        <!--存放页数列表ul-->
    </ul>
</body>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    var data = {
        1: "<p>俺家酒儿清</p>",
        2: "<p>一贯买两瓶</p>",
        3: "<p>灌得肚儿胀</p>",
        4: "<p>自家店小二是也</p>",
        5: "<p>在这岳阳楼下开着一个酒店</p>",
        6: "<p>但是南来北往经商客旅</p>",
        7: "<p>做买做卖</p>",
        8: "<p>都来这楼上饮酒</p>",
        9: "<p>今日早晨间</p>",
        10: "<p>我将这镟锅儿烧的热了</p>",
        11: "<p>将酒望子挑起来</p>",
        12: "<p>招过客，招过客</p>",
        13: "<p>贫道姓吕名岩字洞宾</p>",
        14: "<p>道号纯阳子</p>",
        15: "<p>先为唐朝儒士</p>",
        16: "<p>后遇钟离师父点化</p>",
        17: "<p>得成仙道</p>",
        18: "<p>贫道在蟠桃会上饮宴</p>"
    }
    //将json中的key或键值转化为数组
    function turnJson(oJsonArr, oJsonArrValue) {
        var iCount = 0;
        var turn_json_arr = [];
        if (arguments.length == 1) {
            for (key in oJsonArr) {
                turn_json_arr.push(key);
                //一个值时是将json的key转化成数组
            }
        } else {
            for (key in oJsonArr) {
                turn_json_arr.push(oJsonArr[key]);
            };
        }
        return turn_json_arr;
    }
    var iPageCount,
        iPageList = 6,
        sLi = '',
        k = 0,
        oPaging = document.getElementById('paging'), //获取ul  ID
        oList_icount = document.getElementById('list-icount'); //获取数据列表ID
    var dataArr = turnJson(data, 'newsList'); //将对象中的键值转换为数组
    iPageCount = Math.ceil(dataArr.length / iPageList); //将页数进行向上取整
    for (var i = 0; i < iPageCount; i++) {
        sLi += '<li class="page-footer"><a href="javascript:;">' + (i + 1) + '</a></li>'; //动态创建页数
    }
    // 将前一页和后一页标签加上
    oPaging.innerHTML = '<li id="prePage"><a href="javascript:;">«</a></li>' + sLi +
        '<li id="nextPage"><a href="javascript:;">»</a></li>';
    // 对控制数据的显隐和绑定数据
    while (k < dataArr.length) {
        switch (true) {
            case k <= 5:
                if (k == 0) {
                    var wraperP_1 = document.createElement('div')
                }
                wraperP_1.innerHTML += dataArr[k];
                if (k == 5) {
                    wraperP_1.className = 'ShowPara';
                    wraperP_1.style.display = 'block';
                    oList_icount.appendChild(wraperP_1)
                }
                break;
            case k > 5 && k <= 11:
                if (k == 6) {
                    var wraperP_2 = document.createElement('div')
                }
                wraperP_2.innerHTML += dataArr[k];
                if (k == 11) {
                    wraperP_2.className = 'ShowPara';
                    wraperP_2.style.display = 'none';
                    oList_icount.appendChild(wraperP_2)
                }
                break;
            case k > 11 && k <= 17:
                if (k == 12) {
                    var wraperP_3 = document.createElement('div')
                }
                wraperP_3.innerHTML += dataArr[k];
                if (k == 17) {
                    wraperP_3.className = 'ShowPara';
                    wraperP_3.style.display = 'none';
                    oList_icount.appendChild(wraperP_3)
                }
                break;
            case k > 17 && k <= dataArr.length - 1:
                if (k == 18) {
                    var wraperP_4 = document.createElement('div')
                }
                wraperP_4.innerHTML += dataArr[k];
                if (k == dataArr.length - 1) {
                    wraperP_4.className = 'ShowPara';
                    wraperP_4.style.display = 'none';
                    oList_icount.appendChild(wraperP_4)
                }
                break;
            default:
                break
        }
        k++
    }
    var oPage_footer = document.getElementsByClassName('page-footer'),
        iPage_footer = document.getElementsByClassName('page-footer').length,
        oShowPara = document.getElementsByClassName('ShowPara'),
        iShowPara = document.getElementsByClassName('ShowPara').length;
    document.getElementsByClassName('page-footer')[0].classList.add('active');
    // 为每一个页数增加点击事件，设置active类
    for (var i = 0; i < iPage_footer; i++) {
        oPage_footer[i].index = i;
        oPage_footer[i].onclick = function () {
            for (var j = 0; j < iPage_footer; j++) {
                oShowPara[j].style.display = 'none';
                oPage_footer[j].className = 'page-footer'
            }
            oShowPara[this.index].style.display = 'block';
            this.className = 'page-footer active'
        }
    };
    var oPre = document.getElementById('prePage');
    var oNext = document.getElementById('nextPage');
    // 控制列表的显隐
    function circleList() {
        for (var j = 0; j < iPage_footer; j++) {
            oShowPara[j].style.display = 'none';
            oPage_footer[j].className = 'page-footer'
        }
    }
    //进行下一页的切换
    function nextPage() {
        for (var i = 0; i < iPage_footer; i++) {
            if (oShowPara[i].style.display == 'block') {
                if (i == iPage_footer - 1) return;
                circleList();
                oShowPara[(i + 1)].style.display = 'block';
                oPage_footer[(i + 1)].className = 'page-footer active';
                return
            }
        }
    };
    //进行上一页切换
    function prePage() {
        for (var i = 0; i < iPage_footer; i++) {
            if (oShowPara[i].style.display == 'block') {
                if (i == 0) return;
                circleList();
                oShowPara[(i - 1)].style.display = 'block';
                oPage_footer[(i - 1)].className = 'page-footer active';
                return
            }
        }
    };
 
    oPre.onclick = prePage;
    oNext.onclick = nextPage;
</script>
 
</html>

前台分页的特点为：下载量大，显示慢，加载时用户体验不好。服务器压力请求少，换页时用户体验好。如果有即时性内容，就不能翻回来的时候更新了。

后台分页的特点为：和前台分页特点相反。

总的来说，个人认为，前台分页更适合那些请求数据较少的，静态页面的数据。

另外，感觉自己写的代码好臃肿，请大佬们不吝赐教，溜了溜了~~

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/155074