jQuery插件第五十六：十七种翻页插件
应用在17种不同场景下的翻页，让你编写js分页只需提供记录总数，其他配值默认。下面介绍比较常用的三种场景。
先来看看ajax分页实例：
size变量是每页记录显示最大值；callback函数返回cfg是一个object，cfg.curr即当前页，通过它去请求相关数据。返回ini是个数字，等于1即第一次执行。
<!DOCTYPE html>
<head>
<script id="myTemp" type="text/html" >
<li>名称：{Name}，用户名：{LoginID}</li>
</script>
<script src="lib/asaid.0.2.2.js" type="text/javascript" data-main="app/init2" ></script>
</head>
<body>
<ul id="ul2" ></ul>
<span class="leaf" data-options="{
size: 2
, callback: function (cfg, ini) {
$.ajaxSettings.async = false;
$.getJSON('./lib/company.json').done(function (data) {
if (ini == 1) {
cfg.total = data.total;
}
$('#ul2').html('');
var start = (cfg.curr - 1) * cfg.size;
var end = Math.min(cfg.curr * cfg.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]; });
$('#ul2').append(tmp);
}
});
$.ajaxSettings.async = true;
}
}" >
</span>
</body>
</html>
在需要显示分页按钮的html标签设置类选择器 leaf 。注意data-options这个配置信息属性，这里插件内部使用了metadata，把每页显示记录数和分页事件函数全部放在html标签的data-options属性里。
上面代码还可以写的更干净些，如下：
<!DOCTYPE html>
<head>
<script id="myTemp" type="text/html" >
<li>名称：{Name}，用户名：{LoginID}</li>
</script>
<script src="lib/asaid.0.2.2.js" type="text/javascript" data-main="app/init,app/ajax" ></script>
</head>
<body>
<ul id="content" ></ul>
<span class="leaf" data-options="{ size: 2 , callback: pageCallback }" ></span>
</body>
</html>
多出一个ajax.js ，位于同级目录下的app文件夹。将data-main="app/init2" 改成 data-main="app/init2,app/ajax"。
ajax.js 内容：
var pageCallback = function (cfg, ini) {
$.ajaxSettings.async = false;
$.getJSON('./lib/company.json').done(function (data) {
if (ini == 1) {
cfg.total = data.total;
}
$('#content').html('');
var start = (cfg.curr - 1) * cfg.size;
var end = Math.min(cfg.curr * cfg.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]; });
$('#content').append(tmp);
}
});
$.ajaxSettings.async = true;
}
注释：html调用脚本asaid这个模块化库文件；这库文件是调用当前页面实际功能的包装，是鄙人受当下流行requirejs之类的影响，山寨出来的脚本，相当简单到没技术含量。
接着讲，比如这个init2.js
define(function (require) {
require("jquery.leaf.css");
require("jquery-1.10.2.min");
require("jquery.metadata");
require("jquery.leaf-5.0.2");
});
/*
init2.js 就象下面代码的作用
<link href="lib/jquery.leaf.css" rel="stylesheet" type="text/css" />
<script src="lib/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="lib/jquery.metadata.js" type="text/javascript"></script>
<script src="lib/jquery.leaf-5.0.2.js" type="text/javascript"></script>
*/
url分页实例：
关键代码在urlPaging.js，其他是常规模样。
<!DOCTYPE html>
<head>
<script src="lib/asaid.0.2.2.js" type="text/javascript" data-main="app/init2,app/urlPaging"></script>
</head>
<body>
<span class="leaf" data-options="{ total: 1999, callback: pageCallback }"></span>
</body>
</html>
以下代码作用等同，是原始模式。
<!DOCTYPE html>
<head>
<script src="lib/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="lib/jquery.metadata.js" type="text/javascript"></script>
<link href="lib/jquery.leaf.css" rel="stylesheet" type="text/css" />
<script src="lib/jquery.leaf-5.0.2.js" type="text/javascript"></script>
<script src="lib/app/urlPaging.js" type="text/javascript"></script>
</head>
<body>
<span class="leaf" data-options="{ total: 1999, callback: pageCallback }"></span>
</body>
</html>
urlPaging.js 内容：
var pageCallback = function (c, t, size) {
var href = window.location.href, s = window.location.search, reg = /(&?)page=(\d+)/;
if (!t) {
var char = s == '' ? '?' : '&';
if (reg.test(href)) {
href = href.replace(reg, char + 'page=' + c.curr);
} else {
href += char + 'page=' + c.curr;
}
window.location.href = href.replace('?&', '?');
} else {
var page = s.match(reg); c.curr = page ? page[2] : 1;
}
}
DIY分页按钮实例：
声明方式设置：data-options="{total: 299, leafInfo:'{firstPrev}{moreNum}{nextLast}'}" ...
<!DOCTYPE html>
<head>
<script src="lib/asaid.0.2.2.js" type="text/javascript" data-main="app/init2" ></script>
</head>
<body>
<span class="leaf" data-options="{total: 299,leafInfo: '{firstPrev}{moreNum}{nextLast}'}">
</span>
</body>
</html>
下载地址：
http://download.csdn.net/detail/chinet_bridge/8907085
服务端控件封装分页插件
http://download.csdn.net/detail/chinet_bridge/9120901