JavaScript
搜索
分类

简单的分页代码js实现

作者：Senssic 时间：2024-04-25 13:10:29　

先看看效果图：

简单的分页代码js实现

简单的分页js代码:
1、效果描述： 
不用分页即可显示的jQuery插件 
jQuery分页插件——jQuery.page.js用法很简单，效果很棒  
2、调用方法：  


$(".tcdPageCode").createPage({
 pageCount:10,
 current:1,
 backFn:function(p){
  //单击回调方法，p是当前页码
 }
});
pageCount：总页数
current：当前页

3、js封装代码


//分页插件
/**
ch
**/
(function($){
var ms = {
 init:function(obj,args){
  return (function(){
   ms.fillHtml(obj,args);
   ms.bindEvent(obj,args);
  })();
 },
 //填充html
 fillHtml:function(obj,args){
  return (function(){
   obj.empty();
   //上一页
   if(args.current > 1){
    obj.append('<a href="javascript:;" class="prevPage">上一页</a>');
   }else{
    obj.remove('.prevPage');
    obj.append('<span class="disabled">上一页</span>');
   }
   //中间页码
   if(args.current != 1 && args.current >= 4 && args.pageCount != 4){
    obj.append('<a href="javascript:;" class="tcdNumber">'+1+'</a>');
   }
   if(args.current-2 > 2 && args.current <= args.pageCount && args.pageCount > 5){
    obj.append('<span>...</span>');
   }
   var start = args.current -2,end = args.current+2;
   if((start > 1 && args.current < 4)||args.current == 1){
    end++;
   }
   if(args.current > args.pageCount-4 && args.current >= args.pageCount){
    start--;
   }
   for (;start <= end; start++) {
    if(start <= args.pageCount && start >= 1){
     if(start != args.current){
      obj.append('<a href="javascript:;" class="tcdNumber">'+ start +'</a>');
     }else{
      obj.append('<span class="current">'+ start +'</span>');
     }
    }
   }
   if(args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){
    obj.append('<span>...</span>');
   }
   if(args.current != args.pageCount && args.current < args.pageCount -2 && args.pageCount != 4){
    obj.append('<a href="javascript:;" class="tcdNumber">'+args.pageCount+'</a>');
   }
   //下一页
   if(args.current < args.pageCount){
    obj.append('<a href="javascript:;" class="nextPage">下一页</a>');
   }else{
    obj.remove('.nextPage');
    obj.append('<span class="disabled">下一页</span>');
   }
  })();
 },
 //绑定事件
 bindEvent:function(obj,args){
  return (function(){
   obj.on("click","a.tcdNumber",function(){
    var current = parseInt($(this).text());
    ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount});
    if(typeof(args.backFn)=="function"){
     args.backFn(current);
    }
   });
   //上一页
   obj.on("click","a.prevPage",function(){
    var current = parseInt(obj.children("span.current").text());
    ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount});
    if(typeof(args.backFn)=="function"){
     args.backFn(current-1);
    }
   });
   //下一页
   obj.on("click","a.nextPage",function(){
    var current = parseInt(obj.children("span.current").text());
    ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount});
    if(typeof(args.backFn)=="function"){
     args.backFn(current+1);
    }
   });
  })();
 }
}
$.fn.createPage = function(options){
 var args = $.extend({
  pageCount : 10,
  current : 1,
  backFn : function(){}
 },options);
 ms.init(this,args);
}
})(jQuery);

4、使用demo:


<!DOCTYPE html>
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>一个非常简单的jQuery分页插件</title>
<style>
*{ margin:0; padding:0; list-style:none;}
a{ text-decoration:none;}
a:hover{ text-decoration:none;}
.tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;}
.tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px; line-height: 25px; padding: 0 10px;border: 1px solid #ddd; margin: 0 2px;border-radius: 4px;vertical-align: middle;}
.tcdPageCode a:hover{text-decoration: none;border: 1px solid #428bca;}
.tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #428bca; border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;}
.tcdPageCode span.disabled{ display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px; color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;}
</style>
</head>
<body>
<style>
.baidu_ads{ width:960px; height:90px; position:absolute; left:50％; bottom:0; margin-left:-480px; overflow:hidden;}
</style>
<div class="baidu_ads">
</div>

<span style="display:none;">
</span><!-- 代码部分begin -->
<div class="tcdPageCode">
</div>
<pre>
调用方法：
$(".tcdPageCode").createPage({
 pageCount:10,
 current:1,
 backFn:function(p){
  //单击回调方法，p是当前页码
 }
});
pageCount：总页数
current：当前页
</pre>
</body>
<script src="https://www.aspxhome.com/ajaxjs/jquery.min.js"></script>
<script src="https://www.aspxhome.com/ajaxjs/jquery.page.js"></script>
<script>
$(".tcdPageCode").createPage({
 pageCount:6,
 current:1,
 backFn:function(p){
  console.log(p);
 }
});
</script>
<!-- 代码部分end -->
</html>
标签：js,分页
0
投稿

猜你喜欢

  • 使用python编写简单计算器

    2023-08-27 17:07:46

  • TypeScript工具类 Partial 和 Required 的场景分析

    2024-04-29 13:14:45

  • 详解利用OpenCV提取图像中的矩形区域（PPT屏幕等）

    2022-06-23 16:42:41

  • JS实现拖动模糊框特效

    2023-08-06 05:18:51

  • 基于python爬取有道翻译过程图解

    2021-11-03 23:57:27

  • SQL Server中的排名函数与分析函数详解

    2024-01-17 03:28:54

  • PHP获取指定日期是星期几的实现方法

    2024-05-09 14:47:21

  • pytorch中Tensor.to(device)和model.to(device)的区别及说明

    2021-10-20 05:26:06

  • python 多线程实现检测服务器在线情况

    2021-12-11 15:15:58

  • Python 平方列表中每个数字的多种操作

    2023-11-14 03:53:00

  • Python中如何自定义函数

    2021-12-12 20:20:58

  • php随机取mysql记录方法小结

    2023-11-22 22:27:22

  • 交互设计杂七杂八

    2010-09-25 18:41:00

  • python selenium 获取接口数据的实现

    2021-10-19 15:32:33

  • sqlserver数据库危险扩展删除和恢复代码

    2024-01-27 19:30:46

  • oracle查看被锁的表和被锁的进程以及杀掉这个进程

    2024-01-15 12:04:15

  • pandas去重复行并分类汇总的实现方法

    2021-06-12 17:38:37

  • 浅谈golang二进制bit位的常用操作

    2024-05-22 10:14:49

  • Javascript DOM 编程实例讲解--仿LightBox效果提示框

    2008-05-01 13:25:00

  • python lxml中etree的简单应用

    2022-01-11 09:34:15
    • asp之家 网络编程 m.aspxhome.com