Front-end implementation of pseudo-paging

Posted by stndrdsnz on Thu, 13 Jun 2019 21:26:52 +0200

Sometimes, when doing static pages, we need to use pagination. Of course, in most cases, pagination is done in the background. When users request data, we will talk about the advantages and disadvantages of the two later. Therefore, we call it pseudo-paging here.

This paging is divided into four parts, the first is the page layout. In order to simplify the layout, the paging in BootStrap is used directly. The code is as follows.

<!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>Implementing pseudo-paging</title>
</head>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<body>
    <div id="list-icount">
        <!--Data storage div-->
    </div>
    <ul class="pagination" id="paging">
        <!--Store a list of pages 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>

Second, we can use local data for the time being, or request the background, but it is more appropriate to use the back-end to request the background.

  var data = {
        1: "<p>My family's wine is pure</p>",
        2: "<p>Always buy two bottles</p>",
        3: "<p>A bloated stomach</p>",
        4: "<p>The second year in my shop is also the same.</p>",
        5: "<p>There is a hotel downstairs in Yueyang.</p>",
        6: "<p>But business travels from south to North</p>",
        7: "<p>Buy and sell</p>",
        8: "<p>They all come upstairs for drinks.</p>",
        9: "<p>This morning</p>",
        10: "<p>I heated the pot.</p>",
        11: "<p>Pick up hopeful wines</p>",
        12: "<p>Recruitment, Recruitment</p>",
        13: "<p>The name of Poor Tao is Lu Ming, Yan Zi Dongbin</p>",
        14: "<p>Channel number Chunyangzi</p>",
        15: "<p>First Confucian Scholars in Tang Dynasty</p>",
        16: "<p>Afterwards, the bell left Master and ordered</p>",
        17: "<p>To be immortal</p>",
        18: "<p>Poor Road Dinners at Peach Festival</p>"
    }

Third, we bind and load data

    function turnJson(oJsonArr, oJsonArrValue) {
        var iCount = 0;
        var turn_json_arr = [];
        if (arguments.length == 1) {
            for (key in oJsonArr) {
                turn_json_arr.push(key);
                //A value converts json's key into an array
            }
        } 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'), //Get UL ID
        oList_icount = document.getElementById('list-icount'); //Get the data list ID
    var dataArr = turnJson(data, 'newsList'); //Converting key values in objects to arrays
    iPageCount = Math.ceil(dataArr.length / iPageList); //Pages are rounded up
    for (var i = 0; i < iPageCount; i++) {
        sLi += '<li class="page-footer"><a href="javascript:;">' + (i + 1) + '</a></li>'; //Dynamic creation of pages
    }
    // Add labels on the previous and the latter pages
    oPaging.innerHTML = '<li id="prePage"><a href="javascript:;">«</a></li>' + sLi +
        '<li id="nextPage"><a href="javascript:;">»</a></li>';
    // Explicitness and Binding of Control Data
    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++
    }

Fourth, event operations on element objects

    iPage_footer = document.getElementsByClassName('page-footer').length,
        oShowPara = document.getElementsByClassName('ShowPara'),
        iShowPara = document.getElementsByClassName('ShowPara').length;
    document.getElementsByClassName('page-footer')[0].classList.add('active');
    // To increase click events for each page, set the active class
    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');
    // Hiding Control List
    function circleList() {
        for (var j = 0; j < iPage_footer; j++) {
            oShowPara[j].style.display = 'none';
            oPage_footer[j].className = 'page-footer'
        }
    }
    //Switch to the next page
    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
            }
        }
    };
    //Make the last page switch
    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;

Finally, the whole code is as follows

<!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>Implementing pseudo-paging</title>
</head>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<body>
    <div id="list-icount">
        <!--Data storage div-->
    </div>
    <ul class="pagination" id="paging">
        <!--Store a list of pages 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>My family's wine is pure</p>",
        2: "<p>Always buy two bottles</p>",
        3: "<p>A bloated stomach</p>",
        4: "<p>The second year in my shop is also the same.</p>",
        5: "<p>There is a hotel downstairs in Yueyang.</p>",
        6: "<p>But business travels from south to North</p>",
        7: "<p>Buy and sell</p>",
        8: "<p>They all come upstairs for drinks.</p>",
        9: "<p>This morning</p>",
        10: "<p>I heated the pot.</p>",
        11: "<p>Pick up hopeful wines</p>",
        12: "<p>Recruitment, Recruitment</p>",
        13: "<p>The name of Poor Tao is Lu Ming, Yan Zi Dongbin</p>",
        14: "<p>Channel number Chunyangzi</p>",
        15: "<p>First Confucian Scholars in Tang Dynasty</p>",
        16: "<p>Afterwards, the bell left Master and ordered</p>",
        17: "<p>To be immortal</p>",
        18: "<p>Poor Road Dinners at Peach Festival</p>"
    }
    //Converting keys or key values in json into arrays
    function turnJson(oJsonArr, oJsonArrValue) {
        var iCount = 0;
        var turn_json_arr = [];
        if (arguments.length == 1) {
            for (key in oJsonArr) {
                turn_json_arr.push(key);
                //A value converts json's key into an array
            }
        } 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'), //Get UL ID
        oList_icount = document.getElementById('list-icount'); //Get the data list ID
    var dataArr = turnJson(data, 'newsList'); //Converting key values in objects to arrays
    iPageCount = Math.ceil(dataArr.length / iPageList); //Pages are rounded up
    for (var i = 0; i < iPageCount; i++) {
        sLi += '<li class="page-footer"><a href="javascript:;">' + (i + 1) + '</a></li>'; //Dynamic creation of pages
    }
    // Add labels on the previous and the latter pages
    oPaging.innerHTML = '<li id="prePage"><a href="javascript:;">«</a></li>' + sLi +
        '<li id="nextPage"><a href="javascript:;">»</a></li>';
    // Explicitness and Binding of Control Data
    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');
    // To increase click events for each page, set the active class
    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');
    // Hiding Control List
    function circleList() {
        for (var j = 0; j < iPage_footer; j++) {
            oShowPara[j].style.display = 'none';
            oPage_footer[j].className = 'page-footer'
        }
    }
    //Switch to the next page
    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
            }
        }
    };
    //Make the last page switch
    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>

The characteristics of foreground paging are: large amount of download, slow display and bad user experience when loading. The server has fewer pressure requests, and the user experience is good when changing pages. If there is real-time content, it can not be retrieved when updated.

Background paging is characterized by the opposite of front-end paging.

Generally speaking, I think that foreground paging is more suitable for data that requests less data on static pages.

In addition, I feel that the code I wrote is bulky, so I asked the big guys to give me advice and slip away.~~

Topics: Javascript JQuery JSON IE

Programmer Think

Front-end implementation of pseudo-paging

Hot Topics