效果图:

自写的jQuery实现分页功能的分页组件:

金沙城中心赌场 1

功能效果如下:

图(1) 初始图

金沙城中心赌场 2

金沙城中心赌场 3

 

图(2) 点击后

分页组件就是上图中的三部分, 分别放在表格上部  和下部 。

代码如下:

其中,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery+CSS3文章点赞功能代码</title>
<style type="text/css">
body{
 margin:0;
 padding:0;
}
.text-content{
 min-width:1180px;
 border-bottom: 1px solid #e7e7e7;
 border-top: 1px solid #e7e7e7;
 background: #f4f4f4;
}
.text-content h1{
 text-align:center;
 font-size: 20px;
 padding-top: 50px;
 color: #EB4F38;
}
.text-content p{
 padding: 10px 100px 40px 100px;
 clear: both;
 color: #333;
 display: block;
 font-family: "Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif;
 font-size: 16px;
 line-height: 1.6;
 margin: 0 auto;
 outline: medium none;
 position: relative;
 width: 900px;
 word-wrap: break-word;
}
.praise{
 width:40px;
 height:40px;
 margin: 50px auto;
 cursor: pointer;
 font-size: 12px;
 text-align:center;
 position: relative;
}
#praise{
 display:block;
 width:40px;
 height:40px;
 margin:0 auto;
}
#praise-txt{
 height:25px;
 line-height:25px;
 display: block;
}
.praise img{
 width:40px;
 height:40px;
 display:block;
 margin: 0 auto;
}
.praise img.animation{
 animation: myfirst 0.5s;
 -moz-animation: myfirst 0.5s;  
 -webkit-animation: myfirst 0.5s;  
 -o-animation: myfirst 0.5s;  
}
#add-num{
 display:none;
}
#add-num .add-animation{
 color: #000;
 position:absolute;
 top:-15px;
 left: 10px;
 font-size: 15px;
 opacity: 0;
 filter: Alpha(opacity=0);
 -moz-opacity:0;
 animation: mypraise 0.5s ;
 -moz-animation: mypraise 0.5s ;  
 -webkit-animation: mypraise 0.5s ;  
 -o-animation: mypraise 0.5s ;  
 font-style:normal;
}
.praise .hover , #add-num .add-animation.hover , #praise-txt.hover{
 color: #EB4F38;
}
@keyframes myfirst
{
 0%{
  width:40px;
  height:40px;
 }
 50%{
  width:50px;
  height:50px;
 }
 100% {
  width:40px;
  height:40px;
 }
}
@-moz-keyframes myfirst 
{
 0%{
  width:40px;
  height:40px;
 }
 50%{
  width:50px;
  height:50px;
 }
 100% {
  width:40px;
  height:40px;
 }
}
@-webkit-keyframes myfirst 
{
 0%{
  width:40px;
  height:40px;
 }
 50%{
  width:50px;
  height:50px;
 }
 100% {
  width:40px;
  height:40px;
 }
}
@-o-keyframes myfirst 
{
 0%{
  width:40px;
  height:40px;
 }
 50%{
  width:50px;
  height:50px;
 }
 100% {
  width:40px;
  height:40px;
 }
}
@keyframes mypraise
{
 0%{
  top:-15px;
  opacity: 0;
  filter: Alpha(opacity=0);
  -moz-opacity:0;
 }
 25%{
  top:-20px;
  opacity: 0.5;
  filter: Alpha(opacity=50);
  -moz-opacity:0.5;
 }
 50%{
  top:-25px;
  opacity: 1;
  filter: Alpha(opacity=100);
  -moz-opacity:1;
 }
 75%{
  top:-30px;
  opacity: 0.5;
  filter: Alpha(opacity=50);
  -moz-opacity:0.5;
 }
 100% {
  top:-35px;
  opacity: 0;
  filter: Alpha(opacity=0);
  -moz-opacity:0;
 }
}
@-moz-keyframes mypraise 
{
 0%{
  top:-15px;
  opacity: 0;
  filter: Alpha(opacity=0);
  -moz-opacity:0;
 }
 25%{
  top:-20px;
  opacity: 0.5;
  filter: Alpha(opacity=50);
  -moz-opacity:0.5;
 }
 50%{
  top:-25px;
  opacity: 1;
  filter: Alpha(opacity=100);
  -moz-opacity:1;
 }
 75%{
  top:-30px;
  opacity: 0.5;
  filter: Alpha(opacity=50);
  -moz-opacity:0.5;
 }
 100% {
  top:-35px;
  opacity: 0;
  filter: Alpha(opacity=0);
  -moz-opacity:0;
 }
}
@-webkit-keyframes mypraise 
{
 0%{
  top:-15px;
  opacity: 0;
  filter: Alpha(opacity=0);
  -moz-opacity:0;
 }
 25%{
  top:-20px;
  opacity: 0.5;
  filter: Alpha(opacity=50);
  -moz-opacity:0.5;
 }
 50%{
  top:-25px;
  opacity: 1;
  filter: Alpha(opacity=100);
  -moz-opacity:1;
 }
 75%{
  top:-30px;
  opacity: 0.5;
  filter: Alpha(opacity=50);
  -moz-opacity:0.5;
 }
 100% {
  top:-35px;
  opacity: 0;
  filter: Alpha(opacity=0);
  -moz-opacity:0;
 }
}
@-o-keyframes mypraise 
{
 0%{
  top:-15px;
  opacity: 0;
  filter: Alpha(opacity=0);
  -moz-opacity:0;
 }
 25%{
  top:-20px;
  opacity: 0.5;
  filter: Alpha(opacity=50);
  -moz-opacity:0.5;
 }
 50%{
  top:-25px;
  opacity: 1;
  filter: Alpha(opacity=100);
  -moz-opacity:1;
 }
 75%{
  top:-30px;
  opacity: 0.5;
  filter: Alpha(opacity=50);
  -moz-opacity:0.5;
 }
 100% {
  top:-35px;
  opacity: 0;
  filter: Alpha(opacity=0);
  -moz-opacity:0;
 }
}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<!--动态点赞开始-->
<div class="praise">

    <img src="http://cdn.attach.qdfuns.com/notes/pics/201612/07/111158kzuumusztigszgsu.png" id="praise-img" />

  145
  <em>+1</em>
