翻页功能的实现

页面展示效果为：

代码中的current:当前要显示的页；totalPage:总共显示的页数；dataModel:要显示的数据。

• 分页条显示

function pageShow(current, totalPage,dataModel){
    var start = current - 1;
    var end = current + 1;
    var overflow = end - totalPage;
    if (overflow > 0){
        start = start - overflow;
        end=current;
    }
    if (start <= 0){
        end = end - start + 1;
        start=current;
    }
    var str = '<ul class="pager">';
    var click = '"changePage(this)"';
    if (current != 1){
        str += '<li class="previous"><button onclick=' + click + '>首页</button></li>';
        str += '<li class="previous"><button onclick=' + click + '>上一页</button></li>';
    }else{
        str += '<li class="previous"><button style="color:grey;" disabled="disabled">首页</button></li>';
        str += '<li class="previous"><button  style="color:grey;" disabled="disabled">上一页</button></li>';
    }
    for (var i = start; i <= end; i++){
        if (i > 0 && i <= totalPage){
            if (i == current){
                str += '<li class="previous active" >';
                str += '<button id="selected" onclick=' + click + '>' + i + '</button>';
                str += '</li>';
            }else{
                str += '<li class="previous" >';
                str += '<button onclick=' + click + '>' + i + '</button>';
                str += '</li>';
            }
        }
    }
    if (current != totalPage){
        str += '<li class="previous"><button onclick=' + click + '>下一页</button></li>';
        str += '<li class="previous"><button onclick=' + click + '>末页</button></li>';
    }else{
        str += '<li class="previous"><button  style="color:grey;" disabled="disabled">下一页</button></li>';
        str += '<li class="previous"><button style="color:grey;" disabled="disabled">末页</button></li>';
    }
    str+='</ul>';
    dataModel+=str;
    document.getElementById("demo").innerHTML=dataMode;
    }

• 分页点击事件

function changePage(selector){
    var curPage;
    var totalPage=6;
    var dataModel;
    if ($(selector).text() == "首页"){
        curPage = 1;
        pageShow(curPage,totalPage,dataModel);
    }else if($(selector).text() == "末页"){
        curPage = totalPage;
        pageShow(curPage,totalPage,dataModel);
    }else if($(selector).text() == "上一页"){
        curPage = parseInt($("#selected").text()) - 1;
        pageShow(curPage, totalPage,dataModel);
    }else if ($(selector).text() == "下一页"){
        curPage = parseInt($("#selected").text()) + 1;
        pageShow(curPage, totalPage,dataModel);
    }else {
        curPage = parseInt($(selector).text());
        pageShow(curPage, totalPage,dataModel);
    }
}