jquery的jQuery pager plugin(jquery.pager.js)简单应用
一，关于jQuery pager plugin
演示地址:
http://jonpauldavies.github.com/JQuery/Pager/PagerDemo.html
下载地址:
http://jonpauldavies.github.com/JQuery/Pager/jquery.pager.js
作为jquery的一款简单分页插件，合理的使用可以得到相当不错的效果，比如下面的应用。
二，JSON & jQuery pager plugin 实现分页
项目需求：
实现一个投票系统，每次随机分页显示资源。
项目分析：
如果用传统的动态分页，如：
"select * from tab order by rand() limit $start,$end"
在数据量小的情况下，上下页资源重复的概率很高，考虑到资源数量不到500，
所以采用从服务器端一次性生成json串，然后下载到浏览器端进行分页处理。
三，程序实现
1，服务器端主要代码：
json.php
<?php
// 读取全部资源数据到数组
$allrows = ...
// 转换成json 串并且输出
echo json_encode($allrows);
?>
2，浏览器端主要代码：
<link rel="stylesheet" type="text/css" href="css/Pager.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.pager.js"></script>
<script type="text/javascript">
// 每页显示资源数
var pagesize = 10;
// 总资源数
var rowcount = 0;
// 总页数
var pagecount = 0;
// json 对象
var ojson = {};
// json资源url
var requestJsonURI = "./json.php?"+Math.random();
/*
这里使用 HTML锚点 与 window.location.href 函数相结合来实现分页效果，
改变当前URL的锚点值并没有改变当前的URL，如调用：
window.location.href = index.html#page=2;
原url index.html与index.html#page=2 是同一个URL。
*/
// 取类似index.html#page=1 url 的page值
$_GET = function(_1)
{
return (c = document.location.href.match(new RegExp("^.*[#]"+_1+"=([0-9]*)$"))) ? c[1] : 1;
}
// 响应单击事件，由 jQuery pager plugin 调用
PageClick = function(pageclickednumber)
{
window.location.href="index.html#page="+pageclickednumber;
PaintList();
PaintPager($_GET("page"),pagecount,PageClick);
}
// 输出分页
PaintPager = function(_page,_pagecount,_callback)
{
$("#pager").pager({ pagenumber: _page, pagecount: _pagecount, buttonClickCallback: _callback });
}
// 输出资源列表
PaintList = function()
{
var start = ($_GET("page")-1)*pagesize;
var end = (start+pagesize) > rowcount ? rowcount : start+pagesize;
var sHTML = "";
for(var i=start;i<end;i++)
{
sHTML += "id:"+ojson[i].id+"------"+"title:"+ojson[i].title+"<br>";
}
$("#list").html(sHTML);
}
// 页面初始化处理
$(document).ready(function()
{
$.ajax({url: requestJsonURI,type: 'GET',dataType: 'json',timeout: 1000,
error: function()
{
alert('Error loading JSON document');
},
success: function(json)
{
rowcount = json.length;
pagecount = Math.ceil(rowcount/pagesize);
// 将获取的json对象赋值给全局json对象 ojson
ojson = json;
PaintList();
PaintPager($_GET("page"),pagecount,PageClick);
}
});
});
</script>
// list 和 pager 的容器
<div id="list"></div>
<div id="pager" ></div>
四，结束语
以上内容适用于小数据量资源，如果数据量过大，下载等待的时间是无法接受的。
在需要随机分页显示的情况下，不知道有没有更好的解决办法，望高手予以留言指点！