通过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. 在Nginx中使用Godaddy的SSL证书

    首先在Godaddy付款购买SSL证书,成功之后打开管理面板,找到刚购买的SSL证书,点击新建证书,这个时候Godaddy会让提供CSR文件内容,可以通过下面的命令行生成csr内容: openssl ...

  2. orm中的聚合函数，分组，F/Q查询，字段类，事务

    目录 一.聚合函数 1. 基础语法 2. Max Min Sum Avg Count用法 (1) Max()/Min() (2)Avg() (3)Count() (4)聚合函数联用 二.分组查询 1. ...

  3. Python 正则表达式Ⅴ

    正则表达式实例 字符匹配 字符类 特殊https://www.xuanhe.net/字符类

  4. 20.包含min函数的栈（python）

    题目描述 定义栈的数据结构,请在该类型中实现一个能够得到栈中所含最小元素的min函数(时间复杂度应为O(1)). # -*- coding:utf-8 -*- class Solution: def ...

  5. Redis常见面试问题及答案

    大量key在同一时间过期,注意什么? 如果过期时间过于集中,会导致Redis可能会出现短暂的卡顿现象.严重的话会出现缓存雪崩,一般需要在时间上加一个随机值, 使用过期时间分散一些. Redis分布式锁 ...

  6. OpenCV笔记（4）(直方图、傅里叶变换、高低通滤波)

    一.直方图 用于统计图片中各像素值: # 画一个图像各通道的直方图 def draw_hist(img): color = ('b', 'g', 'r') for i, col in enumerat ...

  7. shiro之缓存

    1 细说shiro之七:缓存:https://www.cnblogs.com/nuccch/p/8044226.html 2 Shiro缓存使用Redis.Ehcache.自带的MpCache实现的三 ...

  8. GooFlow

    目前的下载网址:基于JQUERY的WEB在线流程图设计器GOOFLOW 0.7版

  9. BZOJ 1212: [HNOI2004]L语言 trie

    长度小于 10 是关键信息~ #include <cstdio> #include <cstring> #include <algorithm> #define N ...

  10. 51 Nod 1161 Partial sums

    1161 Partial Sums  题目来源: CodeForces 基准时间限制:2 秒 空间限制:131072 KB 分值: 80 难度:5级算法题  收藏  取消关注 给出一个数组A,经过一次 ...