Achieve the effect of the previous page and the next page

1. Introduction: It mainly realizes the current page data three to switch between the previous page and the next page, the first page and the last page

1: Define data

 //定义数组中的数据
        var arr = ["aa", "bb",
            "cc", "dd",
            "ee", "ff",
            "gg", "hh",
            "ii", "jj"
        ]

2. Set the properties of the page

        //当前页数
        var page = 1;
        //页面条数
        var limit = 3;

Main method: The cutting method of the array is mainly used here

     var nowArr = arr.slice((page - 1) * limit, page * limit);

3. Perform the next click event

  function next() {
    
    
            if (page < Math.ceil(arr.length / limit)) {
    
    
                page += 1;//没当点击一次页数加1
                var nowArr = arr.slice((page - 1) * limit, page * limit);
                show(nowArr);
            } else {
    
    
                alert("已经到头了，没有更多页了")
            }
        }

4. Perform the previous click event

function prey() {
    
    
            if (page > 1) {
    
    
                page -= 1;//没当点击一次页数减1
                var nowArr = arr.slice((page - 1) * limit, page * limit);
                show(nowArr);
            } else {
    
    
                alert("前面没有页数了")
            }
        }

5. Rendering method

 //渲染数据
        function show(arr) {
    
    
            var str = "";
            for (var i = 0; i < arr.length; i++) {
    
    
                str += `
                <li>${
      
      arr[i]}</li>
                `
            }
            document.querySelector("#uls").innerHTML = str;

        }

6. Click event on the homepage

 function first() {
    
    
            page = 1;//让页数默认为一
            var newArr = arr.slice((page - 1) * limit, page * limit);
            show(nowArr);
            alert("这是首页了")
        }

7. Click event on the last page

 function last() {
    
    
            page = Math.ceil(arr.length / limit);//用数据的长度除当前的条数得到最后一页的页数
            var nowArr = arr.slice((page - 1) * limit, page * limit);//剪切出末页
            show(noewArr)
        }