<!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. Android网络连接的两种方法：apache client和httpurlconnection的比较

    另见http://blog.csdn.net/mingli198611/article/details/8766585 在官方blog中,android工程师谈到了如何去选择apache client ...

  2. 论docker中 CMD 与 ENTRYPOINT 的区别

    Dockerfile里有 CMD 与 ENTRYPOINT 两个功能咋看起来很相似的指令,开始的时候觉得两个互用没什么所谓,但其实并非如此: CMD指令: The main purpose of a ...

  3. PHP 中 AJAX 中文乱码解决

    最近,在用PHP做一个AJAX功能时,出现了中文乱码.在网上搜索了一上,很多是有说不过试过都不行,我页面的的编码是UTF-8的,MYSQL中也是UTF-8的.以前在.NET中也遇到这样的问题,但只是在 ...

  4. 【转】Tomcat集群Cluster实现原理剖析

    此文章来源:http://zyycaesar.iteye.com/blog/296606 此文章作者:zyycaesar 对于WEB应用集群的技术实现而言,最大的难点就是如何能在集群中的多个节点之间保 ...

  5. PHP结合Linux的cron命令实现定时任务

    PHP死循环 来处理定时任务的效率是很低的.(众多网友评价)大家都建议使用Linux内置的定时任务crontab命令来调用php脚本来实现. PHP定时任务的两种方法:1.web方式调用php网页,但 ...

  6. linq分组查询

    string[] arrStr = { ".com", "www.baidu.com", "www.qq.com", "www.b ...

  7. A Distributed Multichannel MAC Protocol for Multihop Cognitive Radio Networks

    2010 这个呢,就是time slotted的DSA网络MAC层协议. 跟上一篇单纯的Multi Channel实现类似,不过这里是CR网络,因为多了嗅探等操作. 简单的说,time slotted ...

  8. Linux下安装Perl和Perl的DBI模块

    今天在虚拟机测试shell脚本的时候,有些命令使用不了. 比如说 mysqlhotcopy ,它提示Perl的版本太低. 我用的 RedHat9 的Perl才5.8.0版本...(2002年以前的) ...

  9. js Array数组的使用

    js Array数组的使用   Array是javascript中的一个事先定义好的对象(也可以称作一个类),可以直接使用 创建Array对象 var array=new Array(): 创建指定元 ...

  10. Arcgis api For silverlight 加载QQ地图

    原文 http://www.cnblogs.com/thinkaspx/archive/2012/11/07/2759079.html //本篇博客仅在技术上探讨可行性   //如果要使用Q 地图,请 ...