基于jquery分页插件
今天终于完成了基于jquery的分页插件的代码编写,也通过了功能测试,实现了分页功能;由于刚开始写jquery的插件,所以梳理逻辑的时间也很长,整个过程整整一周时间,今天终于搞完了,先将整个分页插件的逻辑分享给大家,并将源码上传到自己的github仓库,有需要的请点击这里下载;给大家先看一下效果图;
整个分页逻辑如下:
首先判断分页类型,有两种情况,第一:pageCount > showNum;第二:pageCount <= showNum;
在第一种情况下还会出现如下三种情况;
1、pageNo <= showNum + 2;
2、showNum + 2 < pageNo <= pageCount - showNum + 3;
3、pageCount - showNum + 3 < pageNo <= pageCount;
在1的情况下又分为两种情况:
(1)、pageNo <= showNum;
(2)、showNum < pageNo <= showNum + 2;
在(2)中情况下面要考虑pageNo是否为最后一页或倒数第二页,如果是则隐藏...
提示:
pageNo当前页码
pageCount总页码数
pageSize每页显示条数
showNum显示几条页码在页面上
不多说了,给大家附上js源码,如果在阅读的过程中发现问题,欢迎大家在评论区与我探讨;
(function($){
$.fn.paging = function (option) { //通过$.fn定义分页函数paging,在需要分页的地方直接调用
var defaultOptions = {//默认项设置
pageNo:1,//默认当前页
pageSize:10,//默认每页显示条数
count:0,//默认数据总条数
showNum:6,//默认显示页码数
jumpTo:true,//默认显示跳转指定页模块
jumpBtnName:'确定',//默认跳转按钮的名称
fontSize:16,//跳转按钮字体大小
}; var self = this;
var pagingCount = 0;//共计页码
var Settings = $.extend( {}, defaultOptions, option );/*将defaultOptions对象和option
随想相应的属性合并,并将新的对象赋值给Setting对象本身*/
$(this).empty();//清空当前DOM节点下面的所有子节点 # $('a').empty() 清空a下面所有的子节点 var checkDigit = function () {/*校验数据条数count,每页显示条数pageSize,当前页pageNo,
显示页码数showNum是否非法输入*/
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;
return true;
}
} var JsonPageConstruct = function (pageNo,pageCount,pageSize,showNum) {
//构建分页页码的变现形式,返回json字符串
//pageNo当前页码
//pageCount总页码数
//pageSize每页显示条数
//showNum显示几条页码在页面上
var data = '';
if(pageNo == 1){
data = '{"jsonData":[{"text":"上一页","num":0,"state":"disabled"},';
}
else{
data = '{"jsonData":[{"text":"上一页","num":"'+ ( pageNo - 1 ) +'",'+
'"state":"abled"},';
}
/*
判断分页类型,有两种情况,第一:pageCount > showNum;第二:pageCount <=
showNum;
在第一种情况下还会出现如下三种情况;
1、pageNo <= showNum + 2;
2、showNum + 2 < pageNo <= pageCount - showNum + 3;
3、pageCount - showNum + 3 < pageNo <= pageCount;
在1的情况下又分为两种情况:
(1)、pageNo <= showNum;
(2)、showNum < pageNo <= showNum + 2;
在(2)中情况下面要考虑pageNo是否为最后一页或倒数第二页,如果是则隐藏...
*/
if( pageCount > showNum ) {
if( pageNo <= showNum + 2 ) {
if( pageNo <= showNum ) {
for(var i= 1 ;i <= showNum ; i++ ){
if( pageNo == i ) {
data += '{"text":"'+ i +'","num":"'+ i +'","state":"active"},';
}
else{
data += '{"text":"'+ i +'","num":"'+ i +'","state":"abled"},';
}
}
if( pageNo == showNum ) {
//显示页面后面在刷新出一个,
//此时i = showNum + 1,这边之所以能够访问到i,是因为js在声明变量
//的时候提升申明了,提升到最前面声明
data += '{"text":"'+ i +'","num":"'+ i +'","state":"abled"},';
}
}
else{
for (var j = 1; j <= pageNo; j++) {
if( pageNo == j ) {
data += '{"text":"'+ j +'","num":"'+ j +'","state":"active"},';
}
else{
data += '{"text":"'+ j +'","num":"'+ j +'","state":"abled"},';
}
}
if(pageNo != pageCount){
data += '{"text":"'+ j +'","num":"'+ j +'","state":"abled"},';
}
}
//如果总页数pageCount <= showNum + 2,则隐藏...
if(pageNo != pageCount){
if(pageNo != (pageCount - 1)){
data+='{"text":"...","num":"more","state":"disabled"},';
}
}
}
else if(pageNo <= pageCount - showNum + 3){
data += '{"text":"1","num":"1","state":"abled"},';
data += '{"text":"2","num":"2","state":"abled"},';
data += '{"text":"...","num":"more","state":"disabled"},';
for (var m = pageNo - 2; m <= pageNo + 2; m++) {
if(pageNo == m){
data += '{"text":"'+ m +'","num":"'+ m +'","state":"active"},';
}
else{
data += '{"text":"'+ m +'","num":"'+ m +'","state":"abled"},';
}
}
data += '{"text":"...","num":"more","state":"disabled"},';
}
else{
data += '{"text":"1","num":"1","state":"abled"},';
data += '{"text":"2","num":"2","state":"abled"},';
data += '{"text":"...","num":"more","state":"disabled"},';
for (var n = pageCount - showNum + 1; n <= pageCount; n++) {
if(pageNo == n){
data += '{"text":"'+ n +'","num":"'+ n +'","state":"active"},';
}
else{
data += '{"text":"'+ n +'","num":"'+ n +'","state":"abled"},';
}
}
}
}
if(pageNo == pageCount){
data += '{"text":"下一页","num":"'+ (pageNo + 1) +'","state":"disabled"}]}';
}else{
data += '{"text":"下一页","num":"'+ (pageNo + 1) +'","state":"abled"}]}';
}
var json_return = JSON.parse(data);
return json_return;
} /*
将分页结果显示到页面的相应的位置
*/
function PagingJson(json){ if(parseInt(Settings.count)>0){
var html = '<ul class="pagination" style="display:flex;list-style:none;">';
for(var a in json.jsonData){
if(json.jsonData[a].state == "disabled"){
html +='<li id="pageNum'+ json.jsonData[a].num +'" class="disabled" num="'+ json.jsonData[a].num +'" ><a href="javascript:;">'+ json.jsonData[a].text +'</a></li>';
}
else if(json.jsonData[a].state == "active"){
html +='<li id="pageNum'+ json.jsonData[a].num +'" class="active" num="'+ json.jsonData[a].num +'" ><a href="javascript:;">'+ json.jsonData[a].text +'</a></li>'; }else{
html +='<li id="pageNum'+ json.jsonData[a].num +'" num="'+ json.jsonData[a].num +'" ><a href="javascript:;">'+ json.jsonData[a].text +'</a></li>';
}
}
$(self).html(html);
if(Settings.jumpTo == true){
$(self).find(".pagination").append('<span class="text-muted" style="margin:5px;margin-left:10px;display:inline-block;font-size:18px;font-size:'+ Settings.fontSize +'px">共有'+ pagingCount +'页/'+ 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="'+ pagingCount +'"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.jumpBtnName +'</button></div>');
}
}else{ }
} var main = function () {//主函数
var check = checkDigit();
if( check == false ){
return false;
}
var pageNo = parseInt( Settings.pageNo );
var pageSize = parseInt( Settings.pageSize );
var count = parseInt( Settings.count );
if( count % pageSize == 0){
pagingCount = count / pageSize;
}
else{
pagingCount = parseInt( count / pageSize ) + 1;
}
var showNum = parseInt( Settings.showNum );
var pageJson = JsonPageConstruct(pageNo,pagingCount,pageSize,showNum);
PagingJson(pageJson);
$(self).off();
};
main(); };
})(jQuery)
paging
注意:
一定要引入jquery哦
基于jquery分页插件的更多相关文章
- 一个强大的jquery分页插件
点击这里查看效果 这个分页插件使用方便,引用keleyidivpager.js和keleyidivpager.css文件,然后在htm(或者php,aspx,jsp等)页面中对分页总数,参数名,前缀后 ...
- 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js
在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...
- 基于JQuery.timer插件实现一个计时器
基于JQuery.timer插件实现一个计时器,需要的朋友可以参考下. 先去官网下载jQuery Timers插件 ,然后引用到html中.这里是1.2 version 复制代码代码如下: < ...
- 基于 jQuery Jcrop 插件的功能模块:头像剪裁
/** Jcrop version: 0.9.12 jQuery version: 1.9.0 Author: 小dee Date: 2014.10.30 */ 先看看他山之石:博客园的头像模块也是使 ...
- 21个很棒的jQuery分页插件下载
分页是指将一个大内容划分为各种不同的页面,因此网站的分页是一个很重要的部分,必须让内容有组织性和易于访问.分页有各两种不同的方式,手动跟自动.最受欢迎简单和广泛的方法是jQuery插件.下面我们收集了 ...
- jQuery 分页插件 jqPagination的使用
jqPagination 是一个简单易用的轻量级 jQuery分页插件,其使用了 HTML5 和 CSS3 技术来实现.此插件提供了几个参数设置选项,通过简单的配置即可生成分页控件.此外,它的外观样式 ...
- Jquery 分页插件 Jquery Pagination
Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...
- jquery分页插件的修改
前言 最近分页功能使用的比较多,所以从网上下载个jquery分页插件来使用, 之前用的都挺好的,直到昨天出现了逻辑问题,反复查看自己的代码,最后发现是点击页码后执行了多个点击事件.最后只有自己查看源码 ...
- 基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
随机推荐
- 悟空模式-java-抽象工厂模式
[一朝,王母娘娘设宴,大开宝阁,瑶池中做蟠桃胜会] 有一天,王母娘娘要在瑶池办party,就需要准备大量的食材.要知道,天上的神仙也分三六九等,九曜星.五方将.二十八宿.四大天王.十二元辰.五方五老. ...
- hdu2036(多边形面积)
Description “ 改革春风吹满地, 不会AC没关系; 实在不行回老家, 还有一亩三分地. 谢谢!(乐队奏乐)” 话说部分学生心态极好,每天就知道游戏,这次考试如此简单的题目,也是云里雾里,而 ...
- Nginx 反向代理时获取用户的真实 IP
在平时我们开发后端程序的过程中,应该多多少少都会碰到记录客户端 IP 的场景,例如我之前写过的 APP 用户的一个审计功能,就需要获取用户的 IP 地址:还有广告系统里面,也是需要获取用户的 IP 地 ...
- 动态We API层(动态生成js)
ABP动态webapi前端怎么调用? 研究abp项目时,页面js文件中一直不明白abp.services... 是从哪里来的 在调试SimpleTaskSystem的AngularJs demo时,一 ...
- 算警示吧——此文来自张鑫旭(说说CSS学习中的瓶颈)
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2523 虽已数年,但未 ...
- c#中表达式的返回值是啥?
今天在学javascript的时候发现它其中有一个语法是这样的(a="haha).length;这样也能够输出haha这个字符串的长度,然而我在使用c#的时候分行读取txt文本的时候也用这个 ...
- js-权威指南学习笔记17
第十七章 事件处理 1.事件处理程序或事件监听程序是处理或响应事件的函数. 2.事件对象是与特定事件相关且包含有关该事件详细信息的对象. 3.响应通过键盘改变焦点的表单元素在得到和失去焦点时会分别出发 ...
- 爬虫必备—scrapy-redis(分布式爬虫)
转载自:http://www.cnblogs.com/wupeiqi/articles/6912807.html scrapy-redis是一个基于redis的scrapy组件,通过它可以快速实现简单 ...
- WPF 中的OpenFileDialog和 OpenFolderDialog
OpenFolderDialog: using (var dialog = new System.Windows.Forms.FolderBrowserDialog() { SelectedPath ...
- Android获取SD卡路径及SDCard内存的方法
这篇文章主要介绍了Android获取SD卡路径及SDCard内存的方法,较为详细的分析了Android针对SD卡操作所涉及的类及其具体函数功能,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了A ...