几种分页的实现

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

半生囚徒

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

阅读量572

点赞数

分类专栏： web页面前端文章标签： html javascript div class function border

web页面前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

第一种方式：

<!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>分页工具条测试</title>
<style type="text/css">

div.pagination {
font-size:12;
font_face:arial;
font-color:#ffffff;

padding:3px;
margin:3px;
text-align:center;
}

div.pagination a {
padding: 2px5px 2px 5px;
margin-right: 2px;
border: 1pxsolid #9aafe5;

text-decoration: none;
color:#2e6ab1;
}
div.pagination a:hover, div.pagination a:active {
border: 1pxsolid #2b66a5;
color:#000;
background-color: lightyellow;
}
div.pagination span.current {
padding: 2px5px 2px 5px;
margin-right: 2px;
border: 1pxsolid navy;
font-weight:bold;
background-color: #2e6ab1;
color:#FFF;
}
div.pagination span.disabled {
padding: 2px5px 2px 5px;
margin-right: 2px;
border: 1pxsolid #929292;
color:#929292;
}
</style>
<script language="javascript">
function pagination(current,total){
var HTML="";
var separator="...";
if(total<=11){
if(total==0)return;
//生成上一页按钮
if(current==1){
HTML="<span class='disabled'>◄</span>";
}else{
HTML="<a href='#'οnclick=topage("+(current-1)+")>◄</a>";
}
//生成中间按钮
HTML+=this.getMidHTML(1,total,current);
//生成下一页按钮
if(current==total){
HTML+="<span class='disabled'>►</span>";
}else{
HTML+="<a href='#'οnclick=topage("+(current+1)+")>►</a>";
}
}else{
if(current-1<=5){
HTML=this.getPreHTML(current,total);
HTML+=this.getMidHTML(3,9,current);
HTML+=separator;
HTML+=this.getLastHTML(current,total);
}else if(total-current<=6){
HTML=this.getPreHTML(current,total);
HTML+=separator;
HTML+=this.getMidHTML(total-8,total-2,current);
HTML+=this.getLastHTML(current,total);
}else{
HTML=this.getPreHTML(current,total);
HTML+=separator;
HTML+=this.getMidHTML(current-3,current+3,current);
HTML+=separator;
HTML+=this.getLastHTML(current,total);
}
}
this.show=HTML;
}
pagination.prototype.getPreHTML=function(current,total){//生成前三个按钮，1,2和上一页按钮
var html="";
if(current==1){
html="<span class='disabled'>◄</span>";
html+="<span class='current'>1</span>";
}else{
html="<a href='#'οnclick=topage("+(current-1)+")>◄</a>";
html+="<a href='#'οnclick=topage(1)>1</a>";
}
if(current==2){
html+="<span class='current'>2</span>";
}else{
html+="<a href='#'οnclick=topage(2)>2</a>";
}
return html;
}
pagination.prototype.getMidHTML=function(first,last,current){
var html="";
for(var i=first;i<=last;i++){
if(i==current){
html+="<span class='current'>"+current+"</span>";
}else{
html+="<a href='#'οnclick=topage("+i+")>"+i+"</a>";
}
}
return html;
}
pagination.prototype.getLastHTML=function(current,total){
//生成三个按钮，最后两页和下一页按钮
var html="";//不可不初始化,否则在字符串相加时出现undefined
if(current==total-1){
html="<span class='current'>"+(total-1)+"</span>";
}else{
html="<a href='#'οnclick=topage("+(total-1)+")>"+(total-1)+"</a>";
}
if(current==total){//生成最后二个按钮
html+="<span class='current'>"+total+"</span>";
html+="<span class='disabled'>►</span>";
}else{
html+="<a href='#'οnclick=topage("+total+")>"+total+"</a>";
html+="<a href='#'οnclick=topage("+(current+1)+")>►</a>";
}
return html;
}
function test()//测试以上代码的正确性
{
var hear=document.getElementById("page");
for (var i=1;i<=11;i++){
for(var j=1;j<=i;j++){
var page=new pagination(j,i);
var div=document.createElement("div");
var div2=document.createElement("div");
div2.innerHTML="<br>";
hear.appendChild(div2);
hear.appendChild(div);
div.innerHTML=page.show;
}
}
for (var i=11;i<=25;i++){
for(var j=1;j<=i;j++){
var page=new pagination(j,i);
var div=document.createElement("div");
var div2=document.createElement("div");
div2.innerHTML="<br>";
hear.appendChild(div2);
hear.appendChild(div);
div.innerHTML=page.show;
}
}
}
</script>

