通用分页(Jquery版)
2024-10-19 04:41:46
1、简单定义下样式
<style type="text/css">
.fanye
{
color: blue;
margin-right: 15px;
text-decoration: none;
}
.unUse
{
color: gray;
}
</style>
2、准备一个Div用来渲染分页按钮
<body>
<h1 id="result">
当前页码:[ 1 ]</h1>
<div id="pager">
</div>
</body>
3、编写分页功能
(function ($) {
$.fn.pager = function (options) {
var defaults = {
pageNum: 1,
pageCount: 1
};
var opts = $.extend(true, defaults, options);
//return this.each(function () {
return $(this).empty().append(renderPager(parseInt(opts.pageNum), parseInt(opts.pageCount), opts.btnCallback));
//});
}; function renderPager(pageNum, pageCount, btnCallback) {
var $pager = $('<div id="pageA"></div>');
$pager.append(renderBtn('首页', pageNum, pageCount, btnCallback)).append(renderBtn('上一页', pageNum, pageCount, btnCallback));
$pager.append(renderBtn('下一页', pageNum, pageCount, btnCallback)).append(renderBtn('尾页', pageNum, pageCount, btnCallback));
//$pager.append('<span></span>');
return $pager;
} function renderBtn(btn, pageNum, pageCount, btnCallback) {
var $Button = $('<a href="javascript:;" class="fanye">' + btn + '</a>');
var currentPage = 1;
switch (btn) {
case "首页":
currentPage = 1;
break;
case "上一页":
currentPage = pageNum - 1;
break;
case "下一页":
currentPage = pageNum + 1;
break;
case "尾页":
currentPage = pageCount;
break;
}
if (btn == "首页" || btn == "上一页") {
pageNum <= 1 ? $Button.addClass("unUse") : $Button.click(function () { btnCallback(currentPage,pageCount); });
}
else {
pageNum >= pageCount ? $Button.addClass("unUse") : $Button.click(function () { btnCallback(currentPage, pageCount); });
}
return $Button;
}
})(jQuery);
4、调用
<script type="text/javascript" language="javascript"> $(document).ready(function () {
var currentPage = 1;
var pageCount = 10;
pageBtnCallBack(currentPage, pageCount);
}); var pageBtnCallBack = function (currentPage, pageCount) {
$("#pager").pager({
pageNum: currentPage,
pageCount: pageCount,
btnCallback: pageBtnCallBack
});
$("#result").html("当前页码:[ " + currentPage + " ]");
}; </script>
最新文章
- 多线程异步导出excel
- android 弹出AlertDialog的学习案例
- Day Tip:SharePoint 2013 *.ascx.g.cs文件
- 数组、单链表和双链表介绍 以及 双向链表的C/C++/Java实现
- CSS媒体查询(@media)
- 轻松大幅度降低 Meteor App 的首屏加载时间
- 转:CSS布局:Float布局过程与老生常谈的三栏布局
- LeetCode 232 Implement Queue using Stacks
- CentOS 添加/绑定 IP
- C++中使用stringstream简化类型转换
- java中数据流的简单介绍
- Shader的使用
- DBNull
- 要引入java吸管工具
- GIMP也疯狂之动态图的制作(二)
- js前端实现多图图片上传预览
- Java 开发常用工具
- [qemu][kvm] 在kvm嵌套kvm的虚拟机里启动kvm加速
- 关于<;checkbox>;checked默认问题
- MySql安全模式的关闭和开启
热门文章
- 16Aspx.com-PHP企业整站源码 景观石材大理石类织梦模板 含手机移动端 完整源码 APP+PC
- 维生素d
- Light oj 1125 - Divisible Group Sums (dp)
- Linux运维:CentOS6和7的区别
- Linux内核的引导
- HTML5 Canvas 绘制加拿大枫叶旗
- 聚合数据Android SDK 12306火车票查询订票演示示例
- maximal-rectangle——找出最大矩形的面积
- Node.js学习笔记(5)——关于child_process模块
- c#中使用ABCpdf处理PDF,so easy