1、简单定义下样式

<style type="text/css">

        .fanye

        {

            color: blue;

            margin-right: 15px;

            text-decoration: none;

        }

        .unUse

        {

            color: gray;

        }

    </style>

2、准备一个Div用来渲染分页按钮

<body>

    <h1 id="result">

        当前页码：[ 1 ]</h1>

    <div id="pager">

    </div>

</body>

3、编写分页功能

(function ($) {

    $.fn.pager = function (options) {

        var defaults = {

            pageNum: 1,

            pageCount: 1

        };

        var opts = $.extend(true, defaults, options);

        //return this.each(function () {

        return $(this).empty().append(renderPager(parseInt(opts.pageNum), parseInt(opts.pageCount), opts.btnCallback));

        //});

    };

    function renderPager(pageNum, pageCount, btnCallback) {

        var $pager = $('<div id="pageA"></div>');

        $pager.append(renderBtn('首页', pageNum, pageCount, btnCallback)).append(renderBtn('上一页', pageNum, pageCount, btnCallback));

        $pager.append(renderBtn('下一页', pageNum, pageCount, btnCallback)).append(renderBtn('尾页', pageNum, pageCount, btnCallback));

        //$pager.append('<span></span>');

        return $pager;

    }

    function renderBtn(btn, pageNum, pageCount, btnCallback) {

        var $Button = $('<a href="javascript:;" class="fanye">' + btn + '</a>');

        var currentPage = 1;

        switch (btn) {

            case "首页":

                currentPage = 1;

                break;

            case "上一页":

                currentPage = pageNum - 1;

                break;

            case "下一页":

                currentPage = pageNum + 1;

                break;

            case "尾页":

                currentPage = pageCount;

                break;

        }

        if (btn == "首页" || btn == "上一页") {

            pageNum <= 1 ? $Button.addClass("unUse") : $Button.click(function () { btnCallback(currentPage,pageCount); });

        }

        else {

            pageNum >= pageCount ? $Button.addClass("unUse") : $Button.click(function () { btnCallback(currentPage, pageCount); });

        }

        return $Button;

    }

})(jQuery);

4、调用

<script type="text/javascript" language="javascript">

        $(document).ready(function () {

            var currentPage = 1;

            var pageCount = 10;

            pageBtnCallBack(currentPage, pageCount);

        });

        var pageBtnCallBack = function (currentPage, pageCount) {

            $("#pager").pager({

                pageNum: currentPage,

                pageCount: pageCount,

                btnCallback: pageBtnCallBack

            });

            $("#result").html("当前页码：[ " + currentPage + " ]");

        };

    </script>

通用分页（Jquery版）的更多相关文章

  1. ReactJS实现的通用分页组件

    大家多少都自己写过各种版本的分页工具条吧,像纯服务版的,纯jsWeb板的,Angular版的,因为这个基础得不能再基础的功能太多地方都会用到,下面我给出以个用ReactJS实现的版本,首先上图看下效果 ...

  2. 编写Javascript类库（jQuery版

    编写Javascript类库(jQuery版) - 进阶者系列 - 学习者系列文章 Posted on 2014-11-13 09:29 lzhdim 阅读(653) 评论(1) 编辑 收藏 本系列文 ...

  3. 全自动数据表格JQuery版

    由于最近工作上有些变动,已经快一个月没有写博客了.上一篇博客[React]全自动数据表格组件——BodeGrid介绍了全自动数据表格的设计思路以及分享了一个react.js的实现.但是现实情况中为了节 ...

  4. [转载]jquery版小型婚礼（可动态添加祝福语）

    原文链接:http://www.cnblogs.com/tattoo/p/3788019.html 前两天在网上不小心看到“js许愿墙”这几个字,我的神经就全部被调动了.然后就开始我 的百度生涯,一直 ...

  5. PHP通用分页(Pager)类

    三种不同展示方式 附上style~ 1. 效果图1 2.效果图2    3. 效果图3 4. 分页类主体 <?php /** * PHP通用分页类 * show(2) 1 ... 62 63 6 ...

  6. jquery版小型婚礼（可动态添加祝福语）

    前两天在网上不小心看到“js许愿墙”这几个字,我的神经就全部被调动了.然后就开始我的百度生涯,一直寻觅许愿墙背景图片和便利贴图片,觅了好久……一直没找到满意的……无意间看到祝福语和一些卡通婚礼图片.最 ...

  7. SQL Server 2008 通用分页存储过程

    1.alert USE [数据库名称] GO /****** Object: StoredProcedure [dbo].[dbTab_PagerHelper] Script Date: 08/22/ ...

  8. SQL Server利用RowNumber()内置函数与Over关键字实现通用分页存储过程（支持单表或多表结查集分页）

    SQL Server利用RowNumber()内置函数与Over关键字实现通用分页存储过程,支持单表或多表结查集分页,存储过程如下: /******************/ --Author:梦在旅 ...

  9. 支持DISTINCT的通用分页存储过程（SQL2005）

    /****** 对象: StoredProcedure [dbo].[P_CommonPagination] 脚本日期: 07/22/2009 10:22:01 ******/ SET ANSI_NU ...

  10. ibernate学习笔记5---实体类或属性名与数据库关键字冲突、hql命名参数、hql实现通用分页

    一.实体类或属性名与数据库关键字冲突问题1.实体类名与数据库中的关键字冲突比如:实体表User与oracle中的系统表冲突解决方式1:在xml中添加table属性,指定表名,使其不与name默认相等 ...

