基于jquery.page.js实现分页效果

2024-09-29 21:09:00

基于jquery.page.js的一款简单的分页效果，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>简单的jQuery分页插件</title>
<style>
*{ margin:0; padding:0; list-style:none;}
a{ text-decoration:none;}
a:hover{ text-decoration:none;}
.tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;text-align:center;}
.tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px; line-height: 25px; padding: 0 10px;border: 1px solid #ddd; margin: 0 2px;border-radius: 4px;vertical-align: middle;}
.tcdPageCode a:hover{text-decoration: none;border: 1px solid #428bca;}
.tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #428bca; border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;}
.tcdPageCode span.disabled{ display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px; color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;}
</style>
</head>
<body>
<br><br><br> 

<div class="tcdPageCode"></div> 

<center><pre><br>
</pre></center> 

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.page.js"></script>
<script>
  $(".tcdPageCode").createPage({
    pageCount:100,
    current:1,
    backFn:function(p){
      console.log(p);
    }
  });
</script>
</body>
</html>

调用方法如下：

$(".tcdPageCode").createPage({
pageCount:10,
current:1,
backFn:function(p){
//单击回调方法，p是当前页码
}
});

pageCount：总页数
current：当前页

以下是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(args.current > 1){
          obj.append('<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="prevPage">上一页</a>');
        }else{
          obj.remove('.prevPage');
          obj.append('<span class="disabled">上一页</span>');
        }
        //中间页码
        if(args.current != 1 && args.current >= 4 && args.pageCount != 4){
          obj.append('<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="tcdNumber">'+args.pageCount+'</a>');
        }
        //下一页
        if(args.current < args.pageCount){
          obj.append('<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nextPage">下一页</a>');
        }else{
          obj.remove('.nextPage');
          obj.append('<span class="disabled">下一页</span>');
        }
      })();
    },
    //绑定事件
    bindEvent:function(obj,args){
      return (function(){
        obj.on("click","a.tcdNumber",function(){
          var current = parseInt($(this).text());
          ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount});
          if(typeof(args.backFn)=="function"){
            args.backFn(current);
          }
        });
        //上一页
        obj.on("click","a.prevPage",function(){
          var current = parseInt(obj.children("span.current").text());
          ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount});
          if(typeof(args.backFn)=="function"){
            args.backFn(current-1);
          }
        });
        //下一页
        obj.on("click","a.nextPage",function(){
          var current = parseInt(obj.children("span.current").text());
          ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount});
          if(typeof(args.backFn)=="function"){
            args.backFn(current+1);
          }
        });
      })();
    }
  }
  $.fn.createPage = function(options){
    var args = $.extend({
      pageCount : 10,
      current : 1,
      backFn : function(){}
    },options);
    ms.init(this,args);
  }
})(jQuery);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

基于jQuery的实现简单的分页控件

1:效果图 2:素材 3:编码 3.1思考需要做什么? 1:分页控件需要向后台发送请求,发送的参数包括当前页,每页显示数量,查询条件:并且获取数据加载到当前页面: 2:进行修改删除操作的时候能记住当前页: 3:查询后翻页的时候可以可以记住当前查询的条件 3.2实现 HTML 复制代码代码如下:  <div class="tableData"> </div>  <div cla
JQuery+Ajax无刷新分页的实例代码

先看效果图: 实现原理很简单,使用了jquery.pagination这个插件,每当点击页码时异步去服务器去取该页的数据,简单介绍如下: 一.数据库表结构:很简单就四个字段分别是News_id News_title News_time News_readtimes 二.前台页面代码: 复制代码代码如下: <head runat="server"> <title>JQuery无刷新分页</title> <link hre
jQuery中jqGrid分页实现代码

(1)页面代码: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UT
jQuery EasyUI datagrid实现本地分页的方法

本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法.分享给大家供大家参考.具体如下: 一般分页都是后台做,前端做无论从哪方面考虑都不合适.但是有的时候还是有这种需求. 这里重点用到了pagination的监听,以及JS数组的slice方法来完成.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title&g
jQuery EasyUI API 中文文档 - Pagination分页

用 $.fn.pagination.defaults 重写了 defaults. 依赖 linkbutton 用法复制代码代码如下: <div id="pp" style="background:#efefef;border:1px solid #ccc;"></div> 复制代码代码如下: $('#pp').pagination({ total:2000, pageSize:10 }); 特性名称类型说明默认值 total n
jQuery scroll事件实现监控滚动条分页示例

scroll事件适用于window对象,但也可滚动iframe框架与CSS overflow属性设置为scroll的元素. 复制代码代码如下: $(document).ready(function () { //本人习惯这样写了 $(window).scroll(function () { //$(window).scrollTop()这个方法是当前滚动条滚动的距离 //$(window).height()获取当前窗体的高度 //$(docume
基于JQuery的Pager分页器实现代码

实例效果图如下使用说明需要使用jQuery库文件和JQuery Pager库文件(目前版本1.1) 素材准备分页器CSS样式文件,可复制如下CSS样式,可命名为Pager.css 复制代码代码如下: #pager ul.pages { display:block; border:none; text-transform:uppercase; font-size:10px; margin:10px 0 50px; padding:0; } #pager ul.pages li { list
用jQuery中的ajax分页实现代码

功能简介:主要功能就是分页显示数据了,可在配置文件中配置每页要显示的页码,可以做多条件联合查询,这里只是做一个简单的查询.欢迎拍砖,有问题的还望大虾们斧正哈.看看这个效果图,无刷新的噢!! 具体实现请看源码: 1.aspx页面复制代码代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPage.aspx.cs" Inherits="Measur
jQuery DataTables插件自定义Ajax分页实例解析

一.问题描述园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分类效果. 后端的分页接口已经写好了,不涉及条件查询,需要传入页码(pageNo)和页面显示数据条数(pageSize),显示相应页的显示记录,且不能修改后端接口. 二.分析先来分析下分页实现. 一是后端分页:这种情况下,在后端很容易实现,在官网上有示例,不多说明. 二是前端分页:前端分页也是支持的,不过需要一次把所有数据都获取到才可以. 看到这里,问题来了.由于后端在目前的情况下是更改不
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版

原项目地址:http://plugins.jquery.com/project/pagination版本:v1.2源文件下载:英文原版或中文翻译修改版一.相关demo 基本demo页面 Ajax demo页面参数可编辑demo页面二.简介与说明此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 原插件CSS不太合理,使用浮动,故无法方便实现左右方向的定位,且未清除浮动,在中文修改版中我对其进行了优化,使其支持tex

基于jquery.page.js实现分页效果

相关推荐

随机推荐