使用jquery插件kkpager为页面添加分页

首先下载kkpager插件:https://github.com/pgkk/kkpager

1、将下载下来的js和css拷贝到项目中,在需要分页的页面引入kkpager插件所需的js和css,如下:

<script type="text/javascript" src="js/kkpager.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<link rel="stylesheet" type="text/css" href="css/kkpager_orange.css">

其中css有两个,一个是橘色的,一个是蓝色的,选择喜欢的颜色任意引入一个就可以。

2、在需要分页的页面添加div:

<div id="kkpager"></div>

3、因为使用时这个插件初始化页面时代码挺多,所以我就新建了一个js文件,并在其中封装了一个初始化的方法。

新建common.js(记得将这个js引入到要分页的页面哦),定义方法initPage;

/**
 * 生成分页控件
   nowPage:当前页
   totalPage:总页数
   totalRows:总记录条数
   rows:每页显示多少条
   fun:要调用的函数  一般写填充表格数据的逻辑
 */
function initPage(nowPage,totalPage,totalRows,rows,fun){
        //生成分页控件  
kkpager.generPageHtml({
    pno : nowPage,
    mode : ‘click‘, //设置为click模式
    //总页码  
    total : totalPage,  
    //总数据条数  
    totalRecords : totalRows,
    //点击页码、页码输入框跳转、以及首页、下一页等按钮都会调用click
    //适用于不刷新页面,比如ajax
    click : function(n){
        //这里可以做自已的处理
        //...
        //点击要调用的函数 参数1 当前页数  参数2 每页显示的条数
        fun(n,rows);
        //处理完后可以手动条用selectPage进行页码选中切换
        this.selectPage(n);
    },
    //getHref是在click模式下链接算法,一般不需要配置,默认代码如下
    getHref : function(n){
        return ‘#‘;
    }
});
}

这样基本就搞定了。

4、在需要分页的的页面使用,其实现在只要直接调用comom.js中定义好的方法即可。

<script type="text/javascript">
//自定义方法,获取数据并加载
/*
	nowPage:当前页
	rows:每页显示的数据条数
*/
function loadInfor(nowPage,rows){
	//TODO(例:发送ajax请求,从后台获取数据,构建动态表格之类的……)
	//其中的10 和100 可以是从后台获取的真实数据
	//loadInfor是当前这个函数,作为参数传入是为了initPage中的click点击事件
	initPage(nowPage,10,100,rows,loadInfor);
}
	$(function(){
		//kkpager.pno :插件提供的方法,获取当前页码
		loadInfor(kkpager.pno,10);
	});

</script>
</head>
<body>
	<div id="kkpager"></div>
</body>

页面效果:

如果有真实的数据,效果就更鲜明了,完毕!

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

额外的:PageUtil.java,后台封装页面所需的分页数据,一并奉上!

public class PageUtil  implements java.io.Serializable{
	/**
	 * serialVersionUID
	 */
	private static final long serialVersionUID = 1L;
	// 当前页
	private Integer page;
	// 每页多少条
	private Integer rows;
	// 总页数
	private Integer totalPage;
	// 总记录条数
	private Integer totalRows;

	public Integer getPage() {
		return page;
	}

	public void setPage(Integer page) {
		this.page = page;
	}

	public Integer getRows() {
		if(rows==null){
			rows=10;
		}
		return rows;
	}

	public void setRows(Integer rows) {
		this.rows = rows;
	}

	public Integer getTotalPage() {
		if(totalRows==null){
			totalRows=0;
		}
		if (totalRows % getRows() == 0) {
			totalPage = totalRows / getRows();
		} else {
			totalPage = totalRows / getRows() + 1;
		}
		return totalPage;
	}

	public void setTotalPage(Integer totalPage) {
		this.totalPage = totalPage;
	}

	public Integer getTotalRows() {
		return totalRows;
	}

	public void setTotalRows(Integer totalRows) {
		this.totalRows = totalRows;
	}

	public PageUtil(Integer page, Integer rows, Integer totalPage,
			Integer totalRows) {
		super();
		this.page = page;
		this.rows = rows;
		this.totalPage = totalPage;
		this.totalRows = totalRows;
	}

	public PageUtil() {
		super();
	}

	@Override
	public String toString() {
		return "PageUtil [page=" + page + ", rows=" + rows + "]";
	}

}
时间: 2024-10-13 21:44:10

使用jquery插件kkpager为页面添加分页的相关文章

Magento给新产品页面添加分页

