<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
<title>jQuery分页</title>
<style type="text/css" rel="stylesheet">
.page{
    display:none;
}
    #pagnation a{
        padding-right:5px;
    }
    .current {
        color:blue;
    }
    #pagnation{
        margin-top:20px;
        }
    .numlink,#prev,#next
    {
     margin: 0px !important; border-top-left-radius: 0px !important; border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; border-bottom-left-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; color: rgb(128, 128, 128) !important; background-image: none !important;">#F5F5F5;
    border: 1px solid #EBEBEB;
    color: #0072BC;
    font-weight: normal;
    margin-left: 10px;
    padding: 2px 7px;
    text-decoration: none;
    width: 22px;;
    }
    .current
    {
      margin: 0px !important; border-top-left-radius: 0px !important; border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; border-bottom-left-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; color: rgb(128, 128, 128) !important; background-image: none !important;">#DDEEFF;
    border: 1px solid #BBDDFF;
    color: #0072BC;
    cursor: default;
    margin-left: 10px;
    padding: 2px 7px;
    text-decoration: none; 
    }
    </style>
</head>
  
<body>
<div id="content">
<div class="page">
这里是第一段内容
</div>
<div class="page">
这里是第二段内容
</div>
<div class="page">
第三段内容</div>
<div class="page">
第四段内容
</div>
<div id="pagnation">
</div>
</div>
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery1.3.2.js"></script>
<script type="text/javascript">
    var _Pages = $('.page');
    var _Nav = $('#pagnation');
    function createLinks(){
        _Nav.append('<a href="#" id="prev">Prev</a>');
        for(var i=0;i<$('.page').length;i++){
            _Nav.append('<a href="#" class="numlink">'+(i+1)+'</a>');
        }
        _Nav.append('<a href="#" id="next">Next</a>');
    }
    function process(now,_Prev,_Next){
        $('.page:eq('+now+')').css('display','block');
        $('.numlink:eq('+now+')').addClass('current');
        var total = parseInt($('.page').length - 1);
        if(now == 0){
            _Prev.hide();
            _Next.show();
        }
        else if(now == total){
            _Prev.show();
            _Next.hide();
        }
        else {
            _Prev.show();
            _Next.show();
        }
    }
    function hideAll(){
        _Pages.css('display','none');
        $('.numlink').removeClass('current');
    }
    $(document).ready(function(){
        //set the first one display none
        $('.page:eq(0)').css('display','block');
        createLinks();
        $('.numlink:eq(0)').addClass('current');
        var _Next = $('#next');
        var _Prev = $('#prev');
        var _Link = $('.numlink');
        _Prev.hide();
        var now =  parseInt($('.numlink').index($('.current')));
        _Next.click(function(){
             hideAll();
             process(now+1,_Prev,_Next);
             now = parseInt($('.numlink').index($('.current')));
        });
        _Prev.click(function(){
            hideAll();
            process(now-1,_Prev,_Next);
            now = parseInt($('.numlink').index($('.current')));
        })
        _Link.click(function(){
            var that = $(this);
            hideAll();
            var which = that.index() - 1;
            process(which,_Prev,_Next);
            now = parseInt($('.numlink').index($('.current')));
        })
    })
</script>
</body>
</html>
</iframe></noscript></object></layer></span></div></table>
</body>
</html>

