HTML

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style>

        .pageInit

        {

            padding: 5px 10px;

            border: 1px solid #ff9600;

            text-decoration: none;

            color: #ff6500;

            margin-left: 10px;

        }

        .pageSelected

        {

            padding: 5px 10px;

            border: 1px solid #ff6500;

            text-decoration: none;

            color: #ff6500;

            background: #ffbe94;

            margin-left: 10px;

        }

    </style>

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    <script src="Scripts/JScript1.js" type="text/javascript"></script>

    <script>

        $(function () {

            console.log($("table tbody tr").length);

            //类级别 ，通过jQuery访问（即$）

            //$.simplePaging({ table: $("table"), pageSize: 5, currentPage: 0 });

            //对象级别，通过对象访问（即$("table")）

            $("table").simplePaging({ pageSize: , currentPage:  });

        });

    </script>

</head>

<body>

    <table>

        <thead>

            <tr>

                <td>

                    第一列

                </td>

                <td>

                    第二列

                </td>

                <td>

                    第三列

                </td>

                <td>

                    第四列

                </td>

                <td>

                    第五列

                </td>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

            </tr>

            <tr>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

            </tr>

            <tr>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

            </tr>

            <tr>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

            </tr>

            <tr>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

            </tr>

            <tr>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

            </tr>

            <tr>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

            </tr>

            <tr>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

            </tr>

            <tr>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

            </tr>

            <tr>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

            </tr>

            <tr>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

            </tr>

            <tr>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

            </tr>

            <tr>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

            </tr>

            <tr>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

            </tr>

            <tr>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

            </tr>

            <tr>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

            </tr>

            <tr>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

            </tr>

            <tr>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

            </tr>

            <tr>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

            </tr>

            <tr>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

            </tr>

            <tr>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

                <td>

                </td>

            </tr>

        </tbody>

    </table>

</body>

</html>

jQuery插件（文件名：JScript.js）

/**

* 插件内部方法，外部无法访问，要求：table的绘制需要规范，即table需要采用如下格式:

* <table>

* <thead>

* </thead>

* <tbody>

* </tbody>

* </table>

* 说明：本分页函数仅对tbody中的行进行分页显示

*

* @param {} table   table对象    。  必须参数

* @param {} pageSize  每页显示的行数 。必选参数

* @currentPage 当前页，索引值从0开始，默认值为0,即0代表第一页。 可选参数

*/

(function ($) {

    ////类级别 ，通过jQuery访问（即$），访问方式如：$.simplePaging({ table: $("table"), pageSize: 5, currentPage: 0 });

    //    var defaults = {

    //        mytable: null,

    //        pageSize: 5,

    //        currentPage: 0

    //    };

    //    $.extend({

    //        simplePaging: function (options) {

    //            $.extend(defaults, options); //使用jQuery.extend 覆盖插件默认参数

    //            return paging(options.mytable, options.pageSize, options.currentPage);

    //        }

    //    });

    /*对象级别，通过对象访问（即$("table")） 访问方式如：$("table").simplePaging({ pageSize: 6, currentPage: 1 });*/

    var defaults = {

        pageSize: ,

        currentPage:

    };

    $.fn.simplePaging = function (options) {

        var opts = $.extend({}, defaults, options); //使用jQuery.extend 覆盖插件默认参数

        return this.each(function () { //这里的this 就是 jQuery对象

            //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。

            var $this = $(this); //获取当前dom 的 jQuery对象，这里的this是当前循环的dom

            //根据参数来设置 dom的样式

            paging($this, opts.pageSize, opts.currentPage);

        });

    };

    //插件内部方法，外部无法访问

    function paging(table, pageSize, currentPage) {

        var $table = $(table); //表格对象

        if (currentPage == null || currentPage < ) {

            currentPage = ;

        }

        var sumRows = $table.find('tbody tr').length; //总行数

        var sumPages = Math.ceil(sumRows / pageSize); //总页数

        if (sumPages == currentPage) {

            currentPage--;

        }

        //默认所有行都隐藏，然后根据分页显示

        $table.find('tbody tr').hide().slice(currentPage * pageSize, (currentPage + ) * pageSize).show();

        //避免多次调用产生重复的页码

        $table.next("div[tablePagingDiv]").remove();

        if (sumPages > ) {

            $table.bind('paging', function () {

                //默认所有行都隐藏，然后根据分页显示

                $table.find('tbody tr').hide().slice(currentPage * pageSize, (currentPage + ) * pageSize).show();

            });

            //页码div

            var $pager = $('<div tablePagingDiv="" style="height:40px;line-height:40px;"></div>');

            for (var pageIndex = ; pageIndex < sumPages; pageIndex++) {

                $('<a href="#"><span>' + (pageIndex + ) + '</span></a>').bind('click', { 'newPage': pageIndex }, function (event) {

                    currentPage = event.data['newPage'];

                    $(this).addClass('pageSelected').siblings().removeClass('pageSelected');

                    //为每一个要显示的页数上添加触发分页函数

                    $table.trigger('paging');

                }).appendTo($pager);

                $pager.append(" ");

            }

            //添加初始化css

            $('a', $pager).addClass('pageInit');

            $('a:eq(' + currentPage + ')', $pager).addClass('pageSelected').siblings().removeClass('pageSelected');

            $pager.insertAfter($table);

            //在table上触发paging事件

            $table.trigger('paging');

        }

    }

})(jQuery);

