jQuery静态分页功能
分页功能在做项目的过程中是常常用到的，下面是我常用的一款分页效果：
1、分页的CSS样式(page.css)
#setpage {
margin: 15px auto;
text-align: center;
}
#setpage a:link,#setpage a:visited,#setpage a:hover,#setpage .current,#setpage #info{
border:1px solid #DDD;
background:#0d6cbf;
display:inline-block;
margin:1px;
text-decoration:none;
text-align:center;
color:#fff;
padding: 5px 10px;
font-size: 16px;
border-radius: 5px;
}
#setpage a:hover{
border:1px solid #0d6cbf;
background: #0d6cbf;
}
#setpage .current{
border:1px solid #0d6cbf;
background: #fff;
margin:1px;
color: #000;
text-decoration: underline;
}
#setpage #info{
width:auto;
}
2、分页的js代码(page.js)
var totalpage,pagesize,cpage,count,curcount,outstr;
//初始化
cpage = 1; //当前页（设置为全局变量）
totalpage = 56; //总页数
pagesize = 10; //每页显示的数据数量
outstr = ""; //显示分页效果 function gotopage(target)
{
cpage = target; //把页面计数定位到第几页 //这里写页面跳转时要调用的方法
var state = $("#state").find("option:selected").val();
getData(state,cpage ); //setpage();
//reloadpage(target); //调用显示页面函数显示第几页,这个功能是用在页面内容用ajax载入的情况
} function setpage()
{
if(totalpage<=10){ //总页数小于十页
for (count=1;count<=totalpage;count++)
{ if(count!=cpage)
{
outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>";
}else{
outstr = outstr + "<span class='current' >"+count+"</span>";
}
}
}
if(totalpage>10){ //总页数大于十页
if(parseInt((cpage-1)/10) == 0)
{
for (count=1;count<=10;count++)
{ if(count!=cpage)
{
outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>";
}else{
outstr = outstr + "<span class='current'>"+count+"</span>";
}
}
outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'> 下一组 </a>";
}
else if(parseInt((cpage-1)/10) == parseInt(totalpage/10))
{
outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+(parseInt((cpage-1)/10)*10)+")'>上一组</a>";
for (count=parseInt(totalpage/10)*10+1;count<=totalpage;count++)
{ if(count!=cpage)
{
outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>";
}else{
outstr = outstr + "<span class='current'>"+count+"</span>";
}
}
}
else
{
outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+(parseInt((cpage-1)/10)*10)+")'>上一组</a>";
for (count=parseInt((cpage-1)/10)*10+1;count<=parseInt((cpage-1)/10)*10+10;count++)
{
if(count!=cpage)
{
outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>";
}else{
outstr = outstr + "<span class='current'>"+count+"</span>";
}
}
outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'> 下一组 </a>";
}
}
document.getElementById("setpage").innerHTML = "<div id='setpage'><span id='info'>共 "+totalpage+" 页 | 第 "+cpage+" 页</span>" + outstr + "</div>";
outstr = "";
}
3、完整的html源码(page.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>js静态分页</title>
<script type="text/javascript" src="http://iyitong.qiniudn.com/jquery-1.11.1.min.js"></script>
<!-- 引入分页js -->
<script src="http://7tszs6.com1.z0.glb.clouddn.com/page.js"></script> <style>
#setpage { margin: 15px auto; text-align: center; }
#setpage a:link,#setpage a:visited,#setpage a:hover,#setpage .current,#setpage #info{
border:1px solid #DDD;
background:#0d6cbf;
display:inline-block;
margin:1px;
text-decoration:none;
text-align:center;
color:#fff;
padding: 5px 10px;
font-size: 16px;
border-radius: 5px;
}
#setpage a:hover { border:1px solid #0d6cbf; background: #0d6cbf; }
#setpage .current {
border:1px solid #0d6cbf;
background: #fff;
margin:1px; color: #000;
text-decoration: underline;
}
#setpage #info { width:auto; }
</style> <script>
$(function(){
//静态页面时直接调用setpage()方法即可
setpage();
// 如果需要通过ajax动态加载json数据，通过以下方式调用
// pageIndex，分页参数,初始值为1
// function getData(pageIndex){
// var url = ""; //请求数据的接口
// $.getJSON(url,{
// // 这里写需要传递的参数
// pageIndex:pageIndex
// },function(result){
// // 在这里调用分页函数
// // size：表示返回的数据总数量
// var size = result.data.size;
// var pagesize = 50;//每页显示数据数量
// var totalpage=Math.floor((size-1)/pagesize)+1;//总页数
// setpage();//调用分页
// });
// }
});
</script>
</head>
<body>
<!-- 这里是显示分页的元素 -->
<div id="setpage"></div> </body>
</html>
4、最终的效果图：
大家有更好的方法，请多多分享交流！
长路漫漫，只因学无止境...
转发请注明文章出处：http://www.cnblogs.com/iyitong/p/4220824.html 谢谢
jQuery静态分页功能的更多相关文章
- jquery实现分页功能
RT,不是很难,但是感觉代码一点都不简洁,就是多加点判断,直接上代码了. HTML部分: <div class = "container-fluid"> <div ...
- 【jQuery 分页】jQuery分页功能的实现
自写的jQuery实现分页功能的分页组件: 功能效果如下: 分页组件就是上图中的三部分, 分别放在表格上部 和下部 . 其中, 1>>>页面的代码如下: product.jsp 其 ...
- jPList – 实现灵活排序和分页功能的 jQuery 插件
jPList 是一个灵活的 jQuery 插件,可以用于任何 HTML 结构的排序,分页和筛选.它支持的数据源包括:PHP + MySQL,ASP.NET + SQL Server,PHP + SQL ...
- jQuery实现的简单分页功能的详细解析
分页功能在项目开发中不可或缺,老司机操作起来就和呼吸一样简单,新手恐怕就会吃力一些. 今天我回顾了一下具体的操作步骤,决定详细的分析一下每一步的实现目的及原理. 我们会创建一个简单的json文件来模拟 ...
- Jquery、Ajax实现新闻列表页分页功能
前端页面官网的开发,离不开新闻列表,新闻列表一般都会有分页的功能,下面是我自己总结加查找网上资料写的一个分页的功能,记录一下. 首先,官网的开发建立在前后端分离的基础上: 再有,后端小伙伴们提供列表页 ...
- jq分页插件，支持动态，静态分页的插件，简单易用。
工作中经常要用到分页功能.为了方便封装了一个比较通用的分页插件开源出来了,简单易用. 官网:https://cwlch.github.io/Ch_Paging 下载地址:https://github. ...
- SpringMVC -jquery实现分页
效果图: 关键类的代码: package:utils: SpringUtil.java 通过jdbcTemplate连接oracle数据库 package com.utils; import org. ...
- aspnetpager+repeater+oracle实现分页功能
一.设计原理阐述 数据查询分页,这个功能相信大家都很熟悉,通过数据库或其它数据源进行查询操作后,将获得的数据显示到界面上,但是由于数据量太大,不能一次性完全的显示出来,就有了数据分页的需求.这个需求在 ...
- 基于SSM框架的简易的分页功能——包含maven项目的搭建
新人第一次发帖,有什么不对的地方请多多指教~~ 分页这个功能经常会被使用到,我之前学习的时候找了很多资源,可都看不懂(笨死算了),最后还是在朋友帮助下做出了这个分页.我现在把我所能想到的知识 做了一个 ...
随机推荐
- Vue nodejs商城项目-搭建express框架环境
1.express-project 搭建express框架环境 安装express generator生成器 通过生成器自动创建项目 配置分析 安装 cnpm i -g express-generat ...
- 前端JavaScript之DOM节点操作
1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...
- Linux 中将用户添加到指定组的指令
将一个已有用户 testuser 增加到一个已有用户组 root 中,使此用户组成为该用户的附加用户组,可以使用带 -a 参数的 usermod 指令.-a 代表 append, 也就是将用户添加到 ...
- 在jdbc基础上进阶一小步的C3p0 连接池(DBCP 不能读xml配置文件,已淘汰) 和DBUtils 中两个主要类QueryRunner和ResultSetHandler的使用
首先看C3p0这个连接池,最大优势可以自动读取默认的配置文件 <?xml version="1.0" encoding="UTF-8"?> < ...
- go get超时解决办法
go get gopkg.in/yaml.v2超时,发现被墙了,解决办法如下: 1.安装golang.org/x/net $ mkdir -p $GOPATH/src/golang.org/x/ $ ...
- windows和linux上mysql的安装
mysql基于多平台,多版本的安装 mysql.tar.gz 链接:https://pan.baidu.com/s/1lG9BNL1mG4qbjM8xLHtrjQ 密码:s4tk MySQL 是一个 ...
- java-反射和代理
1.类的编译和运行简易过程: java的源码文件(也称为编译单元,以.java为后缀的文件) ↓ 文件内最多只能有一个public修饰的类,否则编译器报错:某个类被public修饰,该类名必需与文件名 ...
- TFS 2015服务端安装与客户端签入项目步骤
一.参考如下3篇文章搭建TFS2015环境 1.参考文章如下: TFS 2015(Visual Studio Team Foundation Server)的下载和安装http://www.cnblo ...
- MySQL数据库 : 自关联,视图,事物,索引
自关联查询(自身id关联自身id(主键),查询的时候可以逻辑分为两个表,然后分别起一个别名来区分) select * from areas as cityinner join areas as pro ...
- 深入理解yii2之RBAC(模块化系统)
一.前言 上一篇文章我们已经大致谈过RBAC到底是什么和yii2底层RBAC接口的分析. 下面我深入理解一下RBAC权限分配,深入理解下yii2底层RBAC扩展,以及它是如何针对模块化系统的开发的? ...