Pagination

emilo Post Leave a Comment

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script>

<head>
    <meta charset="UTF-8">
    <title>Modal</title>
    <style>
        #content {
            overflow-y: scroll;
            max-height: 500px;
            border: solid black 2px;
            padding: 10px;
        }

        #obj {
            border: solid black 2px;
            padding: 10px;
            margin-bottom: 2px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="content"></div>
    <button id="btnNext" onclick="prev()">PREV</button>
    <button id="btnNext" onclick="next()">NEXT</button>
    <span id="listCount"></span>
    <script>
        var first = 0;
        var last = 10;
        var list = [];
        window.onload = async function loadData() {
            try {
                let response = await axios.get(`https://jsonplaceholder.typicode.com/comments`);
                for (var obj of response.data) {
                    list.push(obj.name);
                }
            } catch (error) {
                console.error(error);
            }
            document.getElementById('listCount').innerHTML = "Length: " + list.length;
            setData();
        }
        function setData() {
            var html = ``;
            for (index = first; index < last; index++) {
                var obj = list[index];
                html += `<div id="obj">${index + 1} - ${obj}</div>`;
            }
            document.getElementById('content').innerHTML = html;

        }
        function next() {
            if (last >= list.length) {
                console.log("morethan 500")
            }
            else {                
                first = first + 10;
                last = last + 10;
                setData();
            }
        }
        function prev() {
            if (first <= 0) {
                console.log("cant go lower")
            }
            else {
                first = first - 10;
                last = last - 10;
                setData();
            }
        }




    </script>
</body>

</html>