html分页实现

最新推荐文章于 2023-08-24 01:10:22 发布

CHMGG

最新推荐文章于 2023-08-24 01:10:22 发布

阅读量1.4k

点赞数

分类专栏：前端文章标签：分页

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

分页经常会用到，今天看到一个很好的分页，特记录下来。

转载自：点击打开链接

转自：http://www.php100.com/html/webkaifa/PHP/PHPyingyong/2012/1110/11528.html

先上效果：

实现了“首页” " 末页 "，“上一页”，“下一页”功能。

源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>ajax分页</title>  
</head>  
  
<body>  
<style>  
.pagination {font-family: Tahoma;font-size: 12px;height: 22px;margin: 5px 10px;text-align: left;}  
.pagination a,.page-cur,.page-start,.page-end,.page-disabled,.page-skip {  
height:22px;line-height:22px;margin:0 3px 0 0;text-align:center;vertical-align:middle;white-space:nowrap;}  
.pagination input {border-width: 1px;}  
.page-start, .pagination a, .page-end, .page-disabled {border: 1px solid #CCCCCC;padding: 0 5px;}  
.pagination a {text-decoration: none;}  
.page-cur {background-color: #FFEDE1;border: 1px solid #FD6D01;color: #FD6D01;font-weight: 700;padding: 0 5px;}  
.page-disabled {color: #CCCCCC;}  
.page-skip {color: #666666;padding: 0 3px;}  
</style>  
<div id="pageNav"></div>  
</body>  
  
</html>  
<script>  
testPage(1);  
function testPage(curPage){  
  
        supage('pageNav','testPage','',curPage,100,5);  
  
}  
  
  
/** 
  
 * @param {String} divName 分页导航渲染到的dom对象ID 
 * @param {String} funName 点击页码需要执行后台查询数据的JS函数 
 * @param {Object} params 后台查询数据函数的参数，参数顺序就是该对象的顺序，当前页面一定要设置在里面的 
 * @param {String} total 后台返回的总记录数 
 * @param {Boolean} pageSize 每页显示的记录数，默认是10 
 */  
function supage(divId, funName, params, curPage, total, pageSize){  
    var output = '<div class="pagination">';  
    var pageSize = parseInt(pageSize)>0 ? parseInt(pageSize) : 10;  
    if(parseInt(total) == 0 || parseInt(total) == 'NaN') return;  
    var totalPage = Math.ceil(total/pageSize);  
    var curPage = parseInt(curPage)>0 ? parseInt(curPage) : 1;  
      
    //从参数对象中解析出来各个参数  
    var param_str = '';  
    if(typeof params == 'object'){  
        for(o in params){  
            if(typeof params[o] == 'string'){  
               param_str += '\'' + params[o] + '\',';  
            }  
            else{  
               param_str += params[o] + ',';  
            }  
        }  
        //alert(111);  
    }  
    //设置起始页码  
    if (totalPage > 10) {  
        if ((curPage - 5) > 0 && curPage < totalPage - 5) {  
            var start = curPage - 5;  
            var end = curPage + 5;  
        }  
        else if (curPage >= (totalPage - 5)) {  
            var start = totalPage - 10;  
            var end = totalPage;  
        }  
        else {  
            var start = 1;  
            var end = 10;  
        }  
    }  
    else {  
        var start = 1;  
        var end = totalPage;  
    }  
      
    //首页控制  
    if(curPage>1){  
        output += '<a href="javascript:'+funName+'(' + param_str + '1);" title="第一页" class="page-first">«</a>';  
    }  
    else  
    {  
        output += '<span class="page-disabled">«</span> ';  
    }  
    //上一页菜单控制  
    if(curPage>1){  
        output += '<a href="javascript:'+funName+'(' + param_str + (curPage-1)+');" title="上一页" class="page-previous">‹</a>';  
    }  
    else{  
        output += '<span class="page-disabled">‹</span>';  
    }  
      
    //页码展示  
    for (i = start; i <= end; i++) {  
        if (i == curPage) {  
            output += '<a href="javascript:;" class="page-cur">' + curPage + '</a>';  
        }  
        else {  
            output += '<a href="javascript:'+funName+'(' + param_str + i + ');">' + i + '</a>';  
        }  
    }  
    //下一页菜单控制  
    if(totalPage>1 && curPage<totalPage){  
        output += '<a title="下一页" href="javascript:'+funName+'('+param_str + (curPage+1)+');" class="page-next">›</a>';  
    }  
    else{  
        output += '<span class="page-disabled">›</span>';  
    }  
    //最后页控制  
    if(curPage<totalPage){  
        output += '<a title="最后页" href="javascript:'+funName+'('+param_str + totalPage+');" class="page-end">»</a>';  
    }  
    else{  
        output += '<span class="page-disabled">»</span>';  
    }  
      
    output += '</div>';  
    //渲染到dom中  
    document.getElementById(divId).innerHTML = output;  
};  
</script>

再次声明，转自：点击打开链接

转自：http://www.php100.com/html/webkaifa/PHP/PHPyingyong/2012/1110/11528.html

CHMGG

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
html分页实现

分页经常会用到，今天看到一个很好的分页，特记录下来。转载自：点击打开链接转自：http://www.php100.com/html/webkaifa/PHP/PHPyingyong/2012/1110/11528.html先上效果：实现了“首页” " 末页 "，“上一页”，“下一页”功能。源码： ajax分页 .pagin
复制链接

扫一扫