分页控件（原生加jQuery编写）

最新推荐文章于 2020-07-29 16:33:04 发布
最新推荐文章于 2020-07-29 16:33:04 发布
阅读量435 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38630793/article/details/85161002
版权

html加css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .page-text {display: inline-block;margin-right: 25px;}
            .page-text1 {display: inline-block;margin-left: 10px;}
            .page-text2 {display: inline-block;margin-right: 10px;}
            .page-num-input {width: 45px;margin: 0 5px 0 5px;}
            .page-hover {cursor: pointer;}
            input[type="date"] {height: 26px;}
        </style>
    </head>
    <body>
       <!--分页-->
       <div id="pageBox"></div>
    </body>
</html>

js：

 /*引用jquery*/<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
 

/**
 * 分页
 * @param {string} id -- 分页要插入的位置
 * @param {object} data -- 分页的数据：总条数、当前页码、每页条数
 * @param {funtion} fun -- 回调函数
 * 
 * @email 3204836547@qq.com
 * 
*/
jQuery.setPage = function(id,data,fun){
	var thisCurrent,thisTotalData;
	/*先进行数据判断，总条数，页码，每页条数这三个参数缺一不可*/
	if((data.totalData || data.totalData == 0) &&data.current && data.showData) {
		/*先清空页码，再渲染，以防止重复显示*/
		$('#'+id).html('');	
		thisCurrent = data.current;
		thisTotalData = data.totalData;
		/*总页数*/
		var totalNum = Math.ceil(thisTotalData/data.showData);
		if(thisTotalData == 0) {
			totalNum = 1;
		}
		var pageElement = '<div class="">'+
				   '<span class="" id="">总记录数：</span>'+
				   '<span class="page-text" id="totalNum">'+thisTotalData+'</span>'+
				   '<span class="page-hover page-text" id="indexBtn">首页</span>'+
				   '<span class="page-hover" id="prevBtn">上一页</span>'+
				   '<span class="page-text1" id="pageThisNum">'+data.current+'</span>'+
				   '<span class="" id="">/</span>'+
				   '<span class="page-text2" id="pageTotalNum">'+totalNum+'</span>'+
				   '<span class="page-hover page-text" id="nextBtn">下一页</span>'+
				   '<span class="page-hover page-text" id="lastBtn">尾页</span>'+
				   '<span class="page-hover" id="goPageBtn">go</span>'+
				   '<input type="number" class="page-num-input" min="1" max="'+totalNum+'" id="goPageNum" />页'+
			   '</div>';
	  $('#'+id).append(pageElement);	
 		/*首页*/
		$("#indexBtn").click(function() {
			if(thisCurrent == 1) {
				return;
			}else {
				thisCurrent = 1;
				fun(thisCurrent);
			}
		});	 

	    /*上一页*/
		$("#prevBtn").click(function() {
			if(thisCurrent <= 1) {
				return;
			}else {
				thisCurrent--;
				fun(thisCurrent);
			}
		});	   

	    /*下一页*/
		$("#nextBtn").click(function() {
			if(thisCurrent == totalNum) {
				return;
			}else {
				thisCurrent++;
				fun(thisCurrent);
			}
		});	 
		
 		/*尾页*/
		$("#lastBtn").click(function() {
			if(thisCurrent == totalNum) {
				return;
			}else {
				thisCurrent = totalNum;
				fun(thisCurrent);
			}
		});	 		
		
 		/*跳转页*/
		$("#goPageBtn").click(function() {
			if(thisCurrent == $('#goPageNum').val()) {
				return;
			}else {
				thisCurrent = $('#goPageNum').val();
				fun(thisCurrent);
			}
		});	 
		
		/*输入页码不能大于最大页码数，也不能小于1*/
		$('#goPageNum').blur(function() {
			if($(this).val() > totalNum) {
				$(this).val(totalNum);
			}
			if($(this).val() < 1) {
				$(this).val(1) ;
			}			
		})
	}
}
/*分页参数*/
var pageData = {
	totalData: 100,
	showData: 10,
	current: 1
}; 

$(function(){
	showData();
})

/*获取列表方法*/
function showData(){
	/*分页调用*/
	$.setPage('pageBox',pageData,function(index){	
		pageData.current = index;
		data.pageNo = index;
		showData();
	});				
}

 

 /*运行结果*/

