基于jquery扩展漂亮的分页控件(ajax)
分页控件式大家在熟悉不过的控件,很多情况下都需要使用到分页控件来完成列表数据加载操作,在很多分页控件中有的编写麻烦,有的应用扩展比较复杂,有的分页控件样式比较丑陋,有的分页控件用户体验操作比较简单等等一些不符合自己的要求,在此之际为了项目需求,自己扩展一个分页控件js类,以便日后方便重用,现在分享这个控件。
分页控件分解:
1。初始化对象
2。分页控件绑定前台显示
3。异步调用获取数据
4。单击按钮回调事件
5。按钮单击事件
6。文本框输入事件
7。点击确定搜索事件。
Html代码:
<div class="pageDiv"></div>
Css样式代码:
/*分页*/
div div.pageDiv{clear:left;float:none;text-align:center;margin:0px auto;padding:20px 0;border:0px;font-size:14px;}
.pageDiv a,.pageDiv em{border: 1px solid #ccc;margin:0px 2px;padding: 2px 6px;font-style:normal;font-size:12px; border-radius:2px;}
.pageDiv a:hover{background-color:#B60000;color:#fff;}
.pageDiv font{line-height:23px;margin:0 10px 0 0}
.pageDiv a.current{background-color:#B60000;color: #FFFFFF;text-decoration: none;}
.pageDiv a.last{margin-right:20px;}
.pageDiv input {border: 1px solid #CCCCCC; margin: 0 5px;width: 40px;}
.pageDiv i { font-style: normal;}
.pageDiv b{font-weight:normal;border:solid 1px #ccc;border-radius:4px;padding:2px 6px;cursor:pointer;margin:0px 5px;}
Js代码:
1。自定义分页控件类
//分页控件 http://www.naoqiu.com
var Pager = function (config, page, fun_load, fun_error) {
var _obj;
var _this = this;
var _pageIndex = 1;
var _pageSize = 20;
var _total = 0;
var _allpage = 1;
var _ajaxUrl = '';
var _config;
var _load_img = true;
//初始化对象
this.init = function () {
if (page == undefined) return;
_obj = page.obj;
//是否显示加载推片
if (page.load_img) _load_img = page.load_img;
//分页设置
if (page.index) _pageIndex = page.index;
if (page.size) _pageSize = page.size;
if (page.total) _total = page.total;
_ajaxUrl = page.url;
_config = config;
//调用加载控件
_this.click_callback({ index: _pageIndex, size: _pageSize, total: 0 });
};
//显示
this.show = function () {
if (_obj == undefined) return;
_allpage = parseInt(_total / _pageSize) + (_total % _pageSize == 0 && _total > 0 ? 0 : 1);
//设置开始位置,和中间页中止位置
var sta = _pageIndex < 4 ? 1 : _pageIndex - 1;
var end = sta + 3 < _allpage ? sta + 3 : _allpage;
if (sta + 5 >= _allpage) {
sta = _allpage - 4 > 0 ? _allpage - 4 : 1;
}
//设置分页控件字符串
var html = ' <font>总共' + _total + '条 共 ' + _allpage + ' 页 ' + _pageSize + ' 条/页</font>';
html += ' <a href="javascript:void(0)" class="first">首页</a>';
html += ' <a href="javascript:void(0)" class="pre">上一页</a>';
for (; sta <= end; sta++) {
html += ' <a href="javascript:void(0)"' + (_pageIndex == sta ? ' class="current"' : '') + '>' + sta.toString() + '</a>';
}
if (end < _allpage) {
html += ' <a href="javascript:void(0)" ' + (end + 1 < _allpage ? 'class="omit">...</a>' : '>' + _allpage + '</a>');
}
html += ' <a href="javascript:void(0)" class="next">下一页</a>';
html += ' <a href="javascript:void(0)" class="last">尾页</a>';
html += ' <i>转到第</i><input type="text" maxlength="8" /><i>页</i><b>确定</b>';
_obj.html(html);
//设置控件事件
_obj.find('a').click(function () {
_this.click_load($(this));
});
//文本框输入事件
_obj.find('input').keyup(function (e) {
if (e.keyCode == 13) {
_obj.find('b').click();
} else if (e.keyCode < 48 || e.keyCode > 57) {
$(this).val($(this).val().match(/[1-9]\d*/i));
}
});
//搜索
_obj.find('b').click(function () {
if (_obj.find('input').val().isNumber()) {
var num = parseInt(_obj.find('input').val());
_pageIndex = num < 1 ? 1 : (num > _total ? _total : num);
_this.click_callback({ index: _pageIndex, size: _pageSize, total: _total });
} else
showMessage("请输入数字格式!");
});
}
//获取数据
this.getData = function () {
var _data = 'index=' + _pageIndex + '&size=' + _pageSize + '&total=' + _total;
if (_config) {
for (var p in _config) {
_data += '&' + p + '=' + encodeURIComponent(_config[p]);
}
}
return _data;
}
//单击按钮回调事件
this.click_callback = function (page) {
//当前可增加加载等待图片
//判断是是否需要异步请求
if (_ajaxUrl.length > 0) {
if (_load_img) _obj.before('<img src="/img/loading.gif" class="loading_img" />');
requestAPI(_ajaxUrl, _this.getData(), function (json) {
_obj.parent().find('.no_data').remove();
//清除加载图片
if (_load_img) _obj.parent().find('.loading_img').remove();
if (fun_load != undefined)
fun_load(json);
//清除加载等待
_total = json == null || json.total == null ? 0 : json.total;
if (_total == 0) {
_obj.before('<p class="no_data">暂无数据</p>');
} //重新设置控件
_this.show();
}, function (json) {
if (fun_error)
fun_error(json);
else
showMessage("加载数据有误,请重新刷新页面!");
});
} else {
if (fun_load != undefined) fun_load();
//清除加载等待
//重新设置控件
_this.show();
}
}
//按钮单击事件
this.click_load = function (obj) {
var _css = obj.attr('class');
switch (_css) {
case 'first':
{
if (_pageIndex == 1) return;
_pageIndex = 1;
} break;
case 'pre':
{
if (_pageIndex == 1) return;
_pageIndex = _pageIndex - 1;
} break;
case 'next':
{
if (_pageIndex == _allpage) return;
_pageIndex += 1;
} break;
case 'last':
{
if (_pageIndex == _allpage) return;
_pageIndex = _allpage;
} break;
case 'omit': _pageIndex += 1; break;
default: _pageIndex = parseInt(obj.html()); break;
}
//回调事件
_this.click_callback({ index: _pageIndex, size: _pageSize, total: _total });
}
//加载对象
_this.init();
} //异步提交数据
function requestAPI(requestURL, requestData, successFun, errorFun) {
var jsonFun = new JsonFun(successFun, errorFun);
$.ajax({
url: requestURL,
cache: false,
type: "POST",
data: requestData + "&n=" + new Date().getSeconds(),
dataType: "json",
success: jsonFun.success,
error: jsonFun.error
});
}
2. 示例:
var _key = $('.search_txt').val() == "请输入产品名称" ? "" : $('.search_txt').val();
var pager = new Pager({ type: "list_shop", key: _key, protype: $('.select_type span font').attr('_id') }, {
url: _url,
obj: $('.pageDiv')
}, function (json) {
//绑定数据
var html = '';
$.each(json.list, function (i, item) {
html += set_row(item);
});
$('.con .content ul').remove();
$('.con .content ol').after(html);
//上下架函数
$('.content .bt_state').click(function () {
fun_info_state($(this).parent().parent().attr('_id'), $(this).attr('_state') == "1" ? 2 : 1);
});
//删除函数
$('.content .bt_del').click(function () {
fun_info_del($(this).parent().parent().attr('_id'));
});
});
3.示例图片
转载请标注来源。
基于jquery扩展漂亮的分页控件(ajax)的更多相关文章
- 基于存储过程的MVC开源分页控件--LYB.NET.SPPager
摘要 现在基于ASP.NET MVC的分页控件我想大家都不陌生了,百度一下一大箩筐.其中有不少精品,陕北吴旗娃杨涛大哥做的分页控件MVCPager(http://www.webdiyer.com/)算 ...
- 基于存储过程的MVC开源分页控件
基于存储过程的MVC开源分页控件--LYB.NET.SPPager 摘要 现在基于ASP.NET MVC的分页控件我想大家都不陌生了,百度一下一大箩筐.其中有不少精品,陕北吴旗娃杨涛大哥做的分页控件M ...
- 基于avalon+jquery做的bootstrap分页控件
刚开始学习avalon,项目需要就尝试写了个分页控件Pager.js:基于BootStrap样式这个大家都很熟悉 在这里推荐下国产前端神器avalon:确实好用,帮我解决了很多前端问题. 不多说了,代 ...
- 基于Bootstrap仿淘宝分页控件实现
.header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...
- 基于jquery 封装的 select 小控件,解决 IE6 7 8里 select 边框 高度 无法遮挡等问题
一.基本原理 select控件在浏览器中是个永远的痛,不同的版本解析出来的可谓五花八门.主要有以下问题: 1,IE6中无法设置高度,Z INDEX永远在最上,无法被其它层遮挡 2,IE7中可以设置高度 ...
- 基于jquery扩展漂亮的CheckBox
大家都知道默认的html复选框控件样式可定义相当有限,无法满足大多用户的美观度.今天跟大家一起分享前一段时间自己编写的CheckBox控件.喜欢的朋友可以拿去使用,有什么好的建议希望你给我留言.废话不 ...
- 基于KO+bootstrap+MVC的分页控件
JS: /// <reference path="../knockout-3.2.0.js" /> var ViewModel = function (data) { ...
- 如何Windows分页控件中增加统计功能
在我的博客里面,很多Winform程序里面都用到了分页处理,这样可以不管是在直接访问数据库的场景还是使用网络方式访问WCF服务获取数据,都能获得较好的效率,因此WInform程序里面的分页控件的使用是 ...
- ajax 分页控件,基于jquery
/* 分页插件,依赖jQuery库 version: 1.1.0 author: Harrison Cao release date: 2013-09-23 相对 v1.0版本 修正了分页居中 使用方 ...
随机推荐
- Python Requests库:HTTP for Humans
Python标准库中用来处理HTTP的模块是urllib2,不过其中的API太零碎了,requests是更简单更人性化的第三方库. 用pip下载: pip install requests 或者git ...
- Linux命令面试常考的简单汇总
1.显示日期与时间的命令:date 2.显示日历的命令:cal 3.简单好用的计算器:bc 4.热键“命令补全或文件补齐”:Tab 5.热键“中断目前程序”:Ctrl+C 6.热键“键盘输入结束(En ...
- [置顶] Maven多模块项目 eclipse热部署 Maven项目实现 tomcat热部署 二
最近看到有好多童鞋比较热衷热部署,特别是多模块的项目,其实这热部署如果多模块比较大资源,容易内存溢出或者电脑卡住,并不建议这么做. 不过了解下也没有关系,这里我就在说说热部署的另外一种方法,因为我之前 ...
- Linux配置vpn
配置如下
- OWIN katana注册中间件的几种写法
首先特别说明下在startup中注册完中间件的两个注意事项,看到有人写的东西有误导人的作用.关于startup启动发现类的内容,参照这里 http://www.asp.net/aspnet/overv ...
- apache开源项目--Sirona
Apache Sirona 为 Java 应用程序提供了一个简单但可扩展的监控解决方案. apache / sirona
- 【转】 Homebrew – OSX下简单的包管理系统
很多linux用户很喜欢 (Debian/Ubuntu)系列的apt包管理系统和(Redhat/Fedora)系列的yum包管理系统. 包括Windows用户都有多种方便的软件管理工具,如:360软件 ...
- 自适应的CSS代码片段(常用)
/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 32 ...
- 理解dojo.require机制
转自:http://blog.csdn.net/dojotoolkit/article/details/5935844 Dojo 提供了一个非常强大的javascript控件库. 在使用dojo之前, ...
- C# 中的 ref 和 out 的意义和使用方法
原文C# 中的 ref 和 out 的意义和使用方法 向方法传递一个实参时,对应的形参会用实参的一个副本来初始化,不管形参是值类型(例如 int),可空类型(int?),还是引用类型,这一点都是成立的 ...