jPage.js分页
jPage.js插件使用文档
这一款插件主要是为了bootstrap原生的分页功能效果不理想而诞生的一款插件。
jPage.js代码更新地址为:https://github.com/leslieSie/font-end-tools/tree/master/jquery/bootstrapCss/jPage
*. 插件支持的配置
pageNo:这个参数主要是用来指定当前的页码的,传入的类型为number
count:这个参数是标识总的数据条数,传入的类型为number
pageSize:这个参数是指定每页要渲染的数据条数,这个与count参数配合可以最终确定页数,传入类型为number
color:这个为主题颜色,目前只支持默认的浅蓝色主题,所以现在的无需传参
btnName:这个参数是用来改变确认按钮的文本的,默认的文本是“确定”
skipPart:配置是否支持分页插件的拓展部分,默认值为true
showNum:这个参数主要是用来设定默认分页插件的显示页码数的,默认值为6,传入的类型为number
*. 插件的依赖
这一款插件是依赖于bootstrap、Jquery来实现的,所以在引入插件的同时必须保证bootstrap和jquery已经引入
*. 一个简单的使用案例
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script type="text/javascript" src="jPage.js"></script>
<script type="text/javascript">
$("#test").page({count:70,pageSize:3,skipPart:true});
</script>
</body>
</html>
这样就生成了一个总计24页,每页有3条数据的分页组件
*. 插件与ajax的交互
这款插件目前没有在内部实现ajax的交互方式,但是我们可以通过在外添加事件绑定来实现这个需求
例如:要为确定按钮添加一个ajax事件我们可以这样做
$(document).on('click','#test .pagination_search',function(){
if($(document).find("#test .pagination_change_page").val()==""){
alert("跳转页码不能为空");
}else{
var num=parseInt($(document).find("#test .pagination_change_page").val());
$("#test").page({count:12,pageNo:num,pageSize:3,skipPart:true});
}
});
$(document).on("click","#test .pagination li",function(){
var num=$(this).attr("num");
if($(this).attr("class")=="disabled"){
return false;
}
if(num==0 || num==(count+1)){
}else{
$("#test").page({count:12,pageNo:num,pageSize:3,skipPart:true});
}
});
这样我们就实现了ajax交互的功能
以下为jPage-1.2.js版本的详细代码:
(function($){ | |
$.fn.page=function(options){ | |
var defaultOptions={ | |
pageNo:1, //当前页码,用于点亮对应的页码 | |
pageSize:10, //每页渲染的最大页码数 | |
count:0, // | |
showNum:6, //初始化的显示页码,默认的是显示到6页 | |
color:'orange', | |
btnName:'确定', //按钮名称 | |
skipPart:true, //跳转模块是否添加 | |
fontSize:16, | |
// statisMsgPart:false, //静态信息显示,默认为不显示 | |
} | |
var that=this; | |
var settings=$.extend({},defaultOptions,options); | |
var pageCount=0; | |
$(this).empty(); | |
//主函数 | |
var main=function(){ | |
var val=ValidatePageCount(); | |
if(val==false){ | |
return false; | |
} | |
var pageNo=parseInt(settings.pageNo); | |
var pageSize=parseInt(settings.pageSize); | |
var count=parseInt(settings.count); | |
if(count%pageSize==0){ | |
pageCount=count/pageSize; | |
}else{ | |
pageCount=parseInt(count/pageSize)+1; | |
} | |
var showNum=parseInt(settings.showNum); | |
var pageJson=PageAlgorithm(pageNo,pageSize,pageCount,showNum); | |
PageDraw(pageJson); | |
$(that).off(); | |
}; | |
main(); | |
//按键触发 | |
// $(document).on('click','.pagination li',function(e){ | |
// //alert(2); | |
// var num=$(this).attr("num"); | |
// console.log("NUM:"+num); | |
// if($(this).attr("class")=="disabled"){ | |
// return false; | |
// } | |
// if(num==0 || num==(settings.count+1)){ | |
// }else{ | |
// var json=PageAlgorithm(parseInt(num),settings.pageSize,pageCount,settings.showNum); | |
// //console.log(json); | |
// PageDraw(json); | |
// $(".pagination li").off("click"); | |
// } | |
// }); | |
// $(document).on('click','.pagination_search',function(){ | |
// //alert(3); | |
// //输入为空不做处理 | |
// if($(that).find(".pagination_change_page").val()==""){ | |
// alert("跳转页码不能为空"); | |
// }else{ | |
// var num=parseInt($(that).find(".pagination_change_page").val()); | |
// var json=PageAlgorithm(parseInt(num),settings.pageSize,pageCount,settings.showNum); | |
// PageDraw(json); | |
// } | |
// }); | |
//验证传入数据是否符合渲染规则 | |
function ValidatePageCount(){ | |
if(settings.pagNo<0 || settings.pageSize<0 || settings.count<0){ | |
console.error("请检查 pagNo,pageSize,count这个三个参数是否存在非法输入"); | |
return false; | |
} | |
//如果showNum为为非法数值,那么设置为默认值 | |
if(settings.showNum<0){ | |
setting.showNum=6; | |
} | |
} | |
//分页渲染 | |
function PageDraw(json){ | |
if(parseInt(settings.count)>0){ | |
var html='<ul class="pagination">'; | |
for(var i in json.algorithm){ | |
if(json.algorithm[i].status=="disabled"){ | |
html+='<li class="'+json.algorithm[i].status+'" num="'+json.algorithm[i].num+'" ><a href="javascript:;">'+json.algorithm[i].text+'</a></li>'; | |
} | |
else if(json.algorithm[i].status=="active"){ | |
html+='<li class="'+json.algorithm[i].status+'" num="'+json.algorithm[i].num+'" ><a href="javascript:;">'+json.algorithm[i].text+'</a></li>'; | |
}else if(json.algorithm[i].num=="more"){ | |
html+='<li class="disabled" num="'+json.algorithm[i].num+'" ><a href="javascript:;">'+json.algorithm[i].text+'</a></li>'; | |
}else{ | |
html+='<li num="'+json.algorithm[i].num+'" ><a href="javascript:;">'+json.algorithm[i].text+'</a></li>'; | |
} | |
} | |
$(that).html(html); | |
if(settings.skipPart==true){ | |
$(that).find(".pagination").append('<span class="text-muted" style="margin:5px;margin-left:10px;display:inline-block;font-size:18px;font-size:'+settings.fontSize+'px">共有'+pageCount+'页/'+settings.count+'个</span><div style="display:inline-block" name="changePage"><span class="text-muted" style="margin:5px;margin-left:0px;display:inline-block;font-size:'+settings.fontSize+'px">,到第</span> <input type="number" min="1" max="'+pageCount+'"class="pagination_change_page" style="width:45px;border-color:#ddd"> <span class="text-muted" style="margin:5px;margin-left:10px;display:inline-block;font-size:font-size:'+settings.fontSize+'px">页</span> <button class="btn btn-default btn-sm pagination_search">'+settings.btnName+'</button></div>'); | |
} | |
}else{ | |
} | |
} | |
//分页算法逻辑,主要对分页进行逻辑运算,不做渲染,返回值为JSON | |
function PageAlgorithm(pageNo,pageSize,count,showNum){ | |
var data=""; | |
if(pageNo==1){ | |
data='{"algorithm":[{"text":"上一页","num":0,"status":"disabled"}'; | |
}else{ | |
data='{"algorithm":[{"text":"上一页","num":"'+(pageNo-1)+'","status":"abled"}'; | |
} | |
//判断分页类型 | |
if(count>showNum){ | |
if(pageNo<=showNum+2){ | |
//判断pageNo是否在要初始化显示的页码内 | |
if(pageNo<=showNum){ | |
for(var i=1;i<=showNum;i++){ | |
if(pageNo==i){ | |
data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}'; | |
}else{ | |
data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}'; | |
} | |
} | |
if(pageNo==showNum){ | |
data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}'; | |
} | |
}else{ | |
for(var i=1;i<=pageNo;i++){ | |
if(i==pageNo){ | |
data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}'; | |
}else{ | |
data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}'; | |
} | |
} | |
if(pageNo!=count){ | |
data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}'; | |
} | |
} | |
//选中最后一页时,将省略号隐藏 | |
if(pageNo!=count){ | |
if(pageNo!=(count-1)){ | |
data+=',{"text":"…","num":"more","status":""}'; | |
} | |
} | |
}else if(pageNo>count-showNum){ | |
data+=',{"text":"1","num":"1","status":"abled"}'; | |
data+=',{"text":"2","num":"2","status":"abled"}'; | |
data+=',{"text":"…","num":"more","status":"disabled"}'; | |
for(var i=count-showNum+1;i<=count;i++){ | |
if(pageNo==i){ | |
data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}'; | |
}else{ | |
data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}'; | |
} | |
} | |
} | |
else{ | |
data+=',{"text":"1","num":"1","status":"abled"}'; | |
data+=',{"text":"2","num":"2","status":"abled"}'; | |
data+=',{"text":"…","num":"more","status":"disabled"}'; | |
for(var i=pageNo-2;i<=pageNo+2;i++){ | |
if(i==pageNo){ | |
data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}'; | |
}else{ | |
data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}'; | |
} | |
} | |
data+=',{"text":"…","num":"more","status":"disabled"}'; | |
} | |
}else{ | |
for(var i=1;i<=count;i++){ | |
if(pageNo==i){ | |
data+=',{"text":"'+i+'","num":"'+i+'","status":"active"}'; | |
}else{ | |
data+=',{"text":"'+i+'","num":"'+i+'","status":"abled"}'; | |
} | |
} | |
} | |
if(pageNo==count){ | |
data+=',{"text":"下一页","num":"'+(pageNo+1)+'","status":"disabled"}]}'; | |
}else{ | |
data+=',{"text":"下一页","num":"'+(pageNo+1)+'","status":"abled"}]}'; | |
} | |
var json_return = JSON.parse(data); | |
return json_return; | |
} | |
} | |
})(jQuery); |
jPage.js分页的更多相关文章
- js分页小结
今天解决了JS分页的问题1 页码 给每页的内容套一个相同的类名 通过选择器加上.length或者.size() 来获得总页数2当前页的页码可以使用each(function(index,DOMsss ...
- 自己封装的JS分页功能[用于搭配后台使用]
* 2016.7.03 修复bug,优化代码逻辑 * 2016.5.25 修复如果找不到目标对象的错误抛出. * 2016.5.11 修复当实际页数(pageNumber)小于生成的页码间隔数时的bu ...
- jsp、js分页功能的简单总结
一.概述 首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要.分 ...
- 一个重构的js分页类
// JavaScript Document /**//** * js分页类 * @param iAbsolute 每页显示记录数 * @param sTableId 分页表格属性ID值,为Strin ...
- 面向对象版js分页
基于前一个js分页,我将代码改成一个面向对象版的js分页,代码如下 http://peng666.github.io/blogs/pageobj <!DOCTYPE html> <h ...
- 纯js分页代码(简洁实用)
纯js写的分页代码. 复制代码代码如下: //每页显示字数 PageSize=5000; //分页模式 flag=2;//1:根据字数自动分页 2:根据[NextPage]分页 //默认页 start ...
- JS分页 + 获取MVC地址栏URL路径的最后参数
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...
- 浅谈js分页的几种方法
一个项目中必然会遇到分页这种需求的,分页可以使数据加载更合理,也让页面显示更美观,更有层次感!那么js分页到底如何实现呢?下面我就来讲一下三种循序渐进的方法 1.自己纯手写分页 更深入的去理解分页的意 ...
- JS分页条插件
目标 制作js分页导航jq插件,用于无刷新分页或者刷新分页 实现目标参考京东和天猫的分页条. 有四个固定按钮,前页码,后页码,首页,末页. 程序关键点在于计算中间页面的起止位置.逻辑是以当前页码为参照 ...
随机推荐
- Velocity写法注意
1.$Proerty与$!{Property}的区别 比如: 简单的key-value数据格式情况下 a.<C_APP_NME>$Applicant_CAppNme</C_APP_N ...
- 通过WSDL命令,将WSDL生成代理类
VS2010 打开命令行窗口(开始-VS2010--Visual Studio Tools--Visual Studio Command Prompt) 输入: wsdl /l:cs /n:newN ...
- Atitit.跨语言 文件夹与文件的io操作集合 草案
Atitit.跨语言 文件夹与文件的io操作集合 草案 1. Jdk原生的太难用了..1 2. PS: apache commons-io包,FileUtils有相关的方法,IOUtils一般是拷 ...
- Atitit.软件开发的非功能性需求attilax 总结At
Atitit.软件开发的非功能性需求attilax 总结 1. 运行环境约束:用户对软件系统运行环境的要求. 1 2. 兼容性 2 3. 7.6 数据库 database (imp by ati) ...
- C/C++ 错误笔记-如果要释放内存,必须拿到内存的首地址进行释放
例:修改字符串的第三个字母为a #include <stdlib.h> #include <string.h> #include <stdio.h> #pragma ...
- shell脚本之read工具
#!/bin/bash # -*- coding: utf-8 -*- # echo -n "please input your name: " read name echo &q ...
- oracle 插入记录,字段自动获取当前系统时间(YYYY-MM-DD HH24:MI:SS)
需求: 插入一条记录,要求自动获取当前日期,并且格式为(YYYY-MM-DD HH24:MI:SS) sql语句: insert into SY_COMM_CONFIG(CONF_ID, S_MTIM ...
- 如何实现uboot和linux之间的参数传递
参考http://cgxcn.blog.163.com/blog/static/132312422009101133251202/ 参考:http://blog.chinaunix.net/uid-1 ...
- Oracle----oracle小知识总结
1,表列的五种约束 not null, unique,primary key, foreign key, check 2,权限分配 grant 权限 on 表 to 用户 3,表和视图的区别 视图是一 ...
- Spring入门之通过注解 处理 数据库事务
用Spring 中的事务写的银行转帐的例子:(环境同上一个贴子) 一.表结构: (create table (id int,username varchar(10),salary int);) 二.文 ...