之前有上传一个版本可以访问[url]http://lym6520.iteye.com/admin/blogs/300600[/url]
浏览,跟上一个版本的最大区别是:可以通过样式控制显示效果,性能上也有一定的优化,具体可以对比下。
浏览下效果图:
[img]http://lym6520.iteye.com/upload/attachment/136168/bf516555-c54c-3e89-9336-2d965a8d78b0.gif[/img]
浏览,跟上一个版本的最大区别是:可以通过样式控制显示效果,性能上也有一定的优化,具体可以对比下。
/**
* 分页导航条
* 2009/08/08
* @author lym6520@qq.com
* @verson v2.1
* @param {} fnName 翻页时执行的函数名(传入的第一个参数必须是“当前页码”))
* @param {} fnNameParams fnName函数的参数,数组形式(比如:var arr = new Array(); arr[0] = 1;arr[1] = "hello")
* @param {} pagesize 页面显示记录数
* @param {} totalItem 总记录数
* @param {} showID 页面显示分页导航条的div ID
*
* css 类 样式: *
* .page_link :页码样式
* .page_link a :页码连接 a 标签 样式
* .page_current :当前页码
* .page_showCurrentIndex :当前页
* .page_showPageTotal :总页码
* .page_info : 当前页码和总页码块
*/
function pagebar(fnName, fnNameParams, pagesize, totalItem, showID) {
//临时存储分页条
var strBuffer = [];
//计算总页数
var pagetotal = parseInt(totalItem / pagesize);
//如果最后页记录数刚好15条记录,pagetotal不加1
if ((totalItem / (pagesize * pagetotal)) > 1) {
pagetotal = pagetotal + 1;
}
var fnParam = new Array();
//如果这样 fnParam = fnNameParams;两个都指向同一引用
for(var i = 0 ; i < fnNameParams.length; i++)
fnParam[i] = "\"" + fnNameParams[i] + "\"";
var pageIndex = parseInt(fnNameParams[0]);//当前页
// 无记录
if (pagetotal == 0) {
$('#' + showID).empty();//清空翻页导航条
return;
}
// 分页
var front = pageIndex - 4;// 前面一截
var back = pageIndex + 4;// 后面一截
// 页码链接
// 首页, 上一页
if (pageIndex == 1) {
strBuffer.push("<span class='page_link page_current'>\u9996\u9875</span><span class='page_link page_current'>\u4E0A\u4E00\u9875</span>");
} else {
fnParam[0] = 1 ;
var fn = fnName + "(" + fnParam + ")"; //组装执行的函数
//创建连接
strBuffer.push("<span class='page_link'><a href = 'javascript:");
strBuffer.push(fn);
// strBuffer.push(fnName);
// strBuffer.push("(");
// strBuffer.push(fnParam);
// strBuffer.push(")");
strBuffer.push("'>\u9996\u9875</a></span>");
fnParam[0] = pageIndex - 1 ;
var fn = fnName + "(" + fnParam + ")"; //组装执行的函数
strBuffer.push("<span class='page_link'><a href = 'javascript:");
strBuffer.push(fn);
strBuffer.push("'>\u4E0A\u4E00\u9875</a></span>");
}
if (pagetotal == 1) {
strBuffer.push("<span class='page_link'>1</span>");
}
// 如果当前页是5,前面一截就是1234,后面一截就是6789
if (pagetotal > 1) {
var tempBack = pagetotal;
var tempFront = 1;
if (back < pagetotal)
tempBack = back;
if (front > 1)
tempFront = front;
for (var i = tempFront; i <= tempBack; i++) {
if (pageIndex == i) {
strBuffer.push("<span class='page_link page_current'>");
strBuffer.push(i);
strBuffer.push("</span>");
} else {
fnParam[0] = i;
var fn = fnName + "(" + fnParam + ")"; //组装执行的函数
strBuffer.push("<span class='page_link'><a href = 'javascript:");
strBuffer.push(fn);
strBuffer.push("'>");
strBuffer.push(i);
strBuffer.push("</a></span>");
}
}
}
// 下一页, 尾页
if (pageIndex == pagetotal) {
strBuffer.push("<span class='page_link page_current'>\u4E0B\u4E00\u9875</span><span class='page_link page_current'>\u5C3E\u9875</span>");
} else {
fnParam[0] = pageIndex + 1 ;
var fn = fnName + "(" + fnParam + ")"; //组装执行的函数
strBuffer.push("<span class='page_link'><a href = 'javascript:");
strBuffer.push(fn);
strBuffer.push("'>\u4E0B\u4E00\u9875</a></span>");
fnParam[0] = pagetotal ;
var fn = fnName + "(" + fnParam + ")"; //组装执行的函数
strBuffer.push("<span class='page_link'><a href = 'javascript:");
strBuffer.push(fn);
strBuffer.push("'> \u5C3E\u9875 </a></span>");
}
// 显示当前页
strBuffer.push("<span class='page_info'><span class = 'page_showCurrentIndex'>");
strBuffer.push(pageIndex);
strBuffer.push("</span>");
// 斜线"/"
strBuffer.push("/");
// 显示总页数
strBuffer.push("<span class = 'page_showPageTotal'>");
strBuffer.push(pagetotal);
strBuffer.push("</span></span>");
$('#' + showID).html(strBuffer.join(''));
}
浏览下效果图:
[img]http://lym6520.iteye.com/upload/attachment/136168/bf516555-c54c-3e89-9336-2d965a8d78b0.gif[/img]