收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > jQuery > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

最实用的jQuery分页插件

在做商城和订单管理的时候,常常会用到分页功能,所以我封装了一个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=="<"){//上翻
  me.options.pageNo=+me.options.pageNo-1;
 }else if(num==">"){//下翻
  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=="<"){
   me.options.pageNo=+me.options.pageNo-1;
  }else if(num==">"){
   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分页功能汇总进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持积木网。

jQuery Ajax传值到Servlet出现乱码问题的解决方法
最近在学jqueryui,在做一个小功能的时候需要将前台的值获取到,通过Ajax传递给Servlet,然后再在返回数据结果,但是在Servlet接受参数的时候,通过后台

深入理解bootstrap框架之入门准备
一.bootstrap框架简介Bootstrap是最流行的前端开发框架。什么是框架:开发过程的半成品。bootstrap具有以下重要特性:(1)完整的CSS样式插件(2)丰富的

深入理解bootstrap框架之第二章整体架构
一.整体架构1.CSS-12栅格系统把网页宽度均分为12等分(保留15位精度)——这是bootstrap的核心功能。2.基础布局组件包括排版、按钮、表格、布局、表单

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号