动态渲染的页面底部分页按钮

分页按钮效果图

以下是我写的分页按钮的样式

 简单介绍

         虽然不是很好看，但是作为分页按钮的基本功能都实现了，接下来让我介绍一下思路以及实现的方法。

        首先，需要获取到后端传过来的数据，比如一共多少条信息，按照现在每页的页数能分几页之类的，如果传过来的数据只有一共有多少条信息，我们需要先进行判断，如果数据为0，也就是数据库里数据为空，需要隐藏分页按钮，然后渲染上对应的信息，比如“这里什么数据也没有，赶紧去浏览添加吧！”如果有数据，用获取到的数据值，这里用number来代指，除以现在每页多少条数据，就是通过获取到图片最左端的那个select框，获取他的value，然后用number/value，还有number%value，来判断到底有多少页，页数pagenumber =  Math.ceil(number/value）即通过向上取整获取页数，当然，如果后端返回的数据有页数，就不用这么麻烦了，直接用就可以了。

接下来就是根据总共有多少页来渲染按钮的个数，我这里设置的是最多同时只能有5个按钮，如果页数少于5的话按钮个数可以不到5个，当然不能为0个，毕竟为0的话代表没有数据，早在前面就执行渲染相关信息并且隐藏按钮了。下面是我写的代码

动态按钮功能实现

if(pagenum <= 5){       
    document.getElementById("pagebox").innerHTML = ``
    for(let i=1;i<=pagenum ;i++){
        document.getElementById("pagebox").innerHTML += `
        <button class="page">${i}</button>
        `
    }
    var pages = document.querySelectorAll(".page")
    pages[pageNo-1].style.backgroundColor = "#F96C0C"
    pages[pageNo-1].style.color = "white"
}else{
    if(pageNo<=2){
        document.getElementById("pagebox").innerHTML = ``
        for(let i=1;i<=5;i++){
            document.getElementById("pagebox").innerHTML += `
            <button class="page">${i}</button>
            `
        }
        var pages = document.querySelectorAll(".page")
        for(let j=0;j<5;j++){
            pages[j].style.backgroundColor = "wheat"
            pages[j].style.color = "black"
        }
        pages[pageNo-1].style.backgroundColor = "#F96C0C"
        pages[pageNo-1].style.color = "white"
    }else if(pageNo >= pagenum -1){
        document.getElementById("pagebox").innerHTML = ``
        for(let i=1;i<=5;i++){
            document.getElementById("pagebox").innerHTML += `
            <button class="page">${pagenum +i-5}</button>
            `
        }
        var pages = document.querySelectorAll(".page")
        for(let j=0;j<5;j++){
            pages[j].style.backgroundColor = "wheat"
            pages[j].style.color = "black"
        }
        pages[pageNo-pagenum +4].style.backgroundColor = "#F96C0C"
        pages[pageNo-pagenum +4].style.color = "white"
    }else{
        document.getElementById("pagebox").innerHTML = ``
        for(let i=1;i<=5;i++){
            document.getElementById("pagebox").innerHTML += `
            <button class="page">${pageNo+i-3}</button>
            `
        }
        var pages = document.querySelectorAll(".page")
        for(let j=0;j<5;j++){
            pages[j].style.backgroundColor = "wheat"
            pages[j].style.color = "black"
        }
        pages[2].style.backgroundColor = "#F96C0C"
        pages[2].style.color = "white"
    }
}

        在这里pagenum是总页数，pagebox是我为了便于更改按钮数量建的一个div，里面是1，2，3，4，5这些按钮，pageNo是当前页数，先进行判断，看看总页数是否小于5，如果小于5就只渲染从1到pagenum的按钮，并把pages[pageNo-1]更改样式，也就是当前处于的页数对应的按钮更改样式，使其与其他按钮不一样，增加用户体验感，因为数组是从0到多少，而按钮里是从一开始，所有需要减一。

        如果页数大于5的话，就需要更加复杂的运算了，因为我这里设置的是同时只能显示5个，当当前的页数小于3的时候，和前面一样，当大于3并且小于pagenum-2的时候，当前页稳定处于五个按钮的中间，并把当前页的页数渲染到这个按钮里面，并根据它的数据渲染它前面和后面几个按钮里面的数据，当当前页数大于pagenum-1的时候，五个按钮里面的数据就是从最后一个往前渲染的数据，点击后两个来改变样式突出当前页对应的按钮。

点击按钮跳转页面实现

var a = 1;
var pages = document.querySelectorAll(".page")
for(let i=0;i<pages.length;i++){
   pages[i].onclick = () =>{     //这个点击事件只是切换到第几页
   a = parseInt(pages[i].innerHTML)
   searchComments(a)
   }
}

这里我先定义了一个变量a，这个值点击后会改变，先根据标签获取一遍按钮，避免出bug，然后给每一个按钮加上点击事件，当点击某个按钮的时候，把这个按钮里面的值赋值给a，然后以a为参数执行函数searchComments（a），在这里，我这个分页是写给一个查找评论的页面的，所以当点击按钮的时候，执行这个函数，a在这个函数里起的是pageNo的作用，上面的代码也同样是在这个函数里面，相当于一个递归吧，自己执行自己。然后获取新一页的数据，再把旧数据清空，渲染新数据。

点击左右箭头跳转

此处的左右箭头，如果觉得不是很好看的话，是可以把它换成上一页，下一页的。

document.getElementById("leftbtn").onclick = () =>{
    if(pageNo == 1){
        document.getElementById("floatContent").innerHTML =`<div>很抱歉</div><div>页数不可以小于1</div><button onclick='closethis()' class='newbtn'>确定</button>`;
        document.getElementById("floatContent").classList.remove("hide");
    }else{
        a = pageNo - 1
        searchComments(a)
    }
}
document.getElementById("rightbtn").onclick = () =>{
    if(pageNo == pagenum){
        document.getElementById("floatContent").innerHTML =`<div>很抱歉</div><div>后面没有内容了</div><button onclick='closethis()' class='newbtn'>确定</button>`;
        document.getElementById("floatContent").classList.remove("hide");
    }else{
        a = pageNo + 1
        searchComments(a)
    }
}

点击左侧箭头，即上一页，需要判断页数是否等于1，等于1的话上一页就是0，需要报错，下一页需要判断是否等于总页数，等于的话下一页就没有内容，也需要报错，以上内容同样在那个函数里面

更改每页多少条数据自动刷新

这个比较简单，只需要给select框加一个onchange监听事件，即当改变里面的值的时候发生的事件，在这里重新调用一下searchComments（1）即可，即跳转到第一页。

其他

跳转到首页和尾页同样是点击事件触发，只需要把传的参数改为1和pagenum-1即可，根据最右侧的那个框跳转是获取里面是数据，然后跳转，这里需要加一个判断，判断是否属于1到pagenum这个区间，在的话就跳转，不在的话就报错，因为代码较为简单，就不展示代码了。