jQuery simplePage+AJAX plus分页插件用法实例


Posted in Javascript onFebruary 17, 2016

本文实例讲述了jQuery simplePage+AJAX plus分页插件。分享给大家供大家参考,具体如下:

<!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>simplePage</title>
<style type="text/css">
html,body{ margin:0 auto; text-align:center; }
.main{ font:12px/24px "Microsoft YaHei"; height:1000px; }
#page{ margin:100px auto; width:960px; text-align:center; }
#page a{ text-decoration:none; display:inline-block; height:24px; padding:0 8px; border-radius:3px; background-color:#DEF39E; color:#8CAC2C; text-align:center; margin:0 2px; }
#page a:hover,#page .now{ background-color:#8CAC2C; color:#fff; transition:all .5s ease 0s; }
</style>
</head>
<body>
<div class="main">
  <div id="page">
    <!-- 
    <a href="#3">上一页</a>
    <a href="#4">4</a>
    <a href="#5">5</a>
    <a href="#6" class="now">6</a>
    <a href="#7">7</a>
    <a href="#8">8</a>
    <a href="#9">下一页</a>
     -->
  </div>
  <div class="back"></div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
  $.simplePage({
    obj : "#page",
    nowNum : 1,
    allNum : 20,
    callBack : function(now, all){
      $(".back").html(now + "-" + all);
    }
  });
});
/*!
 * jQuery simple page plus v1.0
 * http://t.qq.com/websole 
 * Author:sole
 * Mail:macore@163.com
 * Created:2012/10/31
 * Copyright 2012 - http://t.qq.com/websole 
*/
$.extend({
  //obj:分页对象; noeNum:当前页; allNum:总页数; callBack:回调函数
  simplePage : function(opt){
    if(!opt.obj){ return false; };
    var obj = $(opt.obj); 
    var nowNum = opt.nowNum || 1; 
    var allNum = opt.allNum || 5; 
    var callBack = opt.callBack || function(){};
    var apd_ele = "";
    function ele(num, cls){
      var str = "";
      if(cls){
        str = "<a href='#"+num+"' class='"+cls+"'>"+num+"</a>";
      }else{
        str = "<a href='#"+num+"'>"+num+"</a>";
      }
      return str;
    }
    if(nowNum > 1){
      apd_ele = "<a href='#"+ ( nowNum - 1 ) +"'>上一页</a>";
      obj.append(apd_ele);
    }
    if(allNum <= 5){
      for(var i=1; i<=allNum; i++){
        if(nowNum == i){
          apd_ele = ele(i, "now");
        }else{
          apd_ele = ele(i);
        }
        obj.append(apd_ele);
      }
    }else{
      for(var i=1; i<=5; i++){
        if(nowNum == 1 || nowNum == 2){
          if(nowNum == i){
            apd_ele = ele(i, "now");
          }else{
            apd_ele = ele(i);
          }
        }else if( (allNum - nowNum) == 0 || (allNum - nowNum) == 1 ){
          if( (allNum - nowNum) == 0 && i == 5){
            apd_ele = ele( (allNum - 5 + i), "now");
          }else if( (allNum - nowNum) == 1 && i == 4){
            apd_ele = ele( (allNum - 5 + i), "now");
          }else{
            apd_ele = ele( allNum - 5 + i );
          }
        }else{
          if(i == 3){
            apd_ele = ele(nowNum-3+i, "now");
          }else{
            apd_ele = ele(nowNum-3+i);
          }
        }
        obj.append(apd_ele);
      }
    }
    if((allNum - nowNum) >= 1){
      apd_ele = "<a href='#"+ ( nowNum + 1 ) +"'>下一页</a>";
      obj.append(apd_ele);
    }
    callBack(nowNum, allNum);
    obj.find("a").click(function(){
      var nowNum = parseInt($(this).attr("href").substring(1));
      obj.html("");
      $.simplePage({
        obj : "#page",
        nowNum : nowNum,
        allNum : allNum,
        callBack :callBack
      });
      return false;
    });
  }
});
</script>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
Jan 09 Javascript
js中将字符串转换成json的三种方式
Jan 12 Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
解析js原生方法创建表格效率测试
Jul 08 Javascript
JavaScript中的变量定义与储存介绍
Dec 31 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 Javascript
jQuery插件实现无缝滚动特效
Nov 24 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 Javascript
vue-cli中使用高德地图的方法示例
Mar 28 Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
JavaScript实现淘宝商品图切换效果
Apr 29 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 #Javascript
纯JavaScript代码实现文本比较工具
Feb 17 #Javascript
JavaScript实现身份证验证代码
Feb 17 #Javascript
AngularJS 最常用的功能汇总
Feb 17 #Javascript
AngularJS身份验证的方法
Feb 17 #Javascript
基于AngularJS+HTML+Groovy实现登录功能
Feb 17 #Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 #Javascript
You might like
php取出数组单个值的方法
2018/03/12 PHP
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
JavaScript OOP面向对象介绍
2010/12/02 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
Jquery实现仿京东商城省市联动菜单
2015/11/19 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
小程序自动化测试的示例代码
2020/08/11 Javascript
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
python操作xml文件详细介绍
2014/06/09 Python
python日志记录模块实例及改进
2017/02/12 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
python计算列表内各元素的个数实例
2018/06/29 Python
python http基本验证方法
2018/12/26 Python
分析经典Python开发工程师面试题
2019/04/08 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
python读取excel进行遍历/xlrd模块操作
2020/07/12 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
酒店人事专员岗位职责
2013/12/19 职场文书
建筑设计学生的自我评价
2014/01/16 职场文书
法律六进活动方案
2014/03/13 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python
Redis基本数据类型Zset有序集合常用操作
2022/06/01 Redis
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技