</div>
<!--动态点赞结束-->
<script>
  /* @author:Romey
   * 动态点赞
   * 此效果包含css3,部分浏览器不兼容(如:IE10以下的版本)
  */
  $(function(){
    $("#praise").click(function(){
      var praise_img = $("#praise-img");
      var text_box = $("#add-num");
      var praise_txt = $("#praise-txt");
      var num=parseInt(praise_txt.text());
      if(praise_img.attr("src") == ("http://cdn.attach.qdfuns.com/notes/pics/201612/07/111158g2kg4s2gk9hm4fd4.png")){
        $(this).html("<img src='http://cdn.attach.qdfuns.com/notes/pics/201612/07/111158kzuumusztigszgsu.png' id='praise-img' class='animation' />");
praise_txt.removeClass("hover");
        text_box.show().html("<em class='add-animation'>-1</em>");
        $(".add-animation").removeClass("hover");
        num -=1;
        praise_txt.text(num)
      }else{
        $(this).html("<img src='http://cdn.attach.qdfuns.com/notes/pics/201612/07/111158g2kg4s2gk9hm4fd4.png' id='praise-img' class='animation' />");
        praise_txt.addClass("hover");
        text_box.show().html("<em class='add-animation'>+1</em>");
        $(".add-animation").addClass("hover");
        num +=1;
        praise_txt.text(num)
      }
    });
  })
</script>
</body>
</html>

1》》》页面的代码如下:

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

product.jsp

您可能感兴趣的文章:

  • jquery心形点赞关注效果的简单实现
  • jQuery+ajax实现实用的点赞插件代码
  • jQuery实现简单的点赞效果
  • php+jQuery+Ajax实现点赞效果的方法(附源码下载)
  • jQuery+ajax实现文章点赞功能的方法
  • jQuery实现的超简单点赞效果实例分析
  • jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
  • jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
  • jQuery简单实现QQ空间点赞已经取消点赞
  • jquery点赞功能实现代码
    点个赞吧!

其中引用bootstrap.css  和bootstrap .js是必须的

