分页功能

image.png

基础的html

<main id="blackList-content" class="blackList-content">
                                
</main>
<nav id="bl-nav"aria-label="Page navigation">
  <ul class="pagination">
                                
  </ul>
</nav>

一些css

.blackList-item{
    display:flex;
    justify-content: space-between;
    align-items: center;
    width:100%;
    padding-bottom:10px;
    border-bottom:1px solid #ddd
}
.blackList-item-lt{
    display:flex;
}
.blackList-item-lt-message{
    display:flex;
    justify-content: space-around;
    flex-direction: column;
}
.blackList-item-lt-message p{
    margin:0;
    padding:0;
}
.blackList-item-lt div img{
    width:60px;
    height:60px;
    border-radius: 50%;
}
.blackList-item-lt-message>div:nth-child(1){
    color:#222;
}
.blackList-item-lt>div{
    min-width:60px;
}

按钮样式使用的bootstrap。
使用ES6模板语法比以前更方便。

假设每次点击只收到当前页面的数据（例如点击第二面之传输第二面的数据）。

'{"code":200,
"message":null,
"data":{
"total":8,//总条数
"size":5,//每页的条数
"pages":2,//总页数
"current":1,//当前页数
"records":[{"uid":1,"head":"Images/head.jpg","userName":"userName","time":"2018-06-30 02:44:21"},{"uid":2,"head":"Images/head.jpg","userNname":"userName","time":"2018-06-30 02:44:21"},{"uid":3,"head":"Images/head.jpg","userNname":"userName","time":"2018-06-30 02:44:21"},{"uid":4,"head":"Images/head.jpg","userNname":"userName","time":"2018-06-30 02:44:21"},{"uid":5,"head":"Images/head.jpg","userNname":"userName","time":"2018-06-30 02:44:21"}]}}'

用forEach循环得出要加载的页面模板。
如果接受的数据不止每面而是更多或者全部，要计算加载的地方。
在按钮中插入value=uid，点击时判断点击的哪个按钮。

bList = JSON.parse(bList)
    let temp={}
    temp.size = bList.data.size || 5
    console.log(bList.data.records)
    temp.domValue = ``
    temp.data = bList.data.records
    temp.data.forEach(function(e){
    temp.domValue += `
                    <div class="blackList-item">
                        <div class="blackList-item-lt">
                            <div>
                                <img src="${e.head}">
                            </div>
                            <div class="blackList-item-lt-message text-left">
                                <div>
                                    <p>${e.userName}</p>
                                </div>
                                <div>
                                    <p>添加时间：${e.time}</p>
                                </div>
                            </div>
                        </div>
                        <div class="blackList-item-rt">
                            <button value="${e.uid}" class="btn btn-default">移除</button>
                        </div>
                    </div>
                    `
    })
 

生成分页标签，给每个标签加上data-page属性已判断点击后需要加载的页面，
并根据当前页面来判断需要给哪一个生成的页面加上标记。

function makeLiFor(a,b,current){//循环生成li
    let domNav=``
    for(let i=a;i<=b;i++){
        if(i===current){//给当前页面标签加上.active}
                domNav = domNav +  `<li class="active"><span data-page="${i}" href="#">${i}</span></li>`
        }else{
                domNav = domNav + `<li class=""><span data-page="${i}" href="#">${i}</span></li>`
        }
    }
    return domNav
}

a，b是根据总数来判断标签要生成哪一部分,假设标签最多显示5面，详见下面。

下面是判断要显示哪部分标签页。

function makeLi(temp,bList){//生成要渲染的分页标签
    console.log(temp.current)
    let a,b
    if(bList.data.total <= temp.size*5){
        //标签页小于等于5时
        a=1;
        b=temp.page
        return makeLiFor(a,b,temp.current)
    }else if(bList.data.total > temp.size*5){
        //总标签页大于5时
        if(temp.current < 3){//当前标签页小于5时
            a=1;
            b=temp.page;
            return  makeLiFor(a,b,temp.current)
        }else if(temp.current >= 3 && temp.current >= temp.page-2){//当前标签页大于最大标签页-2时
            a=temp.current-2;
            b=temp.current+2;
            return  makeLiFor(a,b,temp.current)
        }else if(temp.current > temp.page-2){
            a=temp.page-4;
            b=temp.page;
            return  makeLiFor(a,b,temp.current)
        }
    }
}

