分页功能在做项目的过程中是常常用到的，下面是我常用的一款分页效果：

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'>共&nbsp;"+totalpage+"&nbsp;页&nbsp;|&nbsp;第&nbsp;"+cpage+"&nbsp;页</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静态分页功能的更多相关文章

  1. jquery实现分页功能

    RT,不是很难,但是感觉代码一点都不简洁,就是多加点判断,直接上代码了. HTML部分: <div class = "container-fluid"> <div ...

  2. 【jQuery 分页】jQuery分页功能的实现

    自写的jQuery实现分页功能的分页组件: 功能效果如下: 分页组件就是上图中的三部分, 分别放在表格上部  和下部 . 其中, 1>>>页面的代码如下: product.jsp 其 ...

  3. jPList – 实现灵活排序和分页功能的 jQuery 插件

    jPList 是一个灵活的 jQuery 插件,可以用于任何 HTML 结构的排序,分页和筛选.它支持的数据源包括:PHP + MySQL,ASP.NET + SQL Server,PHP + SQL ...

  4. jQuery实现的简单分页功能的详细解析

    分页功能在项目开发中不可或缺,老司机操作起来就和呼吸一样简单,新手恐怕就会吃力一些. 今天我回顾了一下具体的操作步骤,决定详细的分析一下每一步的实现目的及原理. 我们会创建一个简单的json文件来模拟 ...

  5. Jquery、Ajax实现新闻列表页分页功能

    前端页面官网的开发,离不开新闻列表,新闻列表一般都会有分页的功能,下面是我自己总结加查找网上资料写的一个分页的功能,记录一下. 首先,官网的开发建立在前后端分离的基础上: 再有,后端小伙伴们提供列表页 ...

  6. jq分页插件，支持动态，静态分页的插件，简单易用。

    工作中经常要用到分页功能.为了方便封装了一个比较通用的分页插件开源出来了,简单易用. 官网:https://cwlch.github.io/Ch_Paging 下载地址:https://github. ...

  7. SpringMVC -jquery实现分页

    效果图: 关键类的代码: package:utils: SpringUtil.java 通过jdbcTemplate连接oracle数据库 package com.utils; import org. ...

  8. aspnetpager+repeater+oracle实现分页功能

    一.设计原理阐述 数据查询分页,这个功能相信大家都很熟悉,通过数据库或其它数据源进行查询操作后,将获得的数据显示到界面上,但是由于数据量太大,不能一次性完全的显示出来,就有了数据分页的需求.这个需求在 ...

  9. 基于SSM框架的简易的分页功能——包含maven项目的搭建

    新人第一次发帖,有什么不对的地方请多多指教~~ 分页这个功能经常会被使用到,我之前学习的时候找了很多资源,可都看不懂(笨死算了),最后还是在朋友帮助下做出了这个分页.我现在把我所能想到的知识 做了一个 ...

随机推荐

  1. 旧文备份:rtlinux安装手册

    前段时间接触了几天RTLinux,折腾了好几天才总算把它安装上,得益于Prof. Chang-Gun Lee的安装建议,觉得该文档可能会对准备尝试安装RTLinux的朋友们有帮助,本人英语很烂,也比较 ...

  2. python模块之正则

    re模块 可以读懂你写的正则表达式 根据你写的表达式去执行任务 用re去操作正则 正则表达式 使用一些规则来检测一些字符串是否符合个人要求,从一段字符串中找到符合要求的内容.在线测试网站:http:/ ...

  3. Centos下使用Docker部署MySql

    本文讲述 CentOS 系统 Docker 中安装 MySql 的过程 步骤 1. 拉取 Docker Hub 官方提供的mysql镜像 docker pull mysql:5.7 2.运行容器 do ...

  4. Session的生命同期

    一.什么是Session,怎么用 Session是存放用户与web服务器之间的会话,即服务器为浏览器开辟的存储空间. 由于浏览器与服务器之间的会话是无状态(无状态的意思是会话之间无关联性,无法识别该用 ...

  5. 协议 - OSI七层网络协议模型

    摘自:https://www.cnblogs.com/oneplace/p/5611094.html 互联网协议 本文全文转载阮一峰老师的两篇文章,自己做了一些添加内容 参考:互联网协议入门(一) 互 ...

  6. 生产者消费者-Java代码实现

    import java.util.LinkedList; class Storage{ private static final int MAX = 100; LinkedList<Object ...

  7. tcl之string操作-length/index/range/replace

  8. yii2 url 美化参数

    所谓的url参数美化就是将冗长的字符串 进行正则替换 yii2 框架的url参数美化完成需要完成两个阶段 第一个阶段分apache和nginx 两种的配置 apache :1.1 必须开启rewrit ...

  9. （洛谷）P2709 小B的询问

    题目描述 小B有一个序列,包含N个1~K之间的整数.他一共有M个询问,每个询问给定一个区间[L..R],求Sigma(c(i)^2)的值,其中i的值从1到K,其中c(i)表示数字i在[L..R]中的重 ...

  10. jdk1.8源码学习笔记

    前言: 前一段时间开始学习了一些基本的数据结构和算法,算是弥补了这方面的知识短板,但是仅仅是对一些算法的了解,目前工作当中也并没有应用到这些,因此希望通过结合实际例子来学习,巩固之前学到的内容,思前想 ...