寒凌冰封
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery实现分页插件
03-07
jQuery分页插件，代码少兼容性好，好用简单，快速集成。
ANGULARJS中使用JQUERY分页控件
01-19
接下来，我来介绍了将一种jquery的分页控件修改为Angularjs指令的方法。 　首先在web项目中引用jquery1.10、Angularjs库文件以及jq-pagination控件。 　我降指令名称为custompagination，为指令添加Html样式。 　 　...
jquery分页插件
Admans的专栏
07-21 1635
* * * * jquery分页插件 * 1.0 zheng 2014-03-18 * 1.1 兼容url包含#号地址，GoToPage可以指定锚点（特殊需求）2014-04-10 09:00:34 * 1.2 可以配置分页条列出页面数 * 1.3 增加了页面码跳转功能 * $('#mypage').scPagination(555, { * pageSize: 10,//每页显示的记录条数 * myPagerCount:10,//分页条显示的页
jquery 分页控件（一）
weixin_30617797的博客
11-05 76
以前一直都是用别人的分页控件，虽然用得很爽，但总觉的还是自己写个小插件比较好，这个插件效果、代码等都有参照别人完成的控件。即便功能并不是那么完善，扩展性也不好，bug或许还很多。个人觉得，适合自己用就行了。你对自己写的肯定会比较熟悉，当插件需要不停的重构，这个插件就慢慢完善了。现在要做的是走出开头的那一步。往往都是因为开头的那一步阻碍了我们。 废话一大堆........ ...
jQuery分页插件
曹建涛的博客
05-04 1167
开发背景最近接了一个小型电商网站，各大商品分类都需要用到分页的技巧，虽说我只是个后台汪，但是不想搞前端的后台不是一个好开发。参考了网上的某个简单的分页插件，重新封装了下，支持ajax请求，data参数传递，分页请求回调，真的很好用呢~最终目的既然是开发插件，那么使用一定要简单粗暴，类似easyui datagrid这样：$('#dg').datagrid({ url:'datagrid_da
jQuery pagination分页插件
qq_22325259的博客
05-08 4344
插件介绍 此jQuery插件为Ajax分页插件，一次性加载，故分页切换时无刷新与延迟，如果数据量较大不建议用此方法，因为加载会比较慢。 因为用到了ajax请求，想要看到效果，必须放到iis站点中运行，及把相关文件放到vs新建项目中预览 实现效果 配置信息 pageCount：总页数（默认值：9） totalData：数据总条数（默认值：0） showData：每页展示条数（默认值：0） current：当前第几页（默认值：1） prevCls：上一页class样式（默认值：'p.
自己动手写的jquery分页控件(非常简单实用)
11-22
【jQuery分页控件制作详解】 在Web开发中，分页功能是常见且重要的，它帮助用户方便地浏览大量数据。本文将介绍如何利用jQuery来创建一个简单的分页控件，适用于那些寻求简洁、易用解决方案的开发者。 首先，我们...
laypage分页控件使用实例详解
12-28
在开发的时候经常遇到分页比较麻烦，尤其对于一个后端程序猿来说，但是这个问题不能不解决，于是找了一个分页的控件用用，记录在下，以便以后使用。 以下是官网中使用的简单例子： //以下将以jquery.ajax为例，...
原生，JS，分页，新手
最新发布
01-05
本教程将深入讲解如何使用原生JavaScript实现一个基础的分页控件，适合初学者学习和实践。 一、理解分页原理 分页的基本原理是将大量的数据分成多个小部分，每个部分称为一页，用户可以逐页浏览。通常，每页显示的...
MVC中的自定义标签分页控件，仅供大家学习！！
weixin_30600503的博客
06-23 65
1 public static HtmlString ShowPageNavigate(this HtmlHelper htmlHelper, int currentPage, int pageSize, int totalCount) 2 { 3 var redirectTo = htmlHelper.ViewContext.Reque...
jQuery分页组件
04-18
jquery分页组件，快速实现分页效果，使用该组件需导入jQuery，且jQuery须在该组件之前导入
jQuery jPages （jQuery 分页插件）
10-10
jPages 是一个超给力的 jQuery 分页插件，它提供了很多丰富的新特性，如下： 自动翻页功能 可用键盘和鼠标滚动浏览 内容延迟显示 支持自定义分页导航菜单
JQuery分页插件。。。
08-25
JQuery分页插件
jQuery插件--分页插件
03-17
NULL 博文链接：https://gogole.iteye.com/blog/457627
jQuery分页插件jQuery.pager.js
03-24
插件描述：表格分页，li分页.
js(jQuery)原生分页器
qq_42208679的博客
02-10 528
js(jQuery)原生分页器 说明： 引入jQuery插件 引入page.js文件（在文章的最后面） css: /* 外面盒子样式---自己定义 */ .page_div { margin: 20px 10px 20px 0; color: #666 } /* 页数按钮样式 */ .page_div button { display: inline-block; ...
JQ原生实现分页
William_leif的博客
07-29 509
近期对公司网站进行修改，新增需求：知识库模块。其中涉及到一个小功能分页，为了提高自己的代码自编写力，决定原生编写。此次功能使用Jq操作dom的方式去完成编码，代码实现的有点小鸡肋，也基本到达了需求的效果。 分页实现逻辑Html部分Javascript部分随机文章数组文章渲染按钮渲染绑定事件 Html部分 <ul id="Article"> </ul> <div class="page"> <span class="pre" style="display:
基于jquery扩展漂亮的分页控件（ajax）
shieldHand的专栏
11-19 5367
分页控件式大家在熟悉不过的控件，很多情况下都需要使用到分页控件来完成列表数据加载操作，在很多分页控件中有的编写麻烦，有的应用扩展比较复杂，有的分页控件样式比较丑陋，有的分页控件用户体验操作比较简单等等一些不符合自己的要求，在此之际为了项目需求，自己扩展一个分页控件js类，以便日后方便重用，现在分享这个控件。
jquery分页插件_jQuery分页插件
02-22 250
jquery分页插件 这篇热门文章已于2017年2月更新，以反映jQuery分页插件的当前状态。 呈现冗长而笨拙的结果列表通常是显示信息的一种糟糕方法。 这就是为什么分页（尤其是内容较长的分页）对于正确设置很重要。 服务器端分页通常用于获取分页的内容，显示一组分为页面的结果（通常具有唯一的URL）。 尽管这很好，但客户端分页是另一种解决方案。 让我们来看看一些基于jQuery的插件，您可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值