上面代码接受了数据，并根据数据生成了dom。
将生成的dom插入进页面

    $('.blackList-content').prepend(temp.domValue)
    $('#bl-nav>.pagination').append(temp.domNav)

监听整个分页标签，根据点击时，span中的data-page属性判断要加载哪一面。

    $("#bl-nav").on("click",function(e){
        if(e.target.tagName === 'SPAN'){//判断点击的是否为span标签
            let temp ={}
            temp['needPage'] = $(e.target).attr('data-page') 
            temp = JSON.stringify(temp)
        $.ajax({
            type: "post",
            url: "/loadingBlacklist",
            data: temp, 
            processData: false,    //false
            cache: false,    //缓存
            beforeSend:function(){
                $('.loading').addClass("active")
            },
            success: function(data){
                ajaxSuccess(data);      //成功时执行的函数
            },
            fail:function(){
                console.log('error')
            },
            complete:function(){//执行完成前执行的函数，模拟加载过程用
                setTimeout(function(){
                    $('.loading').removeClass("active")
                },1000)
            }
        })
    }
    })

监听整个黑名单标签，根据点击时，button中的value属性判断要移除哪一个用户。

   $("#blackList-content").on("click",function(e){
        if(e.target.tagName === 'BUTTON'){
        let temp = {removeBl:$(e.target).attr('value')}
        temp= JSON.stringify(temp)
        $.ajax({
            type: "post",
            url: "/removeBlacklist",
            data: pageData, 
            processData: false,    //false
            cache: false,    //缓存
            beforeSend:function(){
                $('.loading').addClass("active")
            },
            success: function(data){//重新接收数据
                console.log('成功移除')
                ajaxSuccess(data)      
            },
            fail:function(){
                console.log('error')
            },
            complete:function(){
                setTimeout(function(){
                    $('.loading').removeClass("active")
                },1000)
            }
        })
    }
    })

完整的代码

    //进入黑名单页面时进行加载
    $('#BLanchor').on('click',function(){
        ajaxSuccess(bList)
        // let temp ={}
        //     temp['needPage'] = 1
        //     temp = JSON.stringify(temp)
        // $.ajax({
        //     type: "post",
        //     url: "/loadingBlacklist",
        //     data: temp, 
        //     processData: false,    //false
        //     cache: false,    //缓存
        //     beforeSend:function(){
        //         $('.loading').addClass("active")
        //     },
        //     success: function(data){//重新接收数据
        //         console.log('成功移除')
        //         ajaxSuccess(data)      
        //     },
        //     fail:function(){
        //         console.log('error')
        //     },
        //     complete:function(){
        //         setTimeout(function(){
        //             $('.loading').removeClass("active")
        //         },1000)
        //     }
        // }) 
    })

    //点击页面标签时
    $("#bl-nav").on("click",function(e){
        if(e.target.tagName === 'SPAN'){
            let temp ={}
            temp['needPage'] = $(e.target).attr('data-page') 
            temp = JSON.stringify(temp)
        $.ajax({
            type: "post",
            url: "/loadingBlacklist",
            data: temp, 
            processData: false,    //false
            cache: false,    //缓存
            beforeSend:function(){
                $('.loading').addClass("active")
            },
            success: function(data){
                ajaxSuccess(data);      
            },
            fail:function(){
                console.log('error')
            },
            complete:function(){
                setTimeout(function(){
                    $('.loading').removeClass("active")
                },1000)
            }
        })
    }
    })

    //点击移除按钮时
    $("#blackList-content").on("click",function(e){
        if(e.target.tagName === 'BUTTON'){
        let temp = {removeBl:$(e.target).attr('value')}
        temp= JSON.stringify(temp)
        $.ajax({
            type: "post",
            url: "/removeBlacklist",
            data: temp, 
            processData: false,    //false
            cache: false,    //缓存
            beforeSend:function(){
                $('.loading').addClass("active")
            },
            success: function(data){//重新接收数据
                console.log('成功移除')
                ajaxSuccess(data)      
            },
            fail:function(){
                console.log('error')
            },
            complete:function(){
                setTimeout(function(){
                    $('.loading').removeClass("active")
                },1000)
            }
        })
    }
    })


