在做商城和订单管理的时候,常常会用到分页功能,所以我封装了一个jQuery的分页插件,该插件主要实现上下翻页,输入数字跳转等功能。

具体实现如下:

输入参数需要当前页码pageNo,总页码totalPage,回调函数callback。

  主要的实现有两个函数,一个是根据当前页和总页数生成相应的html的代码,一个是事件绑定及回调函数的执行。

creatHtml函数:

creatHtml:function(){
var me=this;
var content="";
  //当前页码
var current=me.options.pageNo;
  //总页码
var total=me.options.totalPage;
  //当前页码大于1显示向上翻页按钮
if(current > 1){
content += "<a><</a>";
}
  //总页数大于7,根据当前页显示省略号,否则显示全部页码
if(total > 7){
if(current < 4){
for(var i=1;i<7;i++){
if(current==i){
content += "<a class='current'>"+i+"</a>";
}else{
content += "<a>"+i+"</a>";
}
}
content += "...";
content += "<a>"+total+"</a>";
}else{
if(current < total - 3){
content += "<a name='1' type='button' class='page num'>1</a>";
content += "...";
for(var i=current-2;i<current+3;i++){
if(current==i){
content += "<a class='current'>"+i+"</a>";
}else{
content += "<a>"+i+"</a>";
}
}
content += "...";
content += "<a>"+total+"</a>";
}else{
content += "<a>1</a>";
content += "...";
for(var i=total-5;i<total+1;i++){
if(current==i){
content += "<a class='current'>"+i+"</a>";
}else{
content += "<a>"+i+"</a>";
}
}
}
}
}else{
for(var i=1;i<total+1;i++){
if(current==i){
content += "<a class='current'>"+i+"</a>";
}else{
content += "<a>"+i+"</a>";
}
}
}
  //当前页小于总页数,显示向下翻页按钮
if(current < total){
content += "<a>></a>";
}
  //输入跳转
content += " 到第 ";
content += "<input max='3' maxlength='3' value='"+current+"' type='text' />";
content += " 页 ";
content += "<a>Go</a>";
  //更新HTML
me.element.html(content);
}

bindEvent函数:

bindEvent:function(){
var me=this;
  //分页点击事件
me.element.on('click','a',function(){
var num=$(this).html();
if(num=="&lt;"){//上翻
me.options.pageNo=+me.options.pageNo-1;
}else if(num=="&gt;"){//下翻
me.options.pageNo=+me.options.pageNo+1;
}else if(num=="Go"){//输入页码跳转
var ipt=+me.element.find('input').val();
if(ipt&&ipt<=me.options.totalPage&&ipt!=me.options.pageNo){
me.options.pageNo=ipt;
}
}else{//直接跳转
me.options.pageNo=+num;
}
    //更新html
me.creatHtml();
    //调用回调函数,返回当前页码
if(me.options.callback){
me.options.callback(me.options.pageNo);
}
});
}

  将函数封装起来,完整如下:

;(function($,window,document,undefined){
var initDate={
pageNo:1,
totalPage:1,
callback:function(){}
};
function Paging(element,options){
this.element = element;
this.options=options=$.extend(initDate,options||{});
this.init();
}
Paging.prototype={
constructor:Paging,
init:function(){
this.creatHtml();
this.bindEvent();
},
creatHtml:function(){
var me=this;
var content="";
var current=me.options.pageNo;
var total=me.options.totalPage;
if(current > 1){
content += "<a><</a>";
}
if(total > 7){
if(current < 4){
for(var i=1;i<7;i++){
if(current==i){
content += "<a class='current'>"+i+"</a>";
}else{
content += "<a>"+i+"</a>";
}
}
content += "...";
content += "<a>"+total+"</a>";
}else{
if(current < total - 3){
content += "<a name='1' type='button' class='page num'>1</a>";
content += "...";
for(var i=current-2;i<current+3;i++){
if(current==i){
content += "<a class='current'>"+i+"</a>";
}else{
content += "<a>"+i+"</a>";
}
}
content += "...";
content += "<a>"+total+"</a>";
}else{
content += "<a>1</a>";
content += "...";
for(var i=total-5;i<total+1;i++){
if(current==i){
content += "<a class='current'>"+i+"</a>";
}else{
content += "<a>"+i+"</a>";
}
}
}
}
}else{
for(var i=1;i<total+1;i++){
if(current==i){
content += "<a class='current'>"+i+"</a>";
}else{
content += "<a>"+i+"</a>";
}
}
}
if(current < total){
content += "<a>></a>";
}
content += " 到第 ";
content += "<input max='3' maxlength='3' value='"+current+"' type='text' />";
content += " 页 ";
content += "<a>Go</a>";
me.element.html(content);
},
bindEvent:function(){
var me=this;
me.element.on('click','a',function(){
var num=$(this).html();
if(num=="&lt;"){
me.options.pageNo=+me.options.pageNo-1;
}else if(num=="&gt;"){
me.options.pageNo=+me.options.pageNo+1;
}else if(num=="Go"){
var ipt=+me.element.find('input').val();
if(ipt&&ipt<=me.options.totalPage&&ipt!=me.options.pageNo){
me.options.pageNo=ipt;
}
}else{
me.options.pageNo=+num;
}
me.creatHtml();
if(me.options.callback){
me.options.callback(me.options.pageNo);
}
});
}
};
$.fn.paging=function(options){
options=$.extend(initDate,options||{});
return new Paging($(this),options);
}
})(jQuery,window,document);

  HTML:

