jQuery插件实例六:jQuery 前端分页
先来看看效果:
对于前端分页,关键是思路,和分页算法。本想多说两句,可又觉得没什么可说的,看代码吧:
如何使用?
$("#pging").zPagination({
'navEvent':function(){
console.log('取数据Ajax');
}
});
JS代码
//分页Pagination
; (function ($, window) {
var defaults = {
rowCount: 400, //总数据行数
navPage: 10, //每次显示多少页导航
pageSize: 10, //每页多少条数据
currentPage: 20, //当前是第几页
showRowsCount: true, //是否显示总数据数
showGoto: false, //是否有跳转功能
navUrl: '', //点击页后所跳转到的URL,用于非Ajax()方式:/Home/Index.aspx?pageIndex=
ajaxUrl: '', //点击页后从哪个URL取数据,用于Ajax()方式:/Home/Index
isAjaxData: true, //是从Ajax取数据还是非Ajax取数据
divClass: 'z_paging', //外围DIV的Class,其下有.z_paging a , .z_paging a:hover , .z_paging>.z_paging_current
navEvent: ''//点击导航页后所要执行的事件function(){...},通常和isAjaxData==true联用。
};
$.fn.zPagination = function (options) {
$this = $(this);
var ops = $.extend({}, defaults, options);
var _pageCount = 0;
var _startNav = 0;
var _endNav = 0; //初始化参数
function initParameter() {
_pageCount = (ops.rowCount % ops.pageSize == 0) ? ops.rowCount / ops.pageSize : parseInt(ops.rowCount / ops.pageSize) + 1;
if (ops.currentPage <= parseInt(ops.navPage / 2)) {
_startNav = 1;
} else {
_startNav = ops.currentPage - parseInt(ops.navPage / 2); //(30-(10/2)==25)
} _endNav = _startNav + ops.navPage;
if (_endNav > _pageCount) {
_endNav = _pageCount;
_startNav = _endNav - ops.navPage;
}
if (_startNav < 1) {
_startNav = 1;
} //生成DOM元素
if (ops.isAjaxData == true) {
generateAjaxDom();
} else {
generateDom();
}
}; //网址方式加载数据 isAjaxData==false 时执行
function generateDom() {
$this.html('').addClass(ops.divClass);
$('<a href=' + ops.navUrl + '1></a>').html(1).appendTo($this);
_startNav++;
if (_startNav != 2) {
$('<span></span>').html('...').appendTo($this);
}
while (_startNav < _endNav) {
$('<a href=' + ops.navUrl + _startNav + '></a>').html(_startNav).appendTo($this);
_startNav++;
}
_startNav--; if (_endNav < _pageCount) {
$('<span></span>').html('...').appendTo($this);
}
if (_startNav < _endNav && _endNav <= _pageCount) {
$('<a href=' + ops.navUrl + _endNav + '></a>').html(_pageCount).appendTo($this);
}
findCurrentNum();
} //通过Ajax方式加载数据 isAjaxData==true 时执行
function generateAjaxDom() {
$this.html('').addClass(ops.divClass);
$('<a href="javascript:void(0);"></a>').html(1).appendTo($this);
_startNav++;
if (_startNav != 2) {
$('<span></span>').html('...').appendTo($this);
}
while (_startNav < _endNav) {
$('<a href="javascript:void(0);"></a>').html(_startNav).appendTo($this);
_startNav++;
}
_startNav--; if (_endNav < _pageCount) {
$('<span></span>').html('...').appendTo($this);
}
if (_startNav < _endNav && _endNav <= _pageCount) {
$('<a href="javascript:void(0);"></a>').html(_pageCount).appendTo($this);
} //给每个<a />添加事件
function initAjaxData() {
$this.find('a').bind('click', function () {
try {
ops.currentPage = parseInt($(this).html());
if (typeof (ops.navEvent) == 'function') {
ops.navEvent();
initParameter(); //重新生成页数导航条,放在这里,放在这里,是为了避免因参数没传对,而出现看见导航页变了,而数据没变的情况
}
} catch (e) { }
});
}
initAjaxData();
findCurrentNum();
} //找出当前页
function findCurrentNum() {
$this.find('a').each(function () {
if (parseInt($(this).html()) == ops.currentPage) {
$(this).addClass('z_paging_current');
}
});
appendEle();
} //附加元素 是否显示总数据数
function appendEle() {
if (typeof (ops.showRowsCount) == 'boolean') {
$('<span class="z_rows_count"></span>').html('总数:' + ops.rowCount).appendTo($this);
}
} initParameter(); //获取当前是第几页 调用方式:this.currentPage
this.currentPage = function () {
return ops.currentPage();
}; return this;
};
})(jQuery, window);
CSS
/*zPagination Begin*/
.z_paging
{
}
.z_paging a, .z_paging span
{
float: left;
display: inline-block;
vertical-align: text-bottom;
text-align: center;
line-height: 34px;
background-color: #fff;
}
.z_paging a
{
cursor: pointer;
border-radius: 3px;
border: 1px solid #e5e5e5;
padding: 0 12px;
margin: 0 2px;
text-decoration: none;
color: #734ba9;
}
.z_paging a:hover
{
background-color: #6699ff;
color: #fff;
}
.z_paging > .z_paging_current
{
background-color: #e5e5e5;
}
.z_paging > .z_rows_count
{
border-radius: 3px;
border: 1px solid #e5e5e5;
padding: 0 12px;
margin: 0 2px;
text-decoration: none;
color: #734ba9;
}
/*zPagination End*/
jQuery插件实例六:jQuery 前端分页的更多相关文章
- jQuery插件实例五:手风琴效果[动画效果可配置版]
昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...
- 【jQuery插件】用jQuery Masonry快速构建一个pinterest网站布局(转)
[jQuery插件]用jQuery Masonry快速构建一个pinterest网站布局 时间:2011年03月21日作者:愚人码头查看次数:29,744 views评论次数:25条评论 前段时间领导 ...
- 转 jquery插件--241个jquery插件—jquery插件大全
241个jquery插件—jquery插件大全 jquery插件jqueryautocompleteajaxjavascriptcoldfusion jQuery由美国人John Resig创建,至今 ...
- 精美jQuery插件及源码 前端开发福利
jQuery是一个非常不错的javascript框架,很多前端开发者喜欢的原因不仅是因为jQuery使用起来方便,更重要的是因为它的插件很多,我们可以将这些插件应用到自己的项目中去.下面这些精美的jQ ...
- 转:精美jQuery插件及源码 前端开发福利
原文来自于:http://www.html5tricks.com/pretty-jquery-plugin.html jQuery是一个非常不错的javascript框架,很多前端开发者喜欢的原因不仅 ...
- 一个很简单的jQuery插件实例教程(菜鸟级)
很多公司的前端设计开发人员都是女孩子,而这些女孩子很多JavaScript技能都不是很好.而前端开发过程中,JavaScript技能又是必不可少的.所以,如果前端小MM正在为某个JavaScript效 ...
- jQuery插件实例一:年华时代插件Alert对话框
在工作中使用jQuery插件相信对于程序员来说非常普遍,在网络上也有很多优秀的插件可供大家使用,功能非常强大.在之前用过的一些插件中,有些太过追求功能的强大和可配置性,造成使用的复杂度上升.个人认为与 ...
- 网站开发常用jQuery插件总结(六)关键词说明插件cluetip
我们开发的网站,总有它一定的用途.如企业站用来宣传企业或展示产品,技术站用来分享自己的思路和经验.既然网站有了它的用途,那么就拥有了它本身的关键词(关键词说明网站的主要内容).例如企业站的关键词大部分 ...
- JQUERY插件学习之jQuery UI
jQuery UI:http://jqueryui.com/ jQuery UI介绍: jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互 ...
随机推荐
- VMware虚拟机屏幕大小只有400,800怎么办如何解决
一,VMware中Linux虚拟机屏幕分辨率调整之前安装修改Linux分辨率命令行 在VMware中安装Linux虚拟机后,屏幕分辨率通常默认设置为800x600,并且不能通过“屏幕分辨率首选项”窗口 ...
- 程序员必知的8大排序(二)-------简单选择排序,堆排序(java实现)
程序员必知的8大排序(一)-------直接插入排序,希尔排序(java实现) 程序员必知的8大排序(二)-------简单选择排序,堆排序(java实现) 程序员必知的8大排序(三)-------冒 ...
- cool--music
1.三年的赌注 2.非酋 3.Swan Song 4.Better Than A Hallelujah
- spring boot整合双持久层框架jpa、mybatis
公司之前用的是spring boot + jpa,但由于jpa无法完美的解决某些动态查询问题,就使用的jdbcTemplate 动态封装SQL,由于代码相对复杂,可读性差,现准备再引入mybatis. ...
- 使用node.js的开发框架express创建一个web应用
1.1.1:搭建环境 1.安装Express 按键:Windows+R=>输入cmd,打开命令行,输入 npm install -g express@3 我们需要用全 ...
- zoj 2060 Fibonacci Again(fibonacci数列规律、整除3的数学特性)
题目链接: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2060 题目描述: There are another kind ...
- Dockerfile构建镜像
Dockerfile构建镜像的步骤: 从基础镜像运行一个容器 执行一条指令,对容器做出修改 执行类似docker commit的操作,提交一个新的镜像层 再基于刚提交的镜像运行一个新的容器 执行Doc ...
- OpenStack的架构详解[精51cto]
OpenStack既是一个社区,也是一个项目和一个开源软件,它提供了一个部署云的操作平台或工具集.其宗旨在于,帮助组织运行为虚拟计算或存储服务的云,为公有云.私有云,也为大云.小云提供可扩展的.灵活的 ...
- 【代码笔记】iOS-UIAlertView3秒后消失
一,效果图. 二,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the ...
- springboot项目中js、css静态文件路径访问
springboot静态文件访问的问题,相信大家也有遇到这个问题,如下图项目结构. 项目结构如上所示,静态页面引入js.css如下所示. 大家肯定都是这样写的,但是运行的话就是出不来效果,图片也不显示 ...