本文实例讲述了jQuery实现的分页功能。分享给大家供大家参考,具体如下:
<强> 1,分页栏HTML码
& lt; div class=" g-cf g-pagerwp”比;
& lt; div类=癵-pager”比;
& lt;/div>
& lt;/div>
之前
<强> 2,CSS样式文件
.g-cf:{后明确:;内容:";显示:表;}
.g-cf{变焦:1;}/*分页*/.g-pager {text-align:中心;颜色:# 111111;字体:12 px/1.5 em Arial,大河马字体;浮:权利;}
.g-pager,。g-pager输入{光标:指针;边界:固体1 px # 0 f71be;填充:1 px 4 px;颜色:# 0 f71be;保证金:0 2 px;vertical-align:中间;}
.g-pager a.cur。g-pager答:悬停{background - color: # 0 f71be;颜色:# fff}
.g-pager。没有{边框颜色:# A3A3A3;颜色:# A3A3A3;background - color: # E4F2F9}
.g-pager跨度{margin-right: 10 px;}
.g-pager输入{光标:违约;宽度:28 px;填充:1 px 2 px;}
.g-pagerwp{高度:23 px;行高:23 px;填充:5 px;margin-bottom: 10 px;边界:1 px固体# DDDDDD;}
.g-pagerwp .g-btn {vertical-align:顶级}
之前
<强> 3,JS脚本文件
①引用JQuery和分页脚本
& lt;脚本src=" https://www.yisu.com/js/common/jquery-1.6.2.js " type=" text/javascript祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/js/jquery.PageBar.js " type=" text/javascript祝辞& lt;/script>
之前
②编写jquery.PageBar.js脚本
/* * * * * * * * * * * * * * * * * * * * * * * * * *///JQuery分页栏/* * * * * * * * * * * * * * * * * * * * * * * * * */.fn美元。pageBar=function(选项){
var款={
PageIndex: 1、
页大小:15日
TotalPage: 0,
RecordCount: 0,
showPageCount: 4>
$(文档)时函数(){//设置分页信息
var pageOptions={
AllowPaging:没错,
PageIndex: 1、//设置当前页码//页大小:15日设置分页大小
RecordCount: 1092//设置数据总数
TotalPage: 73//设置总页数
showPageCount: 4
onPageClick:函数(pageIndex) {
警报(“您点击了第" +方法(pageIndex + 1) +“页”);//自定义您的翻页事件
返回错误;
}
}//初始化分页栏
$('。g-pagerwp .g-pager”)。css(“可见性”,“可见”).pageBar (pageOptions);
})
之前
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery扩展技巧总结》,《jQuery表格(表)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
