/**
* 创建实例的的方法
* @param {Object} Class
* @param {Object} params
*/
var newObj = function (Class,params){
function _new (){
if(Class._new){
Class._new.call(this,params);//改变this指向
}
}
_new.prototype = Class;
return new _new();
}
/**
* page对象
*/
var page = {
/**
* 构造函数
* @param {Object} pageSize :一页显示多少条
* @param {Object} dataTotalCount :总共数据条数
* @param {Object} mode : 分页模式 (1:不显示页数,只显示上一页下一页;2:待续);
* @param {Object} pageItem :一页显示多少条目页
* @param {Object} pageContainer :容器
* @param {Function} selfReqFun : 自定义请求函数
*/
_new : function(options){
var pageItem = options.pageItem;
var pageContainer = options.pageContainer;
var selfReqFun = options.selfReqFun;
/**
* 初始化page属性
*/
this.pageNo = options.pageNo;
this.pageSize = options.pageSize;
this.dataTotalCount = options.dataTotalCount;
this.mode = options.mode;
this.pageItem = pageItem == ""||pageItem == null ? this.mode = 1 : pageItem;
this.pageContainer = pageContainer == "" || pageContainer == null ? (function (){
var container = document.createElement("div");
container.id = "pages";
container.style.textAlign = "center";
container.align = "center";
document.getElementsByTagName("body")[0].appendChild(container);
return container;
})() : pageContainer;
this.pageCount = Math.ceil(this.dataTotalCount/this.pageSize);
this.selfReqFun = selfReqFun == null ? function(){} : selfReqFun;
this.itemStyle = options.itemStyle;
this.selfArgs = options.selfArgs;
},
/**
* 注册事件
* @param {Object} target
* @param {Object} eventName
* @param {Object} handler
* @param {Object} args
*/
attachEvent : function (target,eventName,handler,args){
var eventHandler = handler;
if(args){
eventHandler = function(e){
handler.call(args,e);
}
}
if(window.attachEvent){
target.attachEvent("on" + eventName, eventHandler );
} else{
target.addEventListener(eventName, eventHandler, true);
}
},
/**
* 检查pageNo是否合法
* @param {Object} pageNo
*/
checkPageNo : function(pageNo){
if(pageNo == "" || pageNo == null || pageNo < 1) pageNo = 1;
if(pageNo > this.pageCount)pageNo = this.pageCount;
return pageNo;
},
/**
* 创建分页条目
* @param {Object} pageNo
*/
createPageTab : function(){
var flag = false;
//动态添加属性
this.pageNo = this.checkPageNo(arguments[0]||1);
var html = '';
if(this.mode == 1){
html += '<span title="首页" class="firstPage pageSpan reqSpan" id="first"><<</span>';
html += '<span title="上一页" class="prevPage pageSpan reqSpan" id="prev"> < </span>';
html += '<span class="pageNo" id = '+this.pageNo+'>'+this.pageNo+'/'+this.pageCount+'</span>';
html += '<span title="下一页" class="nextPage pageSpan reqSpan" id="next"> > </span>';
html += '<span title="末页" class="lastPage pageSpan reqSpan" id="last">>></span>';
}
this.pageContainer.innerHTML = html;
if(this.itemStyle){
var itemStyle = this.itemStyle;
for(var i in itemStyle){
//判断对象是否为空
flag = true;
}
if (flag) {
var first = document.getElementById("first");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var last = document.getElementById("last");
first.innerHTML = "<img src="+ itemStyle.firstImg +" style='width:14px;height:14px;cursor:pointer;vertical-align:middle;'/>";
prev.innerHTML = "<img src="+ itemStyle.prevImg +" style='width:14px;height:14px;cursor:pointer;vertical-align:middle;'/>"
next.innerHTML = "<img src="+ itemStyle.nextImg +" style='width:14px;height:14px;cursor:pointer;vertical-align:middle;'/>"
last.innerHTML = "<img src="+ itemStyle.lastImg +" style='width:14px;height:14px;cursor:pointer;vertical-align:middle;'/>"
}
}
/**
* 注册点击事件
*/
var reqSpans = this.pageContainer.getElementsByTagName("span");
for(var j = 0 ; j < reqSpans.length ; j++){
var _this = reqSpans[j];
_this.style.cursor="pointer";
if((_this.className || _this.getAttribute("class")).indexOf("reqSpan") > 0){
this.attachEvent(_this,"click",this.requestEvent,this);
}
}
},
/**
* 请求函数
* @param {Object} pageNo
* @param {Object} id
*/
requestEvent : function(e){
var target = e.srcElement || e.target;
if(target.nodeName.toLowerCase() === "img"){
target = target.parentNode;
}
var id = target.id;
var pageNo = this.pageNo
pageNo = (id === "first")? 1 :
(id === "prev" && pageNo >= 1) ? this.checkPageNo(pageNo-1):
(id === "next" && pageNo <= this.pageCount) ? this.checkPageNo(pageNo+1):
(id === "last")? this.pageCount : 1;
this.selfReqFun(pageNo);
}
}
******************调用方法***********************
/**
* 创建page对象所需的属性
*/
var pageOptions = {
pageNo: 0,
pageSize: 3,
dataTotalCount: 0,//总共有多少条数据(主要针对前台分页,如果后台已经分好,则不需此属性)
mode: 1,//以怎样的方式显示分页样式
pageItem: null,//可选(如果mode不为1 这用到此属性:表示分页区一次显示多少页码)
pageContainer: null,//页面显示区域
selfReqFun: tab2Req,//请求函数(一般只需传入pageNo参数即可)
selfArgs: {},//自定义请求函数的参数
/*
* 自定义分页区页码显示样式
*/
itemStyle: {
//页码自定义样式(可选)
firstImg: "images/first.png",
prevImg: "images/prev.png",
nextImg: "images/next.png",
lastImg: "images/last.png"
}
};
newObj(page, pageOptions).createPageTab(pageNo);//简单一句话ok!
分享到:
相关推荐
JavaScript自定义分页样式.docx
PHP分页类,样式可以自定义、支持javascript分页、各种框架使用均可配置 $pageNo = isset($_REQUEST['pageNo']) ? intval($_REQUEST['pageNo']) : 1; $paginator = new paginator(18, 2, $pageNo); $paginator->...
主要为大家详细介绍了JavaScript自定义分页样式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
基于Bootstrap样式的分页组件
这是我对网上一些分页组件改编而成的,它主要的特色是支持三种传值方式(JAVASCRIPT,POST,GET),它还支持各种自定义样式,很方便呐!
实用jQuery分页特效插件jquery.pagination.js,基于jQuery实现,可根据pageselectCallback函数callback调用通过ajax调用动态数据,目前的方法是生成JSON数据到JS文件,调用的数据是JSON格式数据,缺点是数据是一次性...
8.2 不用CSS实现链接样式的变化 8.3 让链接没有下划线 8.4 去掉超链接点击时的框 8.5 显示页面中所有链接 8.6 一个链接打开两个地址 8.7 为链接提供下拉菜单 8.8 按钮链接 8.9 弹出鼠标所指的链接地址 8.10 链接的...
对ScrollView的封装,可以很方便的实现水平,垂直分页轮播效果.而且可以自定义分页宽高,和侧边View的旋转,透明度,大小等. 对于原生的ScrollView只支持水平的整屏的分页,而且我看github上也没有相应的组件.所以就自己...
第1章 页面特效 ...1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 ...22.15 用prototype实现JavaScript的继承 22.16 JavaScript制作哈希表 第23章 其他技巧及特效 23.1 ...
SYSTableSorter多功能插件是基于前端JavaScript开发出来的不依赖任何第三方库的原生js插件,现已更新到3.1版本,功能更强大,浏览器支持更全面。 支持分页,排序,列表拖拽,支持多条件搜索,Excel文档下载(当前页和...
实例355 用JavaScript控制XML文档的分页显示 565 实例356 通过操作XML数据岛实现添加、删除留言信息 567 第15章 JavaScript与ASP结合 573 15.1 弹出窗口/对话框控制 574 实例357 关闭弹出窗口时刷新父窗口...
目录: 第1章 窗口/框架与导航条设计 1 1.1 弹出窗口控制 2 ...实例303 利用CSS样式分页打印 479 11.5 套打邮寄产品单 482 实例304 打印汇款单 482 实例305 打印快递单 484 实例306 打印信封 485 第...
jQuery是一个非常不错的JavaScript脚本库,之前我们也分享...而且,这款jQuery分页插件提供了多种样式风格,你也可以自己利用CSS来定义不同的分页样式。 在线演示 源码下载 3、纯CSS3实现自定义T[......] 阅读全文>>
ReYoPrint是一个ActiveX WEB打印控件(96k,支持windows7及IE8,带数字签名), 这个控件主要实现对打印参数的控制,ReYoPrint使用户通过JavaScript脚本可以控制分页,页眉页脚,页边距,打印方向,自定义纸张,直接...
支持预览,WEB打印,页码/目录,自定义页眉页脚。 前初步皆可生成PDF,初步可配套使用chrome headless和wkhtmltopdf命令行PDF生成工具。 泊坞窗。可快速构件你的在线PDF的打印生成服务 预览案例 bug:苹果手机预览...
3、自定义分页标签实现(24种样式随意切换) 4、拦截器功能实现 5、整合前端框架 EasyUi以及Bootstrap 6、用户模块信息添加、修改、删除、多条件分页查询、激活、预览、用户账号异步校验、异步加载部门以及职位信息 ...
9.2.2 通过JavaScript修改样式 9.2.3 通过单击滑移图像 9.2.4 添加滑移效果 9.2.5 显示操作图标 9.3 放大图像 9.3.1 隐藏大幅封面 9.3.2 更有价值的标记 9.3.3 为封面放大...
结合金额、数字的自定义格式化和货币符号的自定义功能,可开发专业性的财会、金融网站。 ★支持列的Ajax联动功能。特别定义了OnCallBack事件,开发人员能非常简单地实现Ajax联动,而页面不需要刷新。(图A-类别变化...
118.如何在DataGrid控件中实现自定义分页功能 119.如何在DataGrid中弹出一个详细信息窗口-示例1 119.如何在DataGrid中弹出一个详细信息窗口-示例2 120. 如何在DataGrid控件中添加CheckBox控件列 121.如何为...