简单的分页js代码

最新推荐文章于 2024-05-11 15:40:37 发布
最新推荐文章于 2024-05-11 15:40:37 发布
阅读量3.1k 收藏 2
点赞数
分类专栏： javascript


简单的分页js代码:

效果描述：
不用分页即可显示的jQuery插件
jQuery分页插件——jQuery.page.js用法很简单，效果很棒
 
调用方法：
    $(".tcdPageCode").createPage({
        pageCount:10,
        current:1,
        backFn:function(p){
            //单击回调方法，p是当前页码
        }
    });
    pageCount：总页数
    current：当前页

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);
使用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="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.page.js"></script>
<script>
    $(".tcdPageCode").createPage({
        pageCount:6,
        current:1,
        backFn:function(p){
            console.log(p);
        }
    });
</script>
<!-- 代码部分end -->
</html>



Senssic
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript经典实例之分页（简单易用）原生js封装分页
m0_61408947的博客
03-19 1178
/每次选择要重新处理按钮//响应点击事件//首页是否有效}else{//前一页按钮是否有效}else{//nav_rela}else{}else{//右边隐藏节点数//选择当前页i++){if(i==curPage){//选择当前页}else{if(leftCount
简约留言板js代码
zichuanhuo221的博客
12-28 9525
留言板                 发表留言                                     最新的一条留言                             最新的一条留言                             最新的一条留言
纯JS前端实现分页代码
11-25
先给大家展示下效果图，如果大家感觉效果不错，请参考实现代码： 因为这是我自己第一次动手用js写分页，写的应该也不是很完美，有些公共的没有抽取出来，但是用起来还是可以的，这块代码是可以把它当做公共的分页去处理的，我就是用这块代码写了两个稍微不同一些的分页！公共的代码抽取的也差不多，主要就是ajax后台以及返回的值不同而已，只要把总页码的值获取到，点击首页/下一页等传值正确的话，基本上分页是不会出什么问题的  网上确实有很多分页的插件以及开源代码，单本是一个后台开发猿，前台css等样式还驾驭不住，所以就开始自己去写了。其实这个分页原理很简单，就是用ajax往后台传值(当前页码)，后台使用lim
js代码写分页
weixin_46249441的博客
12-15 1847
完整代码见下： html： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"...
Java最新SpringBoot+VUE+Element UI实现分页操作（附源码），看完老板就给加薪了
最新发布
2401_83977546的博客
05-11 638
既然是要面试，那么就少不了刷题，实际上春节回家后，哪儿也去不了，我自己是刷了不少面试题的，所以在面试过程中才能够做到心中有数，基本上会清楚面试过程中会问到哪些知识点，高频题又有哪些，所以刷题是面试前期准备过程中非常重要的一点。很多人感叹“学习无用”，实际上之所以产生无用论，是因为自己想要的与自己所学的匹配不上，这也就意味着自己学得远远不够。我牺牲了自己的大概十个小时写了这片文章，换来的是成千上万的求职者节约几天甚至几周时间浪费在无用的资源上。3.4 Controller层的实现。2.2 mapper接口。
JS实现分页功能
热门推荐
RockHan
10-28 4万+
为了方便浏览通常将服务器响应回来的大量数据做分页 从实现方式上来说分页基本分为两种方式： 1.查询所有数据返回给客户，通过显示指定区间实现分页，这种方法一般是指JS分页 2.通过客户发送的请求，构造sql语句，查询表中的一段数据。 --------------------------------------------------------------------------------...
js实现分页功能代码
zybijiso666的博客
02-23 492
分页代码
简单rem.js代码
pky@
08-12 366
window.onload = function(){ /*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是 为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/ getRem(1940,100) }; window.onresize = function(){ ...
简单的分页代码js实现
11-25
简单的分页js代码: 1、效果描述：  不用分页即可显示的jQuery插件  jQuery分页插件——jQuery.page.js用法很简单，效果很棒  2、调用方法：  $(".tcdPageCode").createPage({ pageCount:10, current:1, ...
js简单的分页器插件代码实例
12-12
虽然在提供的内容中没有直接给出JavaScript代码，但我们可以推断出基本的实现逻辑。一个简单的分页器通常包括以下功能： 1. 初始化：设置默认的当前页数和总页数，创建分页条目。 2. 显示和隐藏页面：根据当前页数...
纯js分页代码(简洁实用)
12-09
代码如下://每页显示字数PageSize=5000;//分页模式flag=2;//1:根据字数自动分页 2:根据[NextPage]分页//默认页startpage = 1;//导航显示样式 0:常规 1:直接 3:下拉TopShowStyle = 1;DownShowStyle = 0;  var ...
Javascript分页效果（收集了很多强大的JS分页代码）
12-16
Javascript我v页效果（收集了很多强大的JS分页代码），可以直接使用，不会JS的也能在自己网站上应用到强大的JS分页特效
JS+HTML分页代码
05-22
通过JS和HTML实现的分页功能代码，有首页，前页，后页，尾页和分页页号等功能，
JS分页文件
05-01
JS分页文件在实际开发中自行总结而来，实现前提：需要分页的数据由<tr><td><td><tr>标签绘画出来的！暂时未验证由<ul><li><li><li><ul>标签绘画出的页面，可自行验证哦！
经典的10种JS分页代码
10-28
ASP分页代码都得熟悉，JS分页代码你熟悉吗？精心集的分页代码。
jQuery简易分页插件代码.zip
09-22
jQuery简易分页插件代码.zip是一个包含jQuery分页功能实现的压缩包，主要包含两个文件：index.html（示例页面）和page.js（分页插件的JavaScript代码）。这个插件是为了解决网页中数据量过大，需要将内容分页展示的...
jQuery简单分页样式代码
05-01
本教程将深入讲解如何使用jQuery实现一个简单的分页样式代码，该代码基于`jquery-1.8.3.min.js`库构建，并且带有详细的中文注释，便于理解和定制。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、...
js 分页功能实现
m0_72759446的博客
05-12 937
当表单数据过多时，查看起来比较不方便吗，这个时候就需要分页查看。
一个分页的小插件
kennsand的博客
12-04 435
这款分页的小插件，是我在网上看到了，是一个基于jq的代码写的动态获取的小插件，在这个插件中，发现了一些点击事件绑定的问题。所以在这个基础上做了一些小修改。有了这个小插件，动态获取分页效果。在实际开发中很是便利， 首先，以下的就是这个小插件的本身代码。这是从懒人之家里面下载的。赖人之家很多实用小插件很很不多的 一个非常简单的jQuery分页插件 *{ margin:0; padding:0
js前端分页完整代码
09-08
以下是一个使用JavaScript实现前端分页的完整代码示例： HTML部分： ```html <div id="dataContainer"></div> <div id="paginationContainer"></div> ``` JavaScript部分： ```javascript // 模拟一个包含所有数据的数组 var data = [ { id: 1, name: "数据1" }, { id: 2, name: "数据2" }, // 这里省略了一些数据... { id: 100, name: "数据100" } ]; var currentPage = 1; // 当前页码 var pageSize = 10; // 每页显示的数据条数 // 根据当前页码和每页显示的数据条数，获取对应的数据 function getDataByPage(page, size) { var startIndex = (page - 1) * size; // 计算起始索引 var endIndex = startIndex + size; // 计算结束索引 return data.slice(startIndex, endIndex); // 使用slice方法截取对应的数据 } // 更新页面上的数据显示 function updateData(data) { var container = document.getElementById("dataContainer"); container.innerHTML = ""; // 清空旧数据 // 遍历数据数组，创建相应的DOM元素并添加到容器中 data.forEach(function(item) { var div = document.createElement("div"); div.innerHTML = item.name; container.appendChild(div); }); } // 更新分页按钮 function updatePagination() { var totalPages = Math.ceil(data.length / pageSize); // 总页数 var container = document.getElementById("paginationContainer"); container.innerHTML = ""; // 清空旧按钮 // 遍历总页数，创建相应的DOM元素并添加到容器中 for (var i = 1; i <= totalPages; i++) { var button = document.createElement("button"); button.innerHTML = i; button.onclick = function() { currentPage = parseInt(this.innerHTML); // 更新当前页码 var currentPageData = getDataByPage(currentPage, pageSize); updateData(currentPageData); // 更新数据显示 }; container.appendChild(button); } } // 初始化页面 function init() { var currentPageData = getDataByPage(currentPage, pageSize); updateData(currentPageData); updatePagination(); } init(); // 调用初始化函数 ``` 以上代码实现了一个简单的前端分页功能，核心思路就是根据当前页码和每页显示的数据条数，截取相应的数据进行显示，并根据总数据量动态生成分页按钮。点击分页按钮时，更新当前页码并重新获取相应的数据进行显示。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值