金沙城中心赌场 4金沙城中心赌场 5

  1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8" contentType="text/html; charset=UTF-8"%>
  2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  3 
  4 
  5 <%
  6 String path = request.getContextPath();
  7 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  8 %>
  9 <!DOCTYPE HTML>
 10 <html>
 11 <head>
 12 <meta charset="utf-8">
 13 <meta name="renderer" content="webkit|ie-comp|ie-stand">
 14 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 15 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
 16 <meta http-equiv="Cache-Control" content="no-siteapp" />
 17 
 18 <link href="../css/H-ui.min.css" rel="stylesheet" type="text/css" />
 19 <link href="../css/H-ui.admin.css" rel="stylesheet" type="text/css" />
 20 <link href="../css/style.css" rel="stylesheet" type="text/css" />
 21 <link href="../lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" />
 22 <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
 23 
 24 <title>产品列表</title>
 25 <style type="text/css" >
 26     .pageInfo{
 27      display: inline;
 28     }
 29 </style>
 30 </head>
 31 <body>
 32 
 33 <nav class="breadcrumb" style="padding: 0px 1px 20px 0px;margin-bottom: 0px;"><i class="Hui-iconfont">&#xe67f;</i> 首页 &gt; 基因信息管理 &gt; 产品列表 <a class="btn btn-success radius r mr-20" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
 34 
 35 <div class="pd-20">
 36   <div class="text-c"> 
 37     <select class="select" id="" name="" style="width:250px">
 38       <option value="0">产品</option>
 39       <option value="AccountInfo">基因型</option>
 40       <option value="AdminInfo">关键字</option>
 41     </select>
 42     <button name="" id="" class="btn btn-success" type="submit"><i class="Hui-iconfont">&#xe665;</i> 查询</button>
 43   </div>
 44 </div>
 45     <div class="cl pd-5 bg-1 bk-gray mt-20"> 
 46         <a href="javascript:;"  class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a> 
 47         <a class="btn btn-primary radius"  href="javascript:;"><i class="Hui-iconfont">&#xe600;</i> 添加产品</a> 
 48     </div>
 49     
 50     
 51     <!-- 分页 + table  从这里开始     由于样式采用bootstrap,所以class样式尽量使用一致的 -->
 52     <div class="container">
 53         <!-- 分页的第一部分    开始 -->
 54         <div class="row" style="margin: 20px 0px 5px 10px;">
 55             <label class="pageInfo">每页显示 </label> 
 56             <select class="form-control pageInfo" style="width: 20%">
 57                 <option>5</option>
 58                 <option selected="selected">10</option>
 59                 <option>20</option>
 60                 <option>50</option>
 61                 <option>100</option>
 62             </select> 
 63             <label class="pageInfo">条</label> 
 64         </div>
 65         <!-- 分页的第一部分    结束 -->
 66         <!-- table部分 开始 -->
 67         <div class="row"><!-- 采用样式row 分成一层  一层   -->
 68             <table class="table table-hover table-bordered table-bg">
 69                 <thead>
 70                     <tr class="text-c">
 71                         <th width="25"><input type="checkbox"  id="ch1">全选</th>  
 72                         <th width="80">产品名称</th>
 73                         <th width="280">操作</th>
 74                     </tr>
 75                 </thead>
 76                 <tbody>
 77                 </tbody>
 78             </table>
 79         </div>
 80         <!-- table 部分结束 -->
 81         <!-- 分页  第二部分 开始 -->
 82         <div class="row">
 83             <!-- 第二部分左边部分开始 -->
 84             <div class="pageInfo pull-left" style="position: relative;top: 32px; font-family: Times New Roman;">当前显示第<label class="startInfo"></label>条到第<label class="endInfo"></label> 条,总共<label class="totalInfo"></label>条</div>
 85             <!-- 第二部分右边部分 开始 -->
 86             <div class="pageInfo pull-right">
 87                 <nav >
 88                     <ul class="pagination">
 89                         <li>
 90                           <a href="#" aria-label="Previous" style="display: none">
 91                             &laquo;
 92                           </a>
 93                         </li>
 94                         <li class="active"><a href="#">1</a></li>
 95                         <li>
 96                           <a href="#" aria-label="Next">
 97                             &raquo;
 98                           </a>
 99                         </li>
100                      </ul>
101                 </nav>
102             </div>
103         </div>
104         <!-- 分页第二部分 结束 -->
105     </div>
106 
107 <script type="text/javascript" src="../lib/jquery/1.9.1/jquery.min.js"></script> 
108 <script type="text/javascript" src="../lib/layer/1.9.3/layer.js"></script> 
109 <script type="text/javascript" src="../lib/My97DatePicker/WdatePicker.js"></script> 
110 <script type="text/javascript" src="../js/bootstrap.min.js"></script> 
111 <script type="text/javascript" src="../lib/datatables/1.10.0/jquery.dataTables.min.js"></script> 
112 <script type="text/javascript" src="../js/H-ui.js"></script> 
113 <script type="text/javascript" src="../js/H-ui.admin.js"></script>
114 <script type="text/javascript" src="../js/pageSet.js"></script>
115 <script type="text/javascript" src="../js/geneinfo/product/product.js"></script>
116 </body>
117 </html>

