jquery.paginate分页插件使用

最新推荐文章于 2023-06-29 15:09:52 发布

原创最新推荐文章于 2023-06-29 15:09:52 发布 · 6.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#插件 #jquery

插件专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何使用jQuery.paginate.js实现网页分页功能。主要包括引入必要的文件、编写HTML结构及初始化插件代码。通过设置参数如总页数、当前页、每页显示页数等，可定制分页样式并实现页面跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

①：引入jquery.paginate.js和style.css及图片文件

②：在页面适当位置加入以下代码

<div id="demo1"></div>

③：初始化插件

$(document).ready(function(){ 
			 // $("#pager").pager({ pagenumber: _currentPage, pagecount: _totalPage, buttonClickCallback: PageClick });
			 if(parseInt("${totalPage}")<=1){
				$("#demo1").hide();
			}else{
				$("#demo1").show();
			}
			 $("#demo1").paginate({
				count 		: ${totalPage},//总页数
				start 		: ${currentPage},//当前页码
				display     : 10,//设置每页显示页码数
				border					: true,
				border_color			: '#B0B0CC',//border颜色
				text_color  			: '#5C6C90',//字体颜色
				background_color    	: '#FAFFFF',	
				border_hover_color		: '#000E53',
				text_hover_color  		: '#fff',
				background_hover_color	: '#2F6BA7', 
				images					: false,
				mouse					: 'press',
				onChange: function(page_index) {
			       location.href = "${basePath}/page/to_indudetail.html?induId=0&typeFlag=${typeFlag}¤tPage="+page_index;//这里如果使用异步刷新 直接调用异步方法如 ajaxQuery（page_index）,注意使用异步方法后重新初始化插件
			    }
			});