源码：自己封装jquery插件.zip

jquery插件封装的更多相关文章

  1. 最简单的原生js和jquery插件封装

    最近在开发过程中用别人的插件有问题,所以研究了一下,怎么封装自己的插件. 如果是制作jquery插件的话.就将下面的extend方法换成  $.extend 方法,其他都一样. 总结一下实现原理: 将 ...

  2. 【jQuery】jquery插件封装

    扩展jQuery插件开发的基本知识,最佳做法和常见的陷阱. 入门 编写一个jQuery插件开始于给jQuery.fn加入​​新的功能属性,此处添加的对象属性的名称就是你插件的名称: jQuery.fn ...

  3. jQuary总结11:jQuery插件封装---jQuery封装 手风琴 动画插件

    完整代码下载点击我的GitHub: https://github.com/XingJYGo/jquery-accordion 1 手风琴的效果展示如下: 2 封装插件目录结构如下: 主要包括:HTML ...

  4. jquery插件封装成seajs模块

    jquery直接在html中引入. jquery插件修改为: define(function (require, exports, moudles) { return function (jquery ...

  5. jQuery插件封装系列（一）—— 金额录入框

    基于jQuery原型封装数值录入框,禁止录入.粘贴非数值字符 (function ($) { // 数值输入框 $.fn.numbox = function (options) { var type ...

  6. jquery插件封装思路整理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. (jQuery 插件)封装容器的表单为json对象

    下面代码可以把一个页面容器中的表单元素封装成一个json对象. (function($){ $.fn.serializeObject=function(){ var inputs=$(this).fi ...

  8. jQuery 插件封装的方法

    方式1.$.fn.xxx ==>针对元素添加方法: ;(function ($) { $.fn.m​​yPlugin = function () { //你自己的插件代码 }; })(jQuer ...

  9. jquery 插件封装模板

    //插件编写模板 ;(function ($) { $.fn.plugIn = function ( opt ) { var def = { //这里填写自定义的参数例如: event : 'clic ...

随机推荐

  1. 图片预加载之模拟img.load()

    function imgBatchLoad(){ var instance = this; this.loadCount = 0; this.images = []; this.imgCount = ...

  2. Nginx 反向代理、负载均衡

    ## Nginx 反向代理. (一)简介 一.什么是代理服务器 客户机原本发送给服务器的请求,不会直接发送给服务器,而是先发送给代理服务器:经过代理服务器处理后转发给服务器:服务器数据处理后转回给代理 ...

  3. 判断DataRow中是否包含某列

    DataRow dr = new DataRow(); if (dr!=null && dr.Table.Columns.Contains("errormesg") ...

  4. C++中使用const修饰指针

    在本文中呢,主要讲解四个方面,即:常量数据的与否和常量指针的与否中const如何对指针进行修饰: 1.指向非常量数据的常量指针 对于一个指向非常量数据的常量指针,我们应该清楚的知道,在这我们注重的是指 ...

  5. 有点难度的JS面试题

    自己总结了一些JS面试题 希望能够帮助正在找工作的程序猿(●´∀｀●) 1.js 实现一个函数对javascript中json 对象进行克隆 var oldObject ="sdf" ...

  6. HDU 6047 Maximum Sequence(线段树)

    题目网址:http://acm.hdu.edu.cn/showproblem.php?pid=6047 题目: Maximum Sequence Time Limit: 4000/2000 MS (J ...

  7. Spring源码情操陶冶-AbstractApplicationContext#initApplicationEventMulticaster

    承接前文Spring源码情操陶冶-AbstractApplicationContext#initMessageSource 约定web.xml配置的contextClass为默认值XmlWebAppl ...

  8. 【Mysql】复制表结构+数据（转）

    1:复制表结构及数据到新表 select * into 目的数据库名.dbo.目的表名 from 原表名 select * into my0735home.dbo.infoMianTest from ...

  9. MySQL学习笔记(四)：存储引擎的选择

    一:几种常用存储引擎汇总表 二:如何选择 一句话:除非需要InnoDB 不具备的特性,并且没有其他办法替代,否则都应该优先考虑InnoDB:或者,不需要InnoDB的特性,并且其他的引擎更加合适当前情 ...

  10. HDU-4787 GRE Words Revenge 解题报告

    这是我之前博客里提到的一道AC自动机的练手题,但是要完成这道题,我之前博客里提到的东西还不够,这里总结一下这道题. 这道题不是一般的裸的AC自动机,它的询问和插入是交叉出现的所以用我之前写的板子不大合 ...