<div id="page"></div>

  js引用:

$('#page').paging({pageNo:2,totalPage:10,callback:function(cur){
console.log(‘当前页:’+cur);//当前页:2
}});

  这里加了一些简单的样式,可以根据具体的ui设计来设计样式。

    <style type="text/css">
a{
width: 23px;
height: 23px;
border: 1px solid #dce0e0;
text-align: center;
margin: 0 4px;
cursor: pointer;
display: inline-block;
}
.current{
background-color: #5ac3e7;
}
</style>

github地址:https://github.com/Martian1/jQuery.paging.js

简单实用的jQuery分页插件的更多相关文章

  1. 基于jQuery简单实用的Tabs选项卡插件

    jQuery庞大的插件库总是让人欢喜让人忧,如何从庞大的插件库里挑出适合自己的插件,总是让很多缺少经验的朋友头疼的事!今天为大家推荐几款简单实用的Tabs选项卡插件,推荐理由:简单易用灵活,样式美观, ...

  2. 经验分享:10个简单实用的 jQuery 代码片段

    尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...

  3. 绝对震撼 10个实用的jQuery/HTML5插件

    在HTML5的世界里,我们见证了无数的特效奇迹,但很多特效我们很难在网页中应用,今天我们要分享10款效果震撼但是又比较实用的jQuery/HTML5插件,希望这些项目在应用的过程中也能给你带来设计灵感 ...

  4. 基于Bootstrap简单实用的tags标签插件

    http://www.htmleaf.com/jQuery/ jQuery之家 自由分享jQuery.html5和css3的插件库 基于Bootstrap简单实用的tags标签插件

  5. 精选29款非常实用的jQuery应用插件

    今天我们来分享一些实用的jQuery应用插件,没有特别花哨,但都比较实用,jQuery菜单.jQuery图片都有涉及到,一起来看看. 1.jQuery+CSS3仿IOS无线局域网Wifi DEMO演示 ...

  6. 分享7款非常实用的jQuery/CSS3插件演示和源码

    上次我们分享了15款效果很酷的最新jQuery/CSS3特效,非常不错,今天要分享7个非常实用的jQuery/CSS3插件演示和源码,一起来看看. 1.jQuery ajax点击地图显示商家网点分布 ...

  7. 21个很棒的jQuery分页插件下载

    分页是指将一个大内容划分为各种不同的页面,因此网站的分页是一个很重要的部分,必须让内容有组织性和易于访问.分页有各两种不同的方式,手动跟自动.最受欢迎简单和广泛的方法是jQuery插件.下面我们收集了 ...

  8. jQuery 分页插件 jqPagination的使用

    jqPagination 是一个简单易用的轻量级 jQuery分页插件,其使用了 HTML5 和 CSS3 技术来实现.此插件提供了几个参数设置选项,通过简单的配置即可生成分页控件.此外,它的外观样式 ...

  9. Jquery 分页插件 Jquery Pagination

    Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...

随机推荐

  1. 「SDOI2016」储能表(数位dp)

    「SDOI2016」储能表(数位dp) 神仙数位 \(dp\) 系列 可能我做题做得少 \(QAQ\) \(f[i][0/1][0/1][0/1]\) 表示第 \(i\) 位 \(n\) 是否到达上界 ...

  2. ORACLE 日期加减操作

    无论是DATE还是timestamp都可以进行加减操作. 可以对当前日期加年.月.日.时.分.秒,操作不同的时间类型,有三种方法: 1 使用内置函数numtodsinterval增加小时,分钟和秒2 ...

  3. Android开发的插件Code Generator与LayoutCreator的安装与使用,提升你的开发效率

    前言 大家好,给大家带来Android开发的插件Code Generator与LayoutCreator的安装与使用,提升你的开发效率的概述,希望你们喜欢 学习目标 掌握两个插件的安装和使用,能够实现 ...

  4. docker系统学习之docker界面管理

    docker可视化界面 dockerUI已废弃,转投Portainer项目 Portainer,轻量级管理界面,基本满足中小单位需求 官方Github https://github.com/porta ...

  5. Shell-1--概念

  6. jenkins配置邮件 -- com.sun.mail.smtp.SMTPSenderFailedException: 550 5.7.1 Client does not have permissions to send as this sender

    jenkins配置邮件设置 发送邮件测试时,报错: com.sun.mail.smtp.SMTPSenderFailedException: Client does not have permissi ...

  7. odoo开发笔记 -- 后台日志输出及分析

    odoo开发笔记 -- 后台日志输出及分析 附:日志分析软件

  8. Python:使用基于事件驱动的SAX解析XML

    SAX的特点: 是基于事件的 API 在一个比 DOM 低的级别上操作 为您提供比 DOM 更多的控制 几乎总是比 DOM 更有效率 但不幸的是,需要比 DOM 更多的工作 基于对象和基于事件的接口 ...

  9. Redis学习系列七分布式锁

    一.简介 熟悉.Net多线程的都知道,当多个线程同时操作一个全局缓存对象(static对象实例.Dictionary.List等)时,会存在多线程争用问题,包括EF.Dapper等本身的缓存机制,都存 ...

  10. 从零开始学 Web 之 ES6(四)ES6基础语法二

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...