本文介绍如何让magento创建一个带分页功能的新到产品页面,方便我们在首页或者其它CMS Page调用和展示新到产品. 在Magento我们经常有的做法是建立一个可以调用新产品的block,然后通过: {{block type="catalog/product_new" column_count="6" products_count="100" name="home.catalog.product.new" alias=&q

jQuery插件实现的页面功能介绍引导页效果

新产品上线或是改版升级,我们会在用户第一次使用产品时建立一个使用向导,引导用户如何使用产品,如使用演示的方式逐一介绍界面上的功能模块,从而提升了用户体验和产品的亲和力. Helloweba.com之前也有相关文章介绍:<构建一个用于产品介绍的WEB应用>,相信对有需要的朋友有帮助.本文将介绍另一款基于jQuery的页面引导页插件:pagewalkthrough.js,来看如何使用它. 先点击这里可以看在线演示效果 HTML 首先记得加载所需的css文件和jQuery库文件,以及pagewalk

全屏背景:15个jQuery插件实现全屏背景图像或媒体

动态网站通常利用背景图像或预加载屏幕,以保证所有资源都加载到页面上,在浏览器中充分呈现.现在很多网站都炫耀自己的图像作为背景图像全屏背景,追溯到旧的Flash网站却用自己的方式在HTML资源重布局. 本综述我们列出15最好的jQuery全屏背景图像的插件,可以帮助你增加你的图像到您的网站,让他们看起来惊人的美丽.这个插件创建一些华丽的背景,幻灯片,你的网站让他们美丽的动画和过渡. 1. MaxImage maximage 2.0是一个全屏背景slideshow utilizes jQuery的插

Jquery插件 “IT小鲜肉 Tree”,猛烈完善中

今天又给Jquery插件"IT小鲜肉 Tree"添加了自定义图标.自定义标签显示功能:目前"IT小鲜肉 Tree"已经具备有checkbox.drag and drop 等基本功能. 废话不说,直接上图: 自我感觉良好.主要设置了数据的iconUrl属性,代码如下: 还可以通过设置iconCls实现,代码如下: 运行效果如下:

如何开发一个Jquery插件?

最近有离职的想法,可这不是重点,重点是很多面试官都会问的一个问题就是:怎么开发一个jquery插件. 其实,如果是在真实的工作中遇到这种情况,我会直接找一个简单的jquery插件,例如jquery.cookie.js或者jquery.textchange.js插件,jquery的插件那么多,你随便找来一个都是可以用的,我们需要做的就是把jquery的架子留下来,把具体的功能实现换成自己的,然后就可以到处去使用了. 但是,面试中我们是万万不能这么回答的,所以,一方面是为了让自己再熟悉一下jquer

七个帮助你处理Web页面层布局的jQuery插件

1.UI.Layout  jQuery UI布局插件 官方网站:http://layout.jquery-dev.com/index.cfm 使用大小可折叠的嵌套面板和大量选项创建高级UI布局.布局可以创建任何你想要的UI外观; 从简单的标题或侧边栏到具有工具栏,菜单,帮助面板,状态栏,子表单等的复杂应用程序.集成并增强其他UI小部件,如选项卡,手风琴和对话框,以创建丰富的界面. 2.jQUery Masonry 官方网站:https://masonry.desandro.com/?resour

wordpress——在插件后台管理页面中添加javascript和ajax

最近在开发一个wordpress插件,需要在插件的后台管理页面上,添加自己写的javascript文件,以达到一些功能. 查了好几天的文档和资料,终于实现了. 这里先介绍下wordpress后台页面添加javascript的过程,再介绍添加ajax的过程. 添加javascript 首先我们需要知道wordpress插件开发的框架,然后再介绍javascript添加的步骤. 添加插件设置页面 开发插件,总需要在管理后台添加自己的插件设置页面.插件设置子页面,在这些页面中,可以设置和保存插件的一些

[原创]jquery+css3打造一款ajax分页插件

最近公司的项目将好多分页改成了ajax的前台分页以前写的分页插件就不好用了,遂重写一个 支持IE6+,但没有动画效果如果没有硬需求,个人认为没必要多写js让动画在这些浏览器中实现css3的动画本来就是帮我们取代js中这部分动画代码的使js更纯粹地去实现逻辑 效果图如下: 调用代码如下: 包括常用的加载失败重试,参数可配置是否能手动输入页码,设置按钮数目,可以调用多个page等等,调用代码很简便 <script type="text/javascript"> var kpag

jquery插件实现分页

1 Query Pagination分页插件 2 3 原项目地址:http://plugins.jquery.com/project/pagination 4 版本:v1.2 5 源文件下载:英文原版 或 中文翻译修改版 6 翻译:张鑫旭 7 demo实例页面 8 基本demo页面 9 Ajax demo页面 10 参数可编辑demo页面 11 插件简介 12 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 13 原插