<!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. Scrapinghub执行spider抓取并显示图片

    序 最近在学习Scrapy的时候发现一个很有意思的网站,可以托管Spider,也可以设置定时抓取的任务,相当方便.于是研究了一下,把其中比较有意思的功能分享一下: 抓取图片并显示在item里: 下面来 ...

  2. javascript统计输入文本的简易方法

    计算文本框的输入字符数的简易方法: ]; var tValue = text.value; num = Math.ceil(getLength(tValue)/); //正则:用于区分中文为两个字节 ...

  3. sqlserver 2000新建sysadmin角色

    新建登录:sp_addlogin 'netcafe','pubwin'  netcafe是用户名,pubwin是密码,下面是msdn官方格式: sp_addlogin [ @loginame = ] ...

  4. information_schema.partitions 学习

    1.partitions 表中的常用列说明: 1.table_schema:表所在的数据库名 2.table_name:表名 3.partition_method:表分区采用的分区方法 4.parti ...

  5. MySQL--mysqldump的权限说明

    mysqldump 所需要的权限说明: 1.对于table 来说mysqldump 最少要有select 权限. 2.对于view 来说mysqldump 要有show view 权限. 3.对于tr ...

  6. 24c16读写驱动程序

    //////////////////////////////////////////////////////////////// //24c16读写驱动程序 // //模块调用: //读数据:read ...

  7. 基于epoll的聊天室程序

    epoll相对于poll和select这两个多路复用的I/O模型更加的高效.epoll的函数很简单,麻烦的地方在于水平触发和边沿触发. 用张图来说明下 ET(边沿)只是在状态反转时触发,比如从不可读到 ...

  8. css案例学习之div ul li a 实现导航效果

    效果 代码 <html> <head> <title>无需表格的菜单</title> <style> body{ background-co ...

  9. RTP 包格式 详细解析

    H.264 视频 RTP 负载格式 1. 网络抽象层单元类型 (NALU) NALU 头由一个字节组成, 它的语法如下: +---------------+      |0|1|2|3|4|5|6|7 ...

  10. 多个ORACLE HOME的情况，默认的ORACLE HOME是哪个，以及如何更改HOME

    如果系统里安装了多个ORACLE产品,那么在注册表里,有可能也会有多个ORACLE HOME,在不设置系统环境变量的情况下,默认情况使用哪个ORACLE HOME? HKEY_LOCAL_MACHIN ...