jQuery 实现分页导航v2.0

之前有上传一个版本可以访问[url]http://lym6520.iteye.com/admin/blogs/300600[/url]
浏览,跟上一个版本的最大区别是:可以通过样式控制显示效果,性能上也有一定的优化,具体可以对比下。




/**
* 分页导航条
* 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]
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
智慧校园整体解决方案是响应国家教育信息化政策,结合教育改革和技术创新的产物。该方案以物联网、大数据、人工智能和移动互联技术为基础,旨在打造一个安全、高效、互动且环保的教育环境。方案强调从数字化校园向智慧校园的转变,通过自动数据采集、智能分析和按需服务,实现校园业务的智能化管理。 方案的总体设计原则包括应用至上、分层设计和互联互通,确保系统能够满足不同用户角色的需求,并实现数据和资源的整合与共享。框架设计涵盖了校园安全、管理、教学、环境等多个方面,构建了一个全面的校园应用生态系统。这包括智慧安全系统、校园身份识别、智能排课及选课系统、智慧学习系统、精品录播教室方案等,以支持个性化学习和教学评估。 建设内容突出了智慧安全和智慧管理的重要性。智慧安全管理通过分布式录播系统和紧急预案一键启动功能,增强校园安全预警和事件响应能力。智慧管理系统则利用物联网技术,实现人员和设备的智能管理,提高校园运营效率。 智慧教学部分,方案提供了智慧学习系统和精品录播教室方案,支持专业级学习硬件和智能化网络管理,促进个性化学习和教学资源的高效利用。同时,教学质量评估中心和资源应用平台的建设,旨在提升教学评估的科学性和教育资源的共享性。 智慧环境建设则侧重于基于物联网的设备管理,通过智慧教室管理系统实现教室环境的智能控制和能效管理,打造绿色、节能的校园环境。电子班牌和校园信息发布系统的建设,将作为智慧校园的核心和入口,提供教务、一卡通、图书馆等系统的集成信息。 总体而言,智慧校园整体解决方案通过集成先进技术,不仅提升了校园的信息化水平,而且优化了教学和管理流程,为学生、教师和家长提供了更加便捷、个性化的教育体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值