通过jq实现分页的原理如下：将所有条数加载到页面中，根据每页放特定条数（例如 5 条）获取jquery对象索引，使部分条数显示，其他条数隐藏。

前提：引入jquery.js

代码

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

            list-style: none;

        }

        .wrapper{

            width: 800px;

            margin: 50px auto;

        }

        /*清除浮动*/

        .wrapper::after{

            content: "";

            display: block;

            clear: both;

        }

        ul li{

            width: 100%;

            height: 30px;

            text-align: center;

            line-height: 30px;

            float: left;

            background: #ccc;

            margin: 10px 0px;

        }

        a{

            cursor: pointer;

            border:1px solid black;

        }

        .btn{

            float: right;

        }

    </style>

    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function(){

            /*添加100条数据（模仿后台传入）*/

            for(var i = 1; i<101;i++){

                $("#content").append("<li>"+i+"</li>");

            }

            /*设置每页显示的条数*/

            $every_page = 5;

            $items = $("ul li");

            $total_all = $items.length;//总条数

            $page_num = Math.round($total_all/$every_page)//向上取整（2.5 ==> 3）

            $("#total_page").text($page_num);

            //初始化页面，只显示前5条。

            $("ul li:gt("+($every_page-1)+")").each(function(){

                $(this).hide();

            })

            //点击下一条按钮函数。

            $("#next_page").click(function(){

                $current_page = ($("#current_page").text());//获取当前页码

                if($current_page <$page_num){

                    $("#current_page").text(++$current_page);

                    $.each($("ul li"),function(index,item){

                        //获取下一页显示的开始索引。

                        var start = ($("#current_page").text()-1)*$every_page;

                        if(index>=start&& index<start+$every_page){

                            $(this).show();

                        }else{

                            $(this).hide();

                        }

                    })

                }else{

                    return false;

                }

            })

            $("#pre_page").click(function(){

                $current_page = ($("#current_page").text());

                if($current_page > 1){

                    $("#current_page").text(--$current_page);

                    $.each($("ul li"),function(index,item){

                        var start = ($("#current_page").text()-1)*$every_page;

                        if(index>=start&& index<start+$every_page){

                            $(this).show();

                        }else{

                            $(this).hide();

                        }

                    })

                }else{

                    return false;

                }

            })

        })

    </script>

</head>

<body>

    <div class="wrapper">

        <div class="items">

            <ul id= "content">

            </ul>

        </div>

        <span class="btn">

            <a id = "pre_page">上一页</a>

            <span>

                <span id = "current_page">1</span>

                <span>/</span>

                <span id = "total_page"></span>

            </span>

            <a id = "next_page">下一页</a>

        </span>

    </div>

</body>

</html>

运行结果

jquery实现分页效果的更多相关文章

  1. 使用Jquery做分页效果

    之前写过一个PHP 的分页效果,但是今天小伙伴和我说了一个不适用后台单纯用前段的JS来写分页,整理了一下,代码如下: html: <div id="containet"> ...

  2. jQuery伪分页效果

    如图,我们首先分析在一个页面存放4条内容,其余的超出隐藏(因为这里没有后台数据,所以我们把内容‘写死’),然后就是下面两个按钮(这里我们不用button,因为button有自带的提交功能),然后我们可 ...

  3. SpringMVC -jquery实现分页

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

  4. jquery动态分页

    最近一直研究jquery的分页效果,刚刚弄好了一个,拿出来与大家分享.分页效果与时光网的差不多. 网址:http://www.mtime.com/movie/news/all/ 先在aspx页面放置一 ...

  5. JS实现分页效果

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

  6. 分享5种风格的 jQuery 分页效果【附代码】

    jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示      源码下载 各个 ...

  7. 5种风格的 jQuery 分页效果【附代码】

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

  8. 基于jquery 的分页插件，前端实现假分页效果

    上次分享了一款jquery插件,现在依旧分享这个插件,不过上一次分享主要是用于regular框件,且每一页数据都是从后端获取过来的,这一次的分享主要是讲一次性获取完数据 然后手动进行分页.此需求基本上 ...

  9. 使用jQuery Pagination Plugin实现分页效果

    最近使用分页这个基础效果较为频繁,而项目前端页面使用的是纯静态的HTML,自己之前写的JSP中的分页就用不成了:项目中也引入了Bootstrap,本来想使用Bootstrap中的分页样式,但发现其样式 ...

随机推荐

  1. UVALive - 5695 The Last Puzzle (思维+区间dp)

    题目链接 题目大意:有n个按钮排成一条直线,你的任务是通过左右移动按下所有按钮,按钮如果一段时间没有被按下就会被弹开. 以下是我的推论(不一定正确): 直观地看的话,如果选择的是最优路径,那么路径的形 ...

  2. 浮点数的存储、类型转换知识点（面宝P34）

    以float a=1.0f为例: (int)a实际上是以浮点数a为参数构造了一个整型数,该整数的值是1: (int&)a则是告诉编译器将a当作整数看(并没有做任何实质上的转换),即读a的内存时 ...

  3. PIXI屏幕自适应以及强制横屏

    canvas屏幕适配可以用css样式自适应, 可以设置transform旋转角度和transfrom-origin:center以中心点旋转位置以及宽高width和height来实现对canvas的适 ...

  4. Attention机制中权重的计算

    Attention mechanism中,给输入序列中对应的每一个Ht分配权重(打分)究竟是如何打分? 输入序列打分,a(s, h) 其中s是输出序列的t-1时刻的隐藏层状态,h是输入的多个状态,

  5. DevOps之Pipeline集成junit、jacoco、SonarQube(二)

    一.准备工作 1.准备一个持续集成的代码工程 工程下载地址: Github地址为:https://github.com/zbbkeepgoing/springboot-demo 2.springboo ...

  6. 自定义 Swiper 的pageControl

    .part5-bg .swiper2 .swiper-pagination2{ bottom: 0.4rem; } /*未选中的小圆点样式*/ .part5-bg .swiper2 .swiper-p ...

  7. 计算机网络（三），TCP报文段详解

    目录 1.TCP(Transmission Control Protocol传输控制协议)作用 2.TCP报文段详解 三.TCP报文段详解 1.TCP(Transmission Control Pro ...

  8. Hexo + github pages + 阿里云绑定域名搭建个人博客

    申请域名 万网购买的域名,地址:https://wanwang.aliyun.com/domain/com?spm=5176.8142029.388261.137.LoKzy7 控制台进行解析 控制台 ...

  9. Android 属性动画监听事件与一个菜单的例子

    简单监听事件 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 3 ...

  10. Spring配置文件beans标签报错问题解决

    因为有很多配置是复制过来的,附带的很多注释的格式会导致报错,所以可以要试试把注释去掉,只有配置文件的话可能就不会报错了.