翻页功能的实现

来源：互联网发布：mysql as 规则编辑：程序博客网时间：2024/05/01 12:20

页面展示效果为：

代码中的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);    }}

阅读全文

1 0