随机推荐

  1. 2018年东北农业大学春季校赛 D wyh的迷宫【搜索】

    链接:https://www.nowcoder.com/acm/contest/93/D来源:牛客网 题目描述 给你一个n*m的迷宫,这个迷宫中有以下几个标识: s代表起点 t代表终点 x代表障碍物 ...

  2. NOIP2016模拟赛三 Problem C: 不虚就是要AK

    题目大意 给定一棵带有边权的树, 问你在树上随机选两个点, 它们最短路径上的边权之和为\(4\)的倍数的概率为多少. Solution 树分治. 没什么好讲的. #include <cstdio ...

  3. 这算是CSS的bug吗？

    移动端web开发越来越火,同时移动端适配也是一个很让人头疼的事情,你不能让一个同样大小的元素在不同的设备上都显示一样大小.(iphone6和iphone4下大小肯定是应该不一样的,否则用户体验很差) ...

  4. 我希望早几年知道的5个Unix命令

    使用*nix系统已经有一段时间了.但还是有一些命令是被我一直忽略的,真希望我能早几年发现这些命令. 1. man ascii 这个命令会打印出八进制.十六进制和十进制的ASCII码表.难以置信我是一个 ...

  5. iscroll 子表左右滚动同时保持页面整体上下滚动

    if ( this.options.preventDefault && !utils.isBadAndroid && !utils.preventDefaultExce ...

  6. vps

    vps是指虚拟专用服务器(Virtual Private Servers),等同于一台远程计算机,有独立的IP地址,全天24小时不关机,可以部署博客.应用.服务 ***简称SS,可以用来搭建FQ服务器 ...

  7. 【重点突破】——Canvas技术绘制音乐播放器界面

    一.引言 在用Canvas练习制作了验证码之后,还有一个用Canvas技术很综合的练习——制作音乐播放器.在做这个练习的过程中,还有一个重要的观察点,那就是理解Canvas的一大问题. 二.要求  点 ...

  8. VC++动态链接库(DLL)编程深入浅出(一)

    1.概论 先来阐述一下DLL(Dynamic Linkable Library)的概念,你可以简单的把DLL看成一种仓库,它提供给你一些可以直接拿来用的变量.函数或类.在仓库的发展史上经历了“无库-静 ...

  9. HBase笔记

    吴超 1.1 Hbase是Hadoop中的数据库,Hadoop还需要数据库吗?我们学的Hadoop是一个分布式的存储和计算的平台 为什么要在他上面建一个数据库呢,数据库是干什么的呢,数据库是一个管理系 ...

  10. 云数据库 RDS 版怎么创建数据库和账号MySQL 5.7版

    若要使用云数据库RDS,您需要在实例中创建数据库和账号.对于MySQL 5.7版本的实例,您需要通过RDS控制台创建一个初始账号,然后可以通过数据管理(DMS)控制台创建和管理数据库.本文将主要介绍在 ...