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 复制对象与Object.assign方法无法实现深复制

    JavaScript 复制对象与Object.assign方法无法实现深复制

    这篇文章主要介绍了JavaScript 复制对象与Object.assign方法无法实现深复制,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 如何使用 JavaScript 操作浏览器历史记录 API

    如何使用 JavaScript 操作浏览器历史记录 API

    这篇文章主要介绍了如何使用 JavaScript 操作浏览器历史记录 API,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下
    2020-11-11
  • js实现的简洁网页滑动tab菜单效果代码

    js实现的简洁网页滑动tab菜单效果代码

    这篇文章主要介绍了js实现的简洁网页滑动tab菜单效果代码,可实现简单的鼠标滑过tab标签切换的功能,非常简单实用,需要的朋友可以参考下
    2015-08-08
  • uniapp封装小程序雷达图组件的完整代码

    uniapp封装小程序雷达图组件的完整代码

    组件是一个单独且可复用的功能模块的封装,每个组件,包括如下几个部分:以组件名称为标记的开始标签和结束标签、组件内容、组件属性、组件属性值,这篇文章主要给大家介绍了关于uniapp封装小程序雷达图组件的相关资料,需要的朋友可以参考下
    2021-07-07
  • easyui-datagrid特殊字符不能显示的处理方法

    easyui-datagrid特殊字符不能显示的处理方法

    下面小编就为大家带来一篇easyui-datagrid特殊字符不能显示的处理方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • javascript限制文本框只允许输入数字(曾经与现在的方法对比)

    javascript限制文本框只允许输入数字(曾经与现在的方法对比)

    很多时候需要用到限制文本框的数字输入,试过许多方法,都不太理想,遂决定自己实现一个来玩玩,接下来介绍曾经使用过的方法与自定义方法的对比,感兴趣的朋友可以了解下啊
    2013-01-01
  • 使用JS读取XML文件的方法

    使用JS读取XML文件的方法

    由于项目上需要解析xml,于是各种百度,然后自己总结了下各个主流浏览器解析xml的方法,下面通过本文给大家详细介绍下使用JS读取XML文件的方法,一起看看吧
    2016-11-11
  • 用POSTMAN发送JSON格式的POST请求示例

    用POSTMAN发送JSON格式的POST请求示例

    这篇文章主要介绍了用POSTMAN发送JSON格式的POST请求示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 一文带你搞懂JS中六种For循环的使用

    一文带你搞懂JS中六种For循环的使用

    for 循环是出现最早,也是应用最普遍的一个遍历,能够满足绝大多数的遍历。可以遍历 数组、对象、字符串。本文将详细为大家介绍JS中的六种For循环的使用,需要的可以参考一下
    2022-04-04
  • javascript五图轮播切换实用版

    javascript五图轮播切换实用版

    今天发表一个自己刚学js的练习,javascript五图轮播切换---实用版,这个实力有个缺陷就是没有过渡效果,这个本人也还在研究中,也希望高手可以指点一下
    2012-08-08

最新评论