jquery 前台分页插件总结（1 前台假分页 2 后台分页）
2024-05-09 13:15:08
该分页插件只展示当前数据，如果前台分页需要把所有数据切割展示才能实现的前台分页
使用前需要引入font-awesome 和分页插件js（在最下面）
拷贝直接用即可实现，替换一下数据
1 前台分页情况（后台分页下次再分享）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="simple.jquery.page.js"></script> <style> /**分页相关**/ /*.simple-page-pre-wrap > .wrap-table td:first-child , .simple-page-pre-wrap > .wrap-table th:first-child {*/ /*padding-left: 10px;*/ /*}*/ /*.simple-page-pre-wrap > .wrap-table td:last-child , .simple-page-pre-wrap > .wrap-table th:last-child {*/ /*padding-right: 10px;*/ /*}*/ .simple-page { display: block; width: 100%; min-width: 600px; text-align: right; line-height: 40px; margin-top: 10px; } .pre-page-icon { font-size: 20px; vertical-align: text-bottom; padding: 0 10px; color: #333; } .next-page-icon { font-size: 20px; vertical-align: text-bottom; padding: 0 10px; color: #333; } .tcdNumber { min-width: 20px; display: inline-block; text-align: center; line-height: 20px; padding: 0 3px; color: #333; } .current { min-width: 20px; display: inline-block; text-align: center; line-height: 20px; border-radius: 10px; background-color: #079cda; padding: 0 3px; color: #fff; } .page-input { display: inline-block!important; height: 20px!important; width: 2.5em!important; margin: 0 5px 0 10px!important; text-align: center!important; outline: none!important; vertical-align: text-bottom; color: #131313; font-size: 13px; border: 1px solid #9d9d9d; } .page-jump-btn { padding: 5px; color: #333; } .simple-page-loading { display: none; color:#666; margin-right: 10px; } .simple-page-loading > i { margin-right: 10px; } .simple-page-pre-wrap { position: relative; } .no-simple-page > .simple-page-pre-wrap > .simplePagePre, .no-simple-page > .simple-page-pre-wrap > .simplePageNext { display: none !important; } .simplePagePre,.simplePageNext { display: inline-block; position: absolute; top: 0; width: 46px; height: 100%; transition: all .3s; opacity: 0; } .simplePagePre:hover,.simplePageNext:hover { opacity: .8; } .simplePagePre::before,.simplePageNext::before { content: '\f104'; font: normal normal normal 14px/1 FontAwesome; font-size: 60px; line-height: 80px; text-align: center; color:#fff; position: absolute; top: 50%; cursor: pointer; margin-top: -40px; width: 100%; background-color: rgba(0,0,0,.3); } .simplePagePre { left: -20px; } .simplePageNext { right: -20px; } .simplePageNext:hover {
} .simplePagePre::before { border-radius: 0 4px 4px 0; } .simplePageNext::before { content: '\f105'; border-radius: 4px 0 0 4px; }
</style></head><body> <ul class="all" > </ul> <div id="ruleExamine_hq" class="ys-page-container simple-page"></div>
<script> var pageSize=1; var arr1=[{name:"张1", age:'18'}, {name:"张2", age:'18'}, {name:"张3", age:'18'}, {name:"张4", age:'18'}, {name:"张5", age:'18'}, {name:"张6", age:'18'}, {name:"张7", age:'18'}, {name:"张8", age:'18'}, {name:"张9", age:'18'}, {name:"张10", age:'18'}, {name:"张11", age:'18'}, {name:"张12", age:'18'}, {name:"张13", age:'18'}, {name:"张14", age:'18'},
]; //后台得到的数据 var html=''; function list(k,arr) { var arrReal=arr.slice((k*pageSize-pageSize),k*pageSize); // 每一页展示的数据 for(var i in arrReal){ html+='<li>'+arrReal[i].name+'</li>' } $('.all').append(html); html='' } list(1,arr1); $('#ruleExamine_hq').createPage({ current:1, pageCount:Math.ceil(arr1.length/pageSize), backFn:function (k) { $('.all').children('li').remove(); list(k,arr1) }, isJump:true }) </script></body></html>
//simple.jquery.page.js 插件代码
(function($){ var ms = { init:function(obj,args){ return (function(){ ms.fillHtml(obj,args); ms.bindEvent(obj,args); })(); }, //填充html fillHtml:function(obj,args){ return (function(){ obj.empty(); if(!obj.hasClass('simple-page')){ obj.addClass('simple-page'); } if(obj.prev().hasClass('wrap-table')){ if(!obj.prev().hasClass('simple-page-pre-wrap')){ obj.prev().wrap('<div class="simple-page-pre-wrap"></div>'); obj.prev().prepend('<span class="simplePagePre"></span>'); obj.prev().append('<span class="simplePageNext"></span>'); } } obj.append('<span id="'+ obj.attr('id') +'-pageLoading" class="simple-page-loading"><i class="fa fa-spinner fa-pulse"></i>数据加载中...</span>'); //上一页 if(args.current > 1){ obj.append('<a href="javascript:;" class="prevPage"><i class="fa fa-angle-left pre-page-icon"></i></a>'); }else{ obj.remove('.prevPage'); obj.append('<span class="disabled"><i class="fa fa-angle-left pre-page-icon"></i></span>'); } //中间页码 if(args.current != 1 && args.current >= 4 && args.pageCount != 4){ obj.append('<a href="javascript:;" class="tcdNumber">'+1+'</a>'); } if(args.current-2 > 2 && args.current <= args.pageCount && args.pageCount > 5){ obj.append('<span>...</span>'); } var start = args.current -2,end = args.current+2; if((start > 1 && args.current < 4)||args.current == 1){ end++; } if(args.current > args.pageCount-4 && args.current >= args.pageCount){ start--; } for (;start <= end; start++) { if(start <= args.pageCount && start >= 1){ if(start != args.current){ obj.append('<a href="javascript:;" class="tcdNumber">'+ start +'</a>'); }else{ obj.append('<span class="current">'+ start +'</span>'); } } } if(args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){ obj.append('<span>...</span>'); } if(args.current != args.pageCount && args.current < args.pageCount -2 && args.pageCount != 4){ obj.append('<a href="javascript:;" class="tcdNumber">'+args.pageCount+'</a>'); } //下一页 if(args.current < args.pageCount){ obj.append('<a href="javascript:;" class="nextPage"><i class="fa fa-angle-right next-page-icon"></i></a>'); }else{ obj.remove('.nextPage'); obj.append('<span class="disabled"><i class="fa fa-angle-right next-page-icon"></i></span>'); } obj.append('<span>共 '+ args.pageCount +' 页</span>'); if(args.isJump){ obj.append('<input type="text" class="page-input" /><a href="javascript:;" class="page-jump-btn">GO</a>'); } })(); }, //绑定事件 bindEvent:function(obj,args){ return (function(){ obj.off("click","a.tcdNumber").on("click","a.tcdNumber",function(){ var current = parseInt($(this).text()); ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount,"isJump":args.isJump}); if(typeof(args.backFn)=="function"){ args.backFn(current); } }); //上一页 obj.off("click","a.prevPage").on("click","a.prevPage",function(){ var current = parseInt(obj.children("span.current").text()); ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount,"isJump":args.isJump}); if(typeof(args.backFn)=="function"){ args.backFn(current-1); } }); //下一页 obj.off("click","a.nextPage").on("click","a.nextPage",function(){ var current = parseInt(obj.children("span.current").text()); ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount,"isJump":args.isJump}); if(typeof(args.backFn)=="function"){ args.backFn(current+1); } }); if(obj.prev().hasClass('simple-page-pre-wrap')){ obj.prev().off("click","span.simplePagePre").on("click","span.simplePagePre",function () { var current = parseInt(obj.children("span.current").text()); if(current==1) return; ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount,"isJump":args.isJump}); if(typeof(args.backFn)=="function"){ args.backFn(current-1); } }); obj.prev().off("click","span.simplePageNext").on("click","span.simplePageNext",function () { var current = parseInt(obj.children("span.current").text()); if(current==args.pageCount) return; ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount,"isJump":args.isJump}); if(typeof(args.backFn)=="function"){ args.backFn(current+1); } }); } if(args.isJump){ obj.off("click","a.page-jump-btn").on("click","a.page-jump-btn",function(){ var _current = parseInt(obj.children("input.page-input").val()); if(isNaN(_current)) return; var current = parseInt(obj.children("span.current").text()); if(_current < 1) _current=1; else if(_current > args.pageCount) _current = args.pageCount; else if(_current == current) return; current = _current; ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount,"isJump":args.isJump}); if(typeof(args.backFn)=="function"){ args.backFn(current); } }); obj.off("keydown","input.page-input").on("keydown","input.page-input",function(event){ if(event.keyCode == 13){ var _current = parseInt(obj.children("input.page-input").val()); if(isNaN(_current)) return; var current = parseInt(obj.children("span.current").text()); if(_current < 1) _current=1; else if(_current > args.pageCount) _current = args.pageCount; else if(_current == current) return; current = _current; ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount,"isJump":args.isJump}); if(typeof(args.backFn)=="function"){ args.backFn(current); } } }); } })(); } }; $.fn.createPage = function(options){ var args = $.extend({ pageCount : 10, current : 1, backFn : function(){} },options); ms.init(this,args); }})(jQuery);
转载于:https://www.cnblogs.com/zou1234/p/8242969.html
jquery 前台分页插件总结（1 前台假分页 2 后台分页）相关推荐
- 自定义ajax脚本出粗哦,jQuery DataTables插件自定义Ajax分页实例解析
一.问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分类效果. 后端的分页接口已经写好了,不涉及条件查询,需要传入页码(pageNo)和页面显示数 ...
- Spring Boot+MybatisPlus使用JQuery DataTables表格插件展示数据、实现分页和模糊查询等功能
Spring Boot+MybatisPlus使用JQuery DataTables表格插件展示数据.实现分页和查询功能 一.部分技术选型 二.项目结构 三.功能需求和效果展示 四.关键代码 4.1页 ...
- 基于 jQuery 与 Bootstrap 简单封装一个表格分页的组件
最近遇到一个需求:页面上的数据可能会有很多条,需要将数据分页展示在表格中.项目用的是 jQuery 和 Bootstrap,本来想直接用 bootstrapTable 插件,但是需要额外引入 js 文 ...
- 超强1000个jquery极品插件！（连载中。。。。最近更新20100127）
1.导航类 (1) Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. 二手图书 二手书 特价书 旧书网 (2)jQuery-Horizont ...
- jQuery 表格插件汇总
本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等.这 ...
- 超强的jquery极品插件--色彩选择器类/ 右键菜单类/ 图片新闻flash展示类
Farbtastic Farbtastic是一个color picker插件.它能够在一个页面中加入多个颜色选择控件,然后每个控件关联到页面中的一个元素比如:文本输入框. Farbtastic jQu ...
- JQuery模板插件jquery.tmpl-动态ajax扩展
在上一篇JQuery模板插件-jquery.tmpl中介绍了这款插件.有时我们需要去动态的ajax去加载模板,或者数据,根据url参数或者其他信息加载不同的模板,数据.在我的某个项目中有这个需求,所以 ...
- 超强1000个jquery极品插件！（连载中。。。。最近更新20090710）
花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++++++++++++++++++++++++ ...
- html 表格过滤功能,简单的带排序和过滤功能的jQuery表格插件
smart-table是一款简单实用的带排序和过滤功能的jQuery表格插件.该jQuery表格插件通过简单的设置就可以生成表格排序.表格字段过滤功能,甚至可以实现表格分页显示,使用非常方便. 使用方 ...
最新文章
- IDEA检出SVN项目时提示：Cannot load supportted format:Cannot run program svn
- Android开发之SDK开发获取资源id报错的问题
- JSTL分割字符 fn：split()
- 2018诺贝尔奖预测:美国11人，日本1人，中国无人入围
- kettle 内存设置_Kettle性能调优汇总
- ReactNative 踩坑之 iOS 原生组件
- Canvas.Top和Canvas.Left属性
- micropython教程nucleo-f767zi开发板_micropython移植到正点原子F767的問題
- lambda函数 python菜鸟教程-Python3 函数
- zbbz插件使用教程_谁知道CAD里面的坐标插入软件ZBBZ怎么使用
- 谷歌浏览器html插件字体大小,字体换加插件，自定义Chrome网页字体，更改字体样式，调整字体大小...
- MySQL性能优化(六)：分区
- /bin/bash: warning: setlocale: LC_ALL: cannot change locale (en_US.UTF-8)
- AUTOCAD——检验标注
- WPF 3D模型介绍及使用
- NDK学习笔记＜六＞ 反编译现成的项目，调用该项目的so文件
- 项目 3: 创建用户分类
- html 占据剩余空间,html – 如何使左浮动div占用剩余空间的100％？
- 应用宝使用绑定iOS下载
- 软件工程：软件工程过程与方法
热门文章
- 知乎：中国工商银行南宁分行丢失2.5亿，工作人员个人行为，与银行无关
- 2020年高考西工大附中成绩分析
- extern 关键字用法
- java 无法找到ant_无法找到与ANT（mac）关联的文件
- c语言地理坐标存储 转发,纬度/经度坐标的2个列表之间的地理距离
- EF mysql 数据迁移_EF Code First Migrations数据库迁移
- Property ‘configuration‘ and ‘configLocation‘ can not specified with together
- 001_SpringBoot入门
- 003_Controller和RequestMapping注解
- 游戏脚本和MonoBehaviour生命周期