js实现数据分页算法

一、分页算法

<script>
    <!-- 分页的逻辑算法-->
    //当前页和总页码
    var nowPage=10;
    var totlePage=20;
    var navEle=null;
    var up=null;
    var down=null;
    var totle=null;
    var go=null;
    var num=null;
    var lilist=null;
    window.onload=function(){
        //用class属性获取的是一个集合 不能进行一堆操作 即使只有一个子集 也要使用[];
        navEle=document.getElementsByClassName("nav")[0];
        up=document.getElementsByClassName("goup")[0];
        down=document.getElementsByClassName("godown")[0];
        totle=document.getElementsByClassName("totle")[0];
        go=document.getElementsByClassName("go")[0];
        num=document.getElementsByClassName("num")[0];
        lilist=document.getElementsByClassName("nav-tab");
        //创建页数的标签
        renderPage();
        totle.innerText=totlePage;
        //绑定事件
        up.onclick=function(){
            if(nowPage<=1){
                return;
            }
            nowPage--;
            renderPage();
        }
        down.onclick=function(){
            if(nowPage>=totlePage){
                return;
            }
            nowPage++;
            renderPage();
        }
        //点击跳转
        go.onclick=function(){
            //检测num为空
            var value=num.value;
            if(!value.length){
                alert("请输入值！");
            }
            else{
                nowPage=parseInt(value);
                renderPage();
            }
        }
        num.value="";
    }
    //创建页数的标签
    function createPage(currentPage,totle){
        var str="";
        for(var i=1;i<=totle;i++){
            if(i==2&&currentPage-i>2){
                //前缩
                i=currentPage-3;
                str+="<li>...</li>"
            }
            else if(i-currentPage>2&&i+3<totlePage){
                //后缩
                i=totlePage-2;
                str+="<li>...</li>";
            }
            else{
                if(i===currentPage){
                    str+="<li class='nav-tab ck'>"+i+"</li>"
                }
                else{
                    str+="<li class='nav-tab'>"+i+"</li>";
                }
            }
        }
        return str;
    }
    function renderPage(){
        navEle.innerHTML=createPage(nowPage,totlePage);
        addHandle();
    }
    function addHandle(){
        //遍历所有的li，添加事件
        for(var i=0;i<lilist.length;i++){
            lilist[i].onclick=function(){
                nowPage=parseInt(this.innerText);
                renderPage();
            }
        }
    } 
</script> 

二、百度分页算法

<script>
    //百度分页算法
    var nowPage=1;
    var totlePage=30;
    var save=null;
    var item=document.getElementsByClassName("item-li");
    var up=document.getElementsByClassName("up")[0];
    var down=document.getElementsByClassName("down")[0];
    window.onload=function(){
        //修改所有的li
        changeStatus();
        //绑定事件
        up.onclick=function(){
            if(nowPage<=1){
                return;
            }
            nowPage--;
            changeStatus(-1);
        }
        down.onclick=function(){
            if(nowPage>=totlePage){
                return;
            }
            nowPage++;
            changeStatus(1);
        }
    }
    //修改所有li的状态
    function changeStatus(params){
        if(params>0&&nowPage>item.length/2+1&&nowPage+(item.length/2-1)<=totlePage){
            //所有li文本+1
            updateText(params);
        }
        if(params<0&&nowPage>=item.length/2+1&&nowPage+(item.length/2-1)<totlePage){
            //所有li文本-1
            updateText(params);
        }
        for(var i=0;i<item.length;i++){
            var page=parseInt(item[i].innerText);
            if(page===nowPage){
                if(save){
                    save.classList.remove('check-item');
                }
                item[i].classList.add('check-item');
                //记录
                save=item[i];
            }
        }
    }
    //所有li元素+1  -1 方法
    function updateText(args){
        for(var i=0;i<item.length;i++){
            item[i].innerText=parseInt(item[i].innerText)+args;
        }
    } 
</script> 

三、带数据的分页算法

