简单的分页代码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>
0
投稿
猜你喜欢
- 看代码吧~func remove(slice []interface{}, elem interface{}) []interface{}{
- 时隔一年,重拾python,想在pycharm里面使用jupyter完成一些小demo,结果一年后的jupyter死活没有token,连都连
- property属性一种用起来像是使用实例属性一样的特殊属性,可以对应于某个方法既要保护类的封装特性,又要让开发者可以使用 对象.属性 的方
- 理科学生应该都了解过共轭吧,经常在数学或者物理还有化学中出现,在坐标轴上去描述共轭函数还是比较清晰的,py语言里也经常会出现关于共轭函数的使
- MAH一:MAH架构介绍MHA (Master High Availability)目前在MySQL高可用方面是一个相对成熟的解决方案,它由
- 一个小项目自动登录淘宝联盟抓取数据,由于之前在Github上看过类似用Python写的代码因此选择用Python来写,第一次用Python正
- python实现四舍五入""" 四舍五入 :param
- 装完sql server 2005后却没有找到ms的示例数据库northwind 后来查看安装光盘发现sql server 2005种只有a
- 变量名1、组成:数字、字母、下划线2、变量名要有意义3、多个单词则用下划线,如user_id4、python的变量名不要驼峰显示字符串:1、
- 1 配置环境setting.json·是设置语言环境,launch.json是设置执行环境来执行代码,tasks.js
- 一般上电子商务网站买东西的用户分三种:随便看看,就是不买先看看,买不买再说就是来买东西的这样的需求反应到产品页的购买按钮上,我们一般会看到购
- 贪吃蛇游戏是经典手机游戏,既简单又耐玩。通过控制蛇头方向吃蛋,使得蛇变长,从而获得积分。在诺基亚时代,风靡整个手机界,今天我们来看看另类的,
- 本文实例讲述了Python多继承原理与用法。分享给大家供大家参考,具体如下:python中使用多继承,会涉及到查找顺序(MRO)、重复调用(
- 前言喜马拉雅是专业的音频分享平台,汇集了有声小说,有声读物,有声书,FM电台,儿童睡前故事,相声小品,鬼故事等数亿条音频,我最喜欢听民间故事
- 1 写在前面1. 本文介绍的是基于TensorFlow tf.estimator接口的深度学习网络,而非TensorFlow&nb
- 终于完成了偶的拖动窗口,花了近15个小时,庆祝一下(*^__^*);以前写了IE下的功能,于是又写了firefox下的功能,在firefox
- 目录过程拍照用到的Python 操作库Python遍历文件夹获取图片旋转图片展示方向并压缩像素整体代码整体代码将脚本打包成exe安装&nbs
- 多线程编程当中, 线程的存在形态比较抽象. 通过前台线程\后台线程, 可以有效理解线程运行顺序.(复杂的多线程程序可以通过设置线程优先级实现
- 虽然熟练掌握SQL的人对于Null不会有什么疑问,但总结得很全的文章还是很难找,看到一篇英文版的, 感觉还不错。Tony Hoare 在19
- 抛开数据库,生活中的方言是什么?方言就是某个地方的特色语言,是一种区别于其它地方的语言,只有你们这一小块地方能听懂,出了这个地方又是另一种方