javascript实现pagination分页组件

分页组件是web开发中常见的组件，请完成pagination函数，在id为jsPagination的DOM元素中完成分页的显示部分，需求如下
1、最多连续显示5页，居中高亮显示current页（如demo1所示)
2、total为0时，隐藏整个元素（如demo2所示）
3、如果total<=5，则显示全部页数，隐藏“首页”和“末页”元素（如demo3所示）
4、当current居中不足5页，向后(前)补足5页，隐藏“首页”(“末页”)元素(如demo4和demo5所示)
5、total、current均为正整数，1 <= current <= total

/*

•  思路: 以current为轴点，用一个数组保存7个li对应的状态 -1,0皆为不显示 num>1显示对应的数字
•  但是需要判判断是否是 第一个（首页） 最后一个（末页），这两个只有当对应num大于0才显示，否则隐藏
•  首先 我们应该确定右边界 maxRight [...,current,...],a[current]为current节点的值
•  total-current可以判断出右边还有多少大于2的话末页就可以显示否则右边界应该是 total-current+1
•  考虑一种情况，当current是小于等于2的，那么current右边的数量是应该增加的
•  if(current<=2 && maxRight+1<total){
•         maxRight+=3-current;
•  }
•  情况考虑完毕，先从current向右走var i = 1 ; i <= maxRight ; i++；
•  同理向左走一次走完那么至少是左边都是完整的，当然我们应该过滤掉empty，因为我们是从a[current]开始左右走的，  包括首页的控制变量
•  但是右边是不一定的，因为total是可能小于7的，但我们可以确定的是剩下的一定是不能显示的，所以
•  a = a.filter(function(a){
•           return a>=-1;
•         })
•     //填充7个 while(a.length<7){
•                a[a.length]=-1;
•            }
•    至此，遍历这个数组 我们就可以对应的去渲染了

*/

 var pag = document.getElementById("jsPagination"),
        pageLis = pag.children.pageNum;

        function pagination(total, current) {
            if(total==0 || current>total){
                hide(pag);
                return;
            }
            show(pag);
            var a = [],count=0;
            a[current] = current;
            maxRight = total-current>2?3:total-current+1;
            if(current<=2 && maxRight+1<total){
               maxRight+=3-current;
            }
            //向右走
            for(var i = 1 ; i <= maxRight ; i++){
                if(current+i<=total){
                   a[current+i] = current+i;
                }
                else{
                    a[current+i] = -1;
                }
            }
            //向左走
            for(var i = 1 ; i <= 5-maxRight+1 ; i++){
               if(current-i>=0){
                   a[current-i] = current-i; 
               }
            }
            //过滤empty
            a = a.filter(function(a){
               return a>=-1;
            })
            //填充7个
            while(a.length<7){
               a[a.length]=-1;
            }
            render({list:a,current:current});
        }
        // render(pagination(3,2));
        function render(data){
            var a = data.list,
                current = data.current,
                last = a.length-1;
            a.forEach(function(num,i){ //遍历一次数组，对dom操作
                    if(num>0){
                        if(i>0 && i!=0 && i!=6)
                            pageLis[i].innerHTML = num;
                        if(num==current){
                            activeLi(pageLis[i])
                        }else{
                             noActiveLi(pageLis[i])
                        }
                        show(pageLis[i]);
                    }
                    else{
                        hide(pageLis[i]);
                        noActiveLi(pageLis[i])
                    }
            })
        }
        function noActiveLi(el){
            el.classList.remove("current");
        }
        function activeLi(el){
            el.classList.add("current");
        }
        function hide(el){
            el.classList.add("hide");
        }
        function show(el){
            el.classList.remove("hide");
        }