</head>

<body>
<div class="pagination" id="page"></div>
<input type="button" οnclick="test()" value='生成测试分页工具条'/>

</body>
</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>无标题文档</title>

</head>

<body>
<div id="resultContent"></div>

<script type="text/javascript">
var currentPage = 1; //当前页
var pageSize = 10; //每页中显示的数据数
var totalpage = 0; //总页数
var recordCount = 1000; //假设总数据条数100
var numCount = 5; //每页显示多少个分页数字

//算出多少页
if (recordCount % pageSize == 0) {
totalpage = parseInt(recordCount / pageSize);
} else {
totalpage = parseInt(recordCount / pageSize) + 1;
}

totalpage = 11;//假设共有11页，测试用，用到时直接删除
if(totalpage > 1){ //需要显示分页工具栏
setpage();
}
//页数跳转函数
function gotopage(target) {
currentPage = target; //把页面计数定位到第几页
setpage();
//reloadpage(target); //调用显示页面函数显示第几页,这个功能是用在页面内容用ajax载入的情况
}

//设置页数
function setpage(){

var outstr = "";

outstr += '<div id="setpage" style="text-align:center;\
padding:16px;letter-spacing:2px;">';

if (totalpage <= numCount) //页数小于等于每页显示的分页数字
{
outstr += setPageHtml(1, totalpage);
}

if (totalpage > numCount) //页数大于每页显示的分页数字
{
if(parseInt((currentPage) / numCount) == 0)//前每页显示的分页数字
{
outstr += setPageHtml(1, numCount);
}
else //每页显示的分页数字之后分页显示
{
//构造选中页始终在中间位置

var moiety = 0;
var begin = 0;
var end = 0;

if (numCount % 2 == 0) { //偶数
moiety = parseInt(numCount / 2);

begin = parseInt(currentPage - moiety);
end = parseInt((currentPage + moiety ) > totalpage
? totalpage : (currentPage + moiety - 1));
} else { //奇数
moiety = parseInt(numCount / 2);
begin = parseInt(currentPage - moiety);
end = parseInt((currentPage + moiety) > totalpage
? totalpage : (currentPage + moiety));
}

outstr += "<a href='javascript:void(0)' οnclick='gotopage("
+ 1 + ")'>首页</a> "

outstr += setPageHtml(begin, end);

outstr+="&nbsp<a href='javascript:void(0)' οnclick='gotopage("
+ totalpage+ ")'>尾页</a>";

}
}

outstr += '</div>' ;

document.getElementById("resultContent").innerHTML = outstr;

}
//构造页数Html
function setPageHtml(begin, end){
var outstr = "";
if (1 != currentPage) {
outstr += "<a href='javascript:void(0)' οnclick='gotopage("
+ (currentPage - 1) + ")'>上一页</a>";
}

for (var i = begin; i <= end; i++) {
if (i != currentPage) {
outstr += '[<a href="javascript:void(0)" οnclick="gotopage('
+ i + ')">' + i + '</a>]';
} else {
outstr += '<span>[' + i + ']<span>';
}
}

if (totalpage != currentPage) {
outstr += "<a href='javascript:void(0)' οnclick='gotopage("
+ (currentPage + 1) + ")'>下一页</a>";
}

return outstr;
}
</script>
</body>
</html>

-------------------------------------------------------------------------分割线--------------------------------------------------

拷贝以上代码保存为html格式，直接运行即可看到效果。

半生囚徒

关注

0
点赞
踩
0

收藏

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

第一种方式：分页工具条测试div.pagination { font-size:12; font_face:arial; font-color:#ffffff; padding:3px; margin:3px; text-align:center;}div.pagination a {
复制链接

扫一扫

专栏目录