JQPAGINATION分页插件实践
JQPAGINATION分页插件参考资料：http://blog.csdn.net/chinet_bridge/article/details/12488719
献上实用代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="./css/jqpagination.css" />
<script src="./js/jquery-1.7.2.min.js"></script>
<script src="./js/jquery.jqpagination.js"></script>
<script id="myTemp" type="text/html">
<li>名称：{Name}，用户名：{LoginID}</li>
</script>
</head>
<body>
<ul id="myRecord">
</ul>
<div class="gigantic pagination">
<a href="#" class="first" data-action="first">«</a> <a href="#" class="previous"
data-action="previous">‹</a>
<input type="text" readonly="readonly" />
<a href="#" class="next" data-action="next">›</a> <a href="#" class="last"
data-action="last">»</a>
</div>
<div class="clearfix">
</div>
</body>
</html>
<script type="text/javascript" language="javascript">
var MPAGE = 0;
var SIZE = 2;
function rpt(p) {
$.ajaxSettings.async = false;
$.getJSON('./lib/company.json').done(function (data) {
if (p == 1) {
MPAGE =Math.ceil(data.total/SIZE);
}
$('#myRecord').html('');
var start = (p - 1) * SIZE;
var end = Math.min(p * SIZE, data.total);
for (var i = start, j = end; i < j; i++) {
var item = data.rows[i];
var tmp = $('#myTemp').html();
tmp = tmp.replace(/\{(\w+)\}/g, function (source, key) { return item[key]; });
$('#myRecord').append(tmp);
}
});
$.ajaxSettings.async = true;
}
rpt(1);
$('.pagination').jqPagination({
link_string: '/?page={page_number}',
max_page: MPAGE,
paged: function (page) {
rpt(page);
}
});
</script>
如果是用ajax,读取总记录数和数据内容最好分开两个ajax. 像上面那样只用一个ajax，就要将异步改成同步,因为总记录数要在分页功能初始化之前生成数据。要是显示数据内容单独做成一个ajax，这个ajax则可以保持异步。说到这里还是感觉繁琐。笔者想到另外一套思路。可以先将数据转js数组。看代码：
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="./css/jqpagination.css" />
<script src="./js/jquery-1.7.2.min.js"></script>
<script src="./js/jquery.jqpagination.js"></script>
<script id="myTemp" type="text/html">
<li>名称：{Name}，用户名：{LoginID}</li>
</script>
</head>
<body>
<ul id="myRecord">
</ul>
<div class="gigantic pagination">
<a href="#" class="first" data-action="first">«</a> <a href="#" class="previous"
data-action="previous">‹</a>
<input type="text" readonly="readonly" />
<a href="#" class="next" data-action="next">›</a> <a href="#" class="last"
data-action="last">»</a>
</div>
<div class="clearfix">
</div>
</body>
</html>
<script type="text/javascript" language="javascript">
var ROWS = [{ "Name": "上海陆地信息公司", "LoginID": "yu" }, { "Name": "上海陆空电子信息公司", "LoginID": "tianya" }, { "Name": "上海中草药有限公司", "LoginID": "yutian" }, { "Name": "上海眉飞色舞娱乐有限公司", "LoginID": "tianya21" }, { "Name": "天天饮食股份有限公司", "LoginID": "tiantian" }, { "Name": "上海陆空电脑培训中心", "LoginID": "tiantianjian" }, { "Name": "碧海蓝天餐饮娱乐有限公司", "LoginID": "bihai" }, { "Name": "天天发笔记本公司", "LoginID": "tiantianfa" }, { "Name": "集运通信科技有限公司", "LoginID": "jiyun" }, { "Name": "东方红太阳能有限公司", "LoginID": "dongfanghong" }, { "Name": "上海有线传媒有限公司", "LoginID": "youxian" }, { "Name": "HP笔记本生产公司", "LoginID": "hp" }, { "Name": "上海空中楼阁设计有限公司", "LoginID": "kongzhong" }, { "Name": "上海海鸥科技博览馆", "LoginID": "haiou" }, { "Name": "上海千珂企业形像策划制作有限公司", "LoginID": "qianke" }, { "Name": "上海可喜可乐有限公司", "LoginID": "kexkl" }, { "Name": "天使婴儿用品有限公司", "LoginID": "tianshi" }, { "Name": "安妮2测试有限公司", "LoginID": "annee" }, { "Name": "中石信息技术有限公司", "LoginID": "airong"}];
var SIZE = 2;
var MPAGE = Math.ceil(ROWS.length/SIZE);
function rpt(p) {
$('#myRecord').html('');
var start = (p - 1) * SIZE;
var end = Math.min(p * SIZE, ROWS.length);
for (var i = start, j = end; i < j; i++) {
var item = ROWS[i];
var tmp = $('#myTemp').html();
tmp = tmp.replace(/\{(\w+)\}/g, function (source, key) { return item[key]; });
$('#myRecord').append(tmp);
}
}
rpt(1);
$('.pagination').jqPagination({
link_string: '/?page={page_number}',
max_page: MPAGE,
paged: function (page) {
rpt(page);
}
});
</script>
如果需要支持url分页，代码示例：
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="./css/jqpagination.css" />
<script src="./js/jquery-1.7.2.min.js"></script>
<script src="./js/jquery.jqpagination.js"></script>
<script id="myTemp" type="text/html">
<li>名称：{Name}，用户名：{LoginID}</li>
</script>
</head>
<body>
<ul id="myRecord">
</ul>
<div class="gigantic pagination">
<a href="#" class="first" data-action="first">«</a> <a href="#" class="previous"
data-action="previous">‹</a>
<input type="text" readonly="readonly" />
<a href="#" class="next" data-action="next">›</a> <a href="#" class="last"
data-action="last">»</a>
</div>
<div class="clearfix">
</div>
</body>
</html>
<script type="text/javascript" language="javascript" >
var ROWS = [{ "Name": "上海陆地信息公司", "LoginID": "yu" }, { "Name": "上海陆空电子信息公司", "LoginID": "tianya" }, { "Name": "上海中草药有限公司", "LoginID": "yutian" }, { "Name": "上海眉飞色舞娱乐有限公司", "LoginID": "tianya21" }, { "Name": "天天饮食股份有限公司", "LoginID": "tiantian" }, { "Name": "上海陆空电脑培训中心", "LoginID": "tiantianjian" }, { "Name": "碧海蓝天餐饮娱乐有限公司", "LoginID": "bihai" }, { "Name": "天天发笔记本公司", "LoginID": "tiantianfa" }, { "Name": "集运通信科技有限公司", "LoginID": "jiyun" }, { "Name": "东方红太阳能有限公司", "LoginID": "dongfanghong" }, { "Name": "上海有线传媒有限公司", "LoginID": "youxian" }, { "Name": "HP笔记本生产公司", "LoginID": "hp" }, { "Name": "上海空中楼阁设计有限公司", "LoginID": "kongzhong" }, { "Name": "上海海鸥科技博览馆", "LoginID": "haiou" }, { "Name": "上海千珂企业形像策划制作有限公司", "LoginID": "qianke" }, { "Name": "上海可喜可乐有限公司", "LoginID": "kexkl" }, { "Name": "天使婴儿用品有限公司", "LoginID": "tianshi" }, { "Name": "安妮2测试有限公司", "LoginID": "annee" }, { "Name": "中石信息技术有限公司", "LoginID": "airong"}];
var SIZE = 2;
var MPAGE = Math.ceil(ROWS.length / SIZE);
var rpt = function (c) {
var href = window.location.href, s = window.location.search, reg = /(&?)page=(\d+)/;
if (c!=0) {
var char = s == '' ? '?' : '&';
if (reg.test(href)) {
href = href.replace(reg, char + 'page=' + c);
} else {
href += char + 'page=' + c;
}
window.location.href = href.replace('?&', '?');
} else {
var _page = s.match(reg); c = _page ? _page[2] : 1;
$('.pagination').jqPagination({
current_page: c,
link_string: '',
max_page: MPAGE,
paged: function (page) {
rpt(page);
}
});
//前端显示数据内容代码开始，此处可用服务端代码代替显示
$('#myRecord').html('');
var start = (c - 1) * SIZE;
var end = Math.min(c * SIZE, ROWS.length);
for (var i = start, j = end; i < j; i++) {
var item = ROWS[i];
var tmp = $('#myTemp').html();
tmp = tmp.replace(/\{(\w+)\}/g, function (source, key) { return item[key]; });
$('#myRecord').append(tmp);
}
//前端显示数据内容代码开始，此处可用服务端代码代替显示
}
}
rpt(0);
</script>