<script>
    //获取元素
    var clist = document.getElementsByClassName("c-list")[0];
    var up = document.getElementsByClassName("up")[0];
    var down = document.getElementsByClassName("down")[0];
    var item = document.getElementsByClassName("item-li");
    var lastpage = document.getElementsByClassName("lastpage")[0];
    var firstpage = document.getElementsByClassName("firstpage")[0];
    var gobtn = document.getElementsByClassName("gobtn")[0];
    //获取下拉菜单
    var menulist = document.getElementById("checkinfo");
    var gonum = document.getElementById("gonum");
    //记录默认状态值
    var save=null;
    //接收当前页的数据
    var pageData = null;
    //浏览器加载完成之后默认显示5条一页
    var nowpage=1;
    var pageNum=5;//默认一页显示5条
    var totlepage=setTotle();
    window.onload=function(){
        //获取当前页的数据
        pageData=getPageData();
        renderPage();
        //初始化分页
        changeStatus();
        up.onclick=function(){
            if(nowpage<=1){
                return;
            }
            nowpage--;
            changeStatus(-1);
            //获取当前页的数据
            pageData=getPageData();
            renderPage();
        }
        down.onclick=function(){
            if(nowpage>=totlepage){
                return;
            }
            nowpage++;
            changeStatus(1);
            //获取当前页的数据
            pageData=getPageData();
            renderPage();
        }
        lastpage.onclick=function(){
            nowpage=totlepage;
            gopage(nowpage-parseInt(item[item.length-1].innerText));
        }
        firstpage.onclick=function(){
            nowpage=1;
            gopage(-(parseInt(item[0].innerText-1)));
        }
        //文本发生变化事件
        menulist.onchange = function () {
            //获取的value是当前一页显示多少条
            pageNum = this.value;
            console.log(pageNum);
            //重新计算总页数
            totlepage = setTotle();
            //重新加载数据
            pageData = getPageData();
            renderPage();
        }
        //给所有的li添加事件
        for(var i=0;i<item.length;i++){
            item[i].onclick=function(){
                nowpage=parseInt(this.innerText);
                //获取中间元素的文本值
                var centerNum=item[5].innerText;
                var num=nowpage-centerNum;
                updateText(num);
                changeStatus();
                //重新加载数据
                pageData = getPageData();
                renderPage();
            }
        }
        //跳转
        gobtn.onclick=function(){
            nowpage=parseInt(gonum.value);
            //获取中间元素的文本值
            var centerNum=item[5].innerText;
            var num=nowpage-centerNum;
            updateText(num);
            changeStatus();
            //重新加载数据
            pageData = getPageData();
            renderPage();
            gonum.value="";
        }
    }
    //计算总页码
    function setTotle(){
        //向上取整
        return Math.ceil(stulist.length/pageNum);
    }
    //获取当前页的数据方法
    function getPageData(){
        return stulist.slice((nowpage-1)*pageNum,nowpage*pageNum);
    }
    //渲染当前页的数据到页面
    function renderPage(){
        var str="";
        for(var index in pageData){
            var one=pageData[index];
            str+="<div><span>"+one.name+"</span>"+"<span>"+one.sex+"</span>"+"<span>"+one.age+"</span>"+"<span>"+one.tel+"</span>"+"<span>"+one.address+"</span>"+"<span>"+one.des+"</span></div>";
        }
        clist.innerHTML=str;
    }
    //分页逻辑算法
    function changeStatus(params){
        if(params>0){
            //所有li文本+1
            updateText(params);
        }
        if(params<0){
            //所有li文本-1
            updateText(params);
        }
        for(var i=0;i<item.length;i++){
            var page=parseInt(item[i].innerText);
            if(page===nowpage){
                if(save){
                    save.classList.remove('check-item');
                }
                item[i].classList.add('check-item');
                //记录
                save=item[i];
            }
        }
    }
    //所有li元素+1  -1 方法
    function updateText(args){
        for(var i=0;i<item.length;i++){
            //当前页小于6  直接显示1-10
            //当前页 大于19 全部显示
            item[i].innerText=(nowpage<=item.length/2+1?(i+1):nowpage<totlepage-4?(parseInt(item[i].innerText)+args):(totlepage-item.length+1+i));
        }
    }
    //最后一页和第一页的方法
    function gopage(args){
        //修改所有li的文本
        updateText(args);
        changeStatus();
        pageData=getPageData();
        renderPage();
    } 
</script>