//模拟接收的时json数据
var bList ='{"code":200,"message":null,"data":{"total":8,"size":10,"pages":2,"current":1,"records":[{"uid":1,"head":"Images/head.jpg","userName":"userName","time":"2018-06-30 02:44:21"},{"uid":2,"head":"Images/head.jpg","userName":"userName","time":"2018-06-30 02:44:21"},{"uid":3,"head":"Images/head.jpg","userName":"userName","time":"2018-06-30 02:44:21"},{"uid":4,"head":"Images/head.jpg","userName":"userName","time":"2018-06-30 02:44:21"},{"uid":5,"head":"Images/head.jpg","userName":"userName","time":"2018-06-30 02:44:21"}]}}'
//下面时成功收到时执行的内容
function ajaxSuccess(bList){
    bList = JSON.parse(bList)
    let temp={}
    temp.size = bList.data.size || 10
    console.log(bList.data.records)
    temp.domValue = ``
    temp.data = bList.data.records
    temp.data.forEach(function(e){
    temp.domValue += `
                    <div class="blackList-item">
                        <div class="blackList-item-lt">
                            <div>
                                <img src="${e.head}">
                            </div>
                            <div class="blackList-item-lt-message text-left">
                                <div>
                                    <p>${e.userName}</p>
                                </div>
                                <div>
                                    <p>添加时间：${e.time}</p>
                                </div>
                            </div>
                        </div>
                        <div class="blackList-item-rt">
                            <button value="${e.uid}" class="btn btn-default">移除</button>
                        </div>
                    </div>
                    `
    })
    temp.domNav = ``
    temp.current = bList.data.current
    temp.total = bList.data.total
    temp.page = Math.ceil(bList.data.total/temp.size)

    temp.domNav = makeLi(temp,bList)
    //将生成元素插入到页面中
    $('.blackList-content').prepend(temp.domValue)
    $('#bl-nav>.pagination').append(temp.domNav)
}

function makeLiFor(a,b,current){//循环生成li
    let domNav=``
    for(let i=a;i<=b;i++){
        if(i===current){//给当前页面标签加上.active}
                domNav = domNav +  `<li class="active"><span data-page="${i}" href="#">${i}</span></li>`
        }else{
                domNav = domNav + `<li class=""><span data-page="${i}" href="#">${i}</span></li>`
        }
    }
    return domNav
}
//-------
function makeLi(temp,bList){//生成要渲染的分页标签
    console.log(temp.current)
    let a,b
    if(bList.data.total <= temp.size*5){
        //标签页小于等于5时
        a=1;
        b=temp.page
        return makeLiFor(a,b,temp.current)
    }else if(bList.data.total > temp.size*5){
        //总标签页大于5时
        if(temp.current < 3){//当前标签页小于5时
            a=1;
            b=temp.page;
            return  makeLiFor(a,b,temp.current)
        }else if(temp.current >= 3 && temp.current >= temp.page-2){//当前标签页大于最大标签页-2时
            a=temp.current-2;
            b=temp.current+2;
            return  makeLiFor(a,b,temp.current)
        }else if(temp.current > temp.page-2){
            a=temp.page-4;
            b=temp.page;
            return  makeLiFor(a,b,temp.current)
        }
    }
}