View Code

 

2》》》分页组件的js文件

pageSet.js

金沙城中心赌场 6金沙城中心赌场 7

  1 var page = {}; // 定义分页类
  2 (// 这里用大括号将整个的类 包括【本类的属性定义】【本类的方法】 整体括起来,是让本类在页面加载的时候就运行
  3 
  4 // tt这个类的字段定义
  5 function() {
  6     page.bindData;
  7     page = function page(url, bindData) {
  8         this.pageNo = 1; // 当前页 初始值为1
  9         this.pageSize = 10; // 当前页显示多少条
 10         this.startInfo = 1; // 开始条数
 11         this.endInfo = 10; // 结束条数
 12         this.totalPage = 0; // 总页数
 13         this.totalInfo = 0; // 总条数
 14         this.tempLi = "<li><a href='#'></a></li>"; // 用于添加页码处使用
 15         this.url = url; // 用于不同页面的请求地址
 16         this.result = null; // 用于可能仅需要正文数据时使用
 17         this.bindData = bindData;
 18         this.init();
 19         return this;
 20     }
 21 
 22     // 根据初始化的参数 bindData()绑定参数的方法 page初始化的对象 来请求后台,传回 新的page信息
 23     page.prototype.pageSet = function() {
 24         $.post(page.url, {
 25             "pageNo" : page.pageNo,
 26             "pageSize" : page.pageSize
 27         }, function(data) {
 28             result = null;
 29             data = eval("(" + data + ")");
 30             if (data != null && data != "" && data != undefined) {
 31                 page.pageNo = data.pageNum == 0 ? 1 : data.pageNum;
 32                 page.pageSize = data.pageSize == 0 ? page.pageSize : data.pageSize;
 33                 page.startInfo = data.pageNum == 0 ? 0 : (page.pageNo - 1) * page.pageSize + 1;
 34                 page.endInfo = page.startInfo + page.pageSize - 1;
 35                 page.endInfo = page.endInfo >= data.total ? data.total : page.endInfo;
 36                 page.totalPage = data.pages;
 37                 page.totalInfo = data.total;
 38                 page.result = data.list;
 39             }
 40             // 执行绑定参数的方法
 41             bindData();
 42             // 如果总页数 <=1 隐藏下一页
 43             if (page.totalPage <= 1) {
 44                 $("a[aria-label='Next']").hide();
 45             }
 46         });
 47     }
 48 
 49     // 设置分页组件的 一些信息 eq:总共多少条 显示第几条~第几条 动态显示页码
 50     page.prototype.setValue = function() {
 51         $("label.startInfo").text(page.startInfo); // 为此三个元素赋值
 52         $("label.endInfo").text(page.endInfo);
 53         $("label.totalInfo").text(page.totalInfo);
 54         var temp = "";
 55         if (page.totalPage != 0) { // 首先保证总页数不是0页
 56             $(".pagination li").removeClass("active"); // 移除掉之前的 当前页面 页码按钮的
 57                                                         // 选中状态
 58             if (page.totalPage <= 5
 59                     && $(".pagination li").length != page.totalPage + 2) {             // 【初始化总页数小于5页的情况】此处规定下面显示的页数就是5页 如果总页数<5则全部显示》》》$(".pagination li").length !=page.totalPage + 2保证不会重复叠加
 60                 for (var i = 0; i < page.totalPage - 1; i++) {                          // 总页数<5,则全部添加
 61                     temp += $(page.tempLi).find("a").text(i + 2).parent().prop("outerHTML");                                              // 为tempLi变量中的a标签添加页码数 然后找到a标签的父层
 62                                                                                      // 此时的它是Object类型,需要通过prop("outerHTML")这个属性,获取到HTML代码,这样才能用于追加进页面 【 原生JS DOM里有一个内置属性outerHTML】
 63                 }
 64                 page.cleanUp();
 65                 $(".pagination li").eq(1).after(temp);                                  // 并将动态生成的页码按钮的HTML代码
 66                                                                                      // 添加到li的第二个之后
 67                                                                                        // 【这里是eq(1)第二个是因为(上一页)这个按钮虽然属性设为隐藏,但是依旧存在;而默认的还有一个第一页这个页码是存在的。所以是两个li,所以是eq(1)】
 68             } else {                                                                  // 否则,是总页数>5的
 69                 var absCon = Math.abs($(".pagination li").eq(3).text()- page.pageNo); // 先获取eq(3)也就是 中间位置的页码-当前页
 70                                                                                         // 【点击中间页码 靠后的页码按钮的情况】如果当前页>中间位置的页码数 && 中间位置的.length !=0 &&
 71                                                                                         // (除了最后一个页码li之外的的最后一个li的文本)也就是倒数第二个的文本!=总页数 【这里的判断条件就是
 72                                                                                         // 如果点击的是中间位置靠后的页码 eq:12345中的4或者5的话】 条件成立
 73                 if (page.pageNo > $(".pagination li").eq(3).text()
 74                         && $(".pagination li").eq(3).length != 0
 75                         && $(".pagination li:not(:last):last").text() != page.totalPage) {
 76                     absCon = page.totalPage - page.pageNo >= absCon ? absCon
 77                             : page.totalPage - page.pageNo; // 【当前页就是即将要显示的页码】如果
 78                                                             // 总页数-当前页>absCon
 79                                                             // 那么就给absCon原本的值,否则就将总页数-当前页的值赋值给absCon
 80                     for (var i = 0; i < absCon; i++) { // 此处absCon的作用:
 81                                                         // 点击中间位置靠后的页码数,可能即将显示的当前页
 82                                                         // 是最后一页了,那就不再添加新的页码出来了【eq:总共9页,即将显示的是第9页,那9这个页码之后就不再新增加页码了】
 83                         // 然后将新增加的页码添加在最后一个li【此处的最后一个li是下一页按钮】之前
 84                         // ;要添加的内容就是新生成的li的HTML文本 【eval($(".pagination
 85                         // li").eq($(".pagination li").length - 2).text())+1
 86                         // 这里使用eval()将其中的内容括起来是为了获取到的值直接和1相加】
 87                         $(".pagination li").last().before(
 88                                 $(page.tempLi).find("a").text(
 89                                         eval($(".pagination li").eq(
 90                                                 $(".pagination li").length - 2)
 91                                                 .text()) + 1).parent().prop(
 92                                         "outerHTML"));
 93                         $(".pagination li").eq(1).remove(); // 并且在循环中始终删除eq(1)也就是前一页按钮之后的第一个页码
 94                     }
 95                 } else { // 【初始化 页数大于5页的情况】如果 当前页面上的li【包括上一页,下一页总共7个页码按钮】!=7个
 96                             // && 当前页面上的li个数 !=总页数+2 【此处的总页数是后台返回的总页数】
 97                     if ($(".pagination li").length != 7
 98                             && $(".pagination li").length != page.totalPage + 2) {
 99                         for (var i = 0; i < 4; i++) {
100                             temp += $(page.tempLi).find("a").text(i + 2)
101                                     .parent().prop("outerHTML");
102                         }
103                         $(".pagination li").eq(1).after(temp.toString());
104                         // 【点击 中间页码靠前页码的情况】如果当前页<中间位置的页码 && 上一页按钮之后的页码按钮>=2
105                         // 【即点击的中间页码按钮靠前的页码按钮】
106                     } else if (page.pageNo < $(".pagination li").eq(3).text()
107                             && $(".pagination li").eq(1).text() >= 2) {
108                         absCon = page.pageNo - 1 > absCon ? absCon
109                                 : page.pageNo - 1;
110                         for (var i = 0; i < absCon; i++) {
111                             $(".pagination li").first().after(
112                                     $(page.tempLi).find("a").text(
113                                             eval($(".pagination li").eq(1)
114                                                     .text()) - 1).parent()
115                                             .prop("outerHTML"));
116                             $(".pagination li").eq(
117                                     $(".pagination li").length - 2).remove(); // 靠后的页码按钮
118                                                                                 // 【此处-2是将上一页
119                                                                                 // 下一页两个按钮去掉】
120                         }
121                     }
122 
123                 }
124             }
125             
126             //删除或者新增信息的时候,页码可能动态变化
127             if($(".pagination li:not(:last):last").text() > page.totalPage) {
128                 $(".pagination li:not(:last):last").remove();
129                 if(page.pageNo == page.totalPage) {
130                     $("a[aria-label='Next']").hide();
131                 }
132                 if($(".pagination li:not(:first):first").text() > 1) {
133                     $(".pagination li:first").after($(page.tempLi).find("a").text(parseInt($(".pagination li:not(:first):first").text()) - 1).parent().prop("outerHTML"));
134                 }
135             }
136             
137             //上一页 下一页  的隐藏与显示
138             if($(".pagination li:not(:last):last").text() > page.pageNo) {
139                 $("a[aria-label='Next']").show();
140             } else {
141                 $("a[aria-label='Next']").hide();
142             }
143             
144             if($(".pagination li:not(:first):first").text() < page.pageNo) {
145                 $("a[aria-label='Previous']").show();
146             } else {
147                 $("a[aria-label='Previous']").hide();
148             }
149 
150             $(".pagination li:contains(" + page.pageNo + ")")
151                     .addClass("active"); // 为 新的 当前页 页码按钮 添加 active选中状态
152         }
153     }
154 
155     // 初始化方法 页码的点击事件 上下页点击事件 每页显示多少条的 改变事件
156     page.prototype.init = function() {
157         $("a[aria-label='Previous']").click(function() {
158             $("a[aria-label='Next']").show();
159             if (page.pageNo == 2) {
160                 $("a[aria-label='Previous']").hide();
161             } else {
162                 $("a[aria-label='Previous']").show();
163             }
164             if (page.pageNo == 1) {
165                 return;
166             }
167             page.pageNo--;
168             page.pageSet(bindData, page);
169         });
170 
171         // 绑定 下一页 的点击事件
172         $("a[aria-label='Next']").click(function() {
173             $("a[aria-label='Previous']").show();
174             if (page.pageNo == page.totalPage - 1) {
175                 $("a[aria-label='Next']").hide();
176             } else {
177                 $("a[aria-label='Next']").show();
178             }
179             page.pageNo++;
180             page.pageSet(bindData, page);
181         });
182 
183         // 上面的.click()绑定点击事件 和 下面的 $(document).on("click",".pagination
184         // li:gt(0):not(:last)",function(){});的区别在于:
185         // .click只能为页面现有的元素绑定点击事件,如果是动态生成的新的元素,是没有事件的
186         // 而$(document).on("click","指定的元素",function(){});方法则是将指定的事件绑定在document上,而新产生的元素如果符合指定的元素,那就触发此事件
187 
188         // 为动态生成的 页码按钮 添加 点击事件
189         $(document).on("click", ".pagination li:gt(0):not(:last)", function() {
190             page.pageNo = $(this).text();
191             $("a[aria-label='Previous']").show();
192             $("a[aria-label='Next']").show();
193             if (page.pageNo == "1") {
194                 $("a[aria-label='Previous']").hide();
195             }
196             if (page.pageNo == page.totalPage) {
197                 $("a[aria-label='Next']").hide();
198             }
199 
200             page.pageSet(bindData, page);
201         });
202 
203         // 为select 选择每页显示多少条 添加改变时间 【但是这不使用change而是使用input 是因为change对IE浏览器不支持】
204         $(".pageInfo").on(
205                 "input",
206                 function() {
207                     page.pageSize = $(this).val();
208                     page.pageNo = 1;
209                     $("a[aria-label='Previous']").hide();
210                     $(".pagination li:not(:first):not(:last)").remove();
211                     // $(".pagination li:not(:first), .pagination
212                     // li:not(:last)").remove();
213                     $(".pagination li:first").after(
214                             "<li class='active'><a href='#'>1</a></li>");
215                     page.pageSet(bindData, page);
216                 });
217 
218     }
219 
220     /**
221      * 清除页码部分,回到初始化状态
222      */
223     page.prototype.cleanUp = function() {
224         $("a[aria-label='Previous']").hide();
225         $("a[aria-label='Next']").show();
226         $(".pagination li:gt(0):not(:last)").remove();
227         $(".pagination li:eq(0)").after("<li><a href='#'>1</a></li>");
228     }
229 
230 })();

View Code

 

3》》》本页面的js中  需要提供数据的封装功能
bindDate()方法,【并且注意,任何页面发生变化的地方都需要调用分页的page.pageSet();方法,例如数据的增加,数据的删除,还有page对象初始化,页面初始化的时候就是这几个地方需要调用】

    3.1》》》product.js中的page对象初始化也就是在页面初始化的时候+删除操作的时候

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图