通过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. mysql innodb存储引擎 锁 事务

    以下内容翻译自mysql5.6官方手册. InnoDB是一种通用存储引擎,可平衡高可靠性和高性能.在MySQL 5.6中,InnoDB是默认的MySQL存储引擎.除非已经配置了不同的默认存​​储引擎, ...

  2. React native 在mac下安裝 环境

    前言 春节回来上班第一天,配了mac ,然后在去年就有要弄mac 配置RN教程,好勒一上午,其中有遇到一些问题,都解决 了 当然你可以看官网的步骤啦 https://reactnative.cn/do ...

  3. Rest_Framework简介

    Web应用模式 在开发Web应用中,有两种应用模式:前后端不分离和前后端分离 前后端不分离 前后端不分离通俗来讲就是不区分前端和后端,浏览器请求时服务器直接返回页面,其示意图如下 前后端分离 前后端分 ...

  4. Struts2-Action接受参数方式、method属性使用及通配符的配置

    一.Action接受参数的方式 1.属性方式接收 首先编写一个用于上传参数的页面 <%@ page contentType="text/html;charset=UTF-8" ...

  5. 23.git简单使用

    git:我主要是为了收集命令,学习请去看廖雪峰的博客,内容很详细 git客户端下载: Git是GitHub开源社区的版本管理系统: 下载地址:https://git-scm.com/download/ ...

  6. Linux 开启相关端口及查看已开启端口

    防火墙层面:   /sbin/iptables -I INPUT -p tcp --dport 8011 -j ACCEPT #开启8011端口  /etc/rc.d/init.d/iptables ...

  7. Centos 下硬盘分区的最佳方案

    Centos7从零开始]Centos 下硬盘分区的最佳方案 2016年12月25日 10:09:02 浮華的滄桑 阅读数 41971   在对硬盘进行分区前,应该先弄清楚计算机担负的工作及硬盘的容量有 ...

  8. windows如何正确下载补丁包

    今天公司让给windows安装补丁,打开链接,我蒙蔽了,这么多包要下载哪个腻?下面来跟杨老师一起学习一下如何确定windows版本,下载正确的补丁包. 首先先看一下下载补丁的页面,懵~~ 登录你需要安 ...

  9. tomcat 散点杂记

    tomcat有很多细碎的知识点和一些坑点,我将再次记录 域名直指项目 我们经常访问项目都要带上项目目录 eg: http://xwiki.test.com/xwiki or http://jenkin ...

  10. Android学习_7/23

    1.        在活动中使用Menu 1)        什么是Menu? 2)        怎么实现? step1:res目录下创建Menu resource file,使用<item… ...