js+css实现的简单易用兼容好的分页

 更新时间:2013年12月30日 16:01:26   作者:  
使用html、js、css实现的简单易用兼容好的分页,具体的实现如下,感兴趣的朋友可以参考下
效果:
 
html:
复制代码 代码如下:

<div id="page"></div>

用法:
复制代码 代码如下:

var total = 310;
var pageNo = 1;
var pageCount = 31;//共有多少页
var pageSize = 10;
var actionName = "list.action";
var otherParam = "&name='www'&order='time'";
$(function(){
paginate();//分页}
);

css:
复制代码 代码如下:

#page{
font-size: 14px;
clear: both;
padding-top: 1.45em;
white-space: nowrap;
}
#page a{
background: white;
border: 1px solid #E7ECF0;
display: inline-block;
height: 22px;
line-height: 22px;
margin-right: 5px;
text-align: center;
text-decoration: none;
vertical-align: middle;
width: 23px;
}
#pagePre,#pageNext{

}
.pageCurrent{
font-weight: bold;
}

js:
复制代码 代码如下:

function mcPaginate(){

var $pageDiv = $("#page");

actionName = actionName + "?pageSize="+pageSize;


if(typeof otherParam != 'undefined' && otherParam != ""){
actionName = actionName + otherParam;
}

$pageDiv.append("第"+pageNo+"页/共"+pageCount+"页");

//上一页
if(pageNo > 1){
var hf = actionName + "&pageNo="+(pageNo-1);
$pageDiv.append("<a href='"+hf+"' style='width: 65px;'>"+"上一页"+"</a>");
};

if(pageCount <= pageSize){
for(var i=0; i < pageCount; i++){
var hf = actionName + "&pageNo="+(i+1);
if(pageNo == (i+1)){//当前页
$pageDiv.append("<a href='"+hf+"' class='pageCurrent'>"+pageNo+"</a>");
}else{
$pageDiv.append("<a href='"+hf+"'>"+(i+1)+"</a>");
};
};
}else{
for(var i=0; i < pageSize; i++){
var midIndex = 0;
if(pageSize%2 == 0){
midIndex = pageSize/2 - 1;
}else{
midIndex = pageSize/2;
}
var num = -midIndex;
var showPageNum = pageNo+i+num;


if(showPageNum > 0 && showPageNum <= pageCount){

var hf = actionName + "&pageNo="+showPageNum;
if(pageNo == showPageNum){//当前页
$pageDiv.append("<a href='"+hf+"' class='pageCurrent'>"+showPageNum+"</a>");
}else{
$pageDiv.append("<a href='"+hf+"'>"+showPageNum+"</a>");
};
};
};
}

//下一页
if(pageNo < pageCount){
var hf = actionName + "&pageNo="+(pageNo+1);
$pageDiv.append("<a href='"+hf+"' style='width: 65px;'>"+"下一页"+"</a>");
};

$pageDiv.append("转到"+"<input type='text' class='goNum' style='width:30px;' name='goNum'>页<input type='button' name='goButton' class='goButton' value='确定'>");

$(".goButton").click(function(){
var goNum = $(".goNum").val();
if(goNum!=""){
window.location.href = actionName + "&pageNo="+goNum;
}
});
};

相关文章

  • JavaScript获取URL参数的方法分享

    JavaScript获取URL参数的方法分享

    这篇文章主要介绍了JavaScript获取URL参数的方法分享,主要包括字符串 split 方法、 URLSearchParams 方法、正则匹配方法等,具有一定的参考价值需要的小伙伴可以参考一下
    2022-04-04
  • JavaScript中String对象的方法介绍

    JavaScript中String对象的方法介绍

    本文主要对JavaScript中String对象的方法进行介绍。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 浅谈Javascript中的函数、this以及原型

    浅谈Javascript中的函数、this以及原型

    下面小编就为大家带来一篇浅谈Javascript中的函数、this以及原型。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 微信小程序云开发如何实现数据库自动备份实现

    微信小程序云开发如何实现数据库自动备份实现

    这篇文章主要介绍了小程序云开发 数据库自动备份实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • javascript实现全角与半角字符的转换

    javascript实现全角与半角字符的转换

    这篇文章主要介绍了javascript实现全角与半角字符的转换的相关代码与知识点分享,需要的朋友可以参考下
    2015-01-01
  • 原生JavaScript实现连连看游戏(附源码)

    原生JavaScript实现连连看游戏(附源码)

    原生JavaScript版连连看游戏,有源码,适合初学者学习,喜欢的朋友可以研究下
    2013-11-11
  • ES6基础之字符串和函数的拓展详解

    ES6基础之字符串和函数的拓展详解

    这篇文章主要介绍了ES6基础之字符串和函数的拓展,结合实例形式分析了ES6字符串与函数扩展的相关操作技巧与注意事项,需要的朋友可以参考下
    2019-08-08
  • js常用代码段收集

    js常用代码段收集

    以下是平时收集的几个常用代码段,大多数是从网上搜集而来。也均为未找到是谁谁原创,是否允许转载等要求, 所以如果看到的朋友发现其中有些代码是自己写的,还请原谅在下转帖出来。
    2011-10-10
  • 简单谈谈原生js的math对象

    简单谈谈原生js的math对象

    下面小编就为大家带来一篇简单谈谈原生js的math对象。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • JavaScript获得选中文本内容的方法

    JavaScript获得选中文本内容的方法

    今天希望实现一个,直接在网页上选中文本,点击收藏夹的链接(javascript)即可弹出新窗口(类似“百度搜藏”和“QQ书签”),新窗口中的文本框即显示了选中的文本。
    2008-12-12

最新评论