js分页代码的更多相关文章

  1. angular.js分页代码的实例

    对于大多数web应用来说显示项目列表是一种很常见的任务.通常情况下,我们的数据会比较多,无法很好地显示在单个页面中.在这种情况下,我们需要把数据以页的方式来展示,同时带有转到上一页和下一页的功能.现在 ...

  2. 纯js分页代码(简洁实用)

    纯js写的分页代码. 复制代码代码如下: //每页显示字数 PageSize=5000; //分页模式 flag=2;//1:根据字数自动分页 2:根据[NextPage]分页 //默认页 start ...

  3. Angular.js分页代码

                $scope.reloadList=function(){                             $scope.findPage( $scope.pagina ...

  4. 非常不错的一个JS分页效果代码

    这里分享一个不错的js分页代码. 代码中cpage是页面计数,应为全局变量,可以随处调用它: totalpage是总页数. 与asp分页代码很类似,也是先取得记录总数,然后实现分页,基本的分页思路与原 ...

  5. 自己封装的JS分页功能[用于搭配后台使用]

    * 2016.7.03 修复bug,优化代码逻辑 * 2016.5.25 修复如果找不到目标对象的错误抛出. * 2016.5.11 修复当实际页数(pageNumber)小于生成的页码间隔数时的bu ...

  6. jsp、js分页功能的简单总结

    一.概述 首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要.分 ...

  7. 面向对象版js分页

    基于前一个js分页,我将代码改成一个面向对象版的js分页,代码如下 http://peng666.github.io/blogs/pageobj <!DOCTYPE html> <h ...

  8. 浅谈js分页的几种方法

    一个项目中必然会遇到分页这种需求的,分页可以使数据加载更合理,也让页面显示更美观,更有层次感!那么js分页到底如何实现呢?下面我就来讲一下三种循序渐进的方法 1.自己纯手写分页 更深入的去理解分页的意 ...

  9. JAVAEE——BOS物流项目05：OCUpload、POI、pinyin4J、重构分页代码、分区添加、combobox

    1 学习计划 1.实现区域导入功能 n OCUpload一键上传插件使用 n 将文件上传到Action n POI简介 n 使用POI解析Excel文件 n 完成数据库操作 n 使用pinyin4J生 ...

随机推荐

  1. sql每五秒插入一条数据 一次插入N条数据

    1建立数据表 create table projectManage ( ID int identity primary key not null, projectName )not null, man ...

  2. wordpress教程之如何修改与制作wordpress的作者页面

    一.如何使用与创建作者页面 一般情况下,多数主题下都有author.php这个文件,这既是作者展示页面.如果发现自己正在使用的主题中没有author.php这个文件的话, Wordpress 会默认寻 ...

  3. js区分移动设备与PC

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 十一、外观(Facade)模式--结构模式(Structural Pattern)

    外部与一个子系统的通信必须通过一个统一的门面(Facade)对象进行,这就是门面模式.门面模式要求一个子系统的外部与其内部的通信必须通过一个统一的门面(Facade)对象进行. 门面模式提供一个高层次 ...

  5. XmlDocument，XDocument相互转换

    XmlDocument,XDocument相互转换 using System; using System.Xml; using System.Xml.Linq; namespace MyTest { ...

  6. mvc和三层架构到底有什么区别

    原文地址:http://zhidao.baidu.com/question/82001542.html?qbl=relate_question_3&word=MVC%20%CA%FD%BE%D ...

  7. 基于 Bootstrap 的扁平化 UI 开发包

    Flat UI是一款基于Bootstrap的扁平化前端UI工具包,Flat UI的组件外观设计非常清新和漂亮,Flat UI的组件包含按钮,输入框,组合按钮,复选框,单选按钮,标签,菜单,进度条和滑块 ...

  8. Google map v3 using simple tool file google.map.util.js v 1.0

    /** * GOOGLE地图开发使用工具 * @author BOONYACHENGDU@GMAIL.COM * @date 2013-08-23 * @notice 地图容器的(div)z-inde ...

  9. C++ Primer 有感（异常处理）

    1.异常是通过抛出对象而引发的.该对象的类型决定应该激活哪个处理代码.被选中的处理代码是调用链中与该对象类型匹配且离抛出异常位置最近的那个. 2.执行throw的时候,不会执行跟在throw后面的语句 ...

  10. Hive的UDF实现及注意事项

    Hive自身查询语言HQL能完毕大部分的功能,但遇到特殊需求时,须要自己写UDF实现.下面是一个完整的案例. 1.eclipse中编写UDF ①项目中增加hive的lib下的全部jar包和Hadoop ...