自定义jQuery插件实现分页

本文介绍了如何编写一个简单的jQuery分页插件。通过在HTML中引入jQuery库,创建一个匿名函数来保护$符号,并利用jQuery的extend方法为其实例和静态部分添加方法,从而实现分页功能。这不仅展示了jQuery插件的编写基础,也是提升jQuery技能的重要步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

大家都说,写个JS,用jQuery时就只会引入一个jQuery类库的话,写个$(‘# ‘),$(‘# ‘),是远远不够的,在学习的jQuery过程中,想要更好的掌握这项技术,还要熟练运用jQuery插件
有时在做一个项目的时候,会遇到很多页面遍历出数据以后数据很多要做分页的情况,所以在最近学习了jQuery以后,将这些分页的功能做成jQuery插件,便于自己的使用。
首先,编辑jQuery插件,写在(function ($) { })(jQuery); 里。这是一个匿名函数,其中jQuery代表这个匿名函数的实参,这样写实际上是为了防止$在外部被修改,起到了定义插件私有域的作用。
然后$.extend(object) 可以理解为JQuery 添加一个静态方法。
$.fn.extend(object) 可以理解为JQuery实例添加一个方法。
代码如下:


//(function ($) { })(jQuery); 定义了一个匿名函数,其中jQuery代表这个匿名函数的实参。
//在开发这样的插件的时候,放置$ 在外部被修改。
//通常用在JQuery插件开发中,起到了定义插件的私有域的作用。
(function($){
//  定义一个jQuery的静态方法     另外 $.fn.extend(object)可以为jQuery定义一个实例方法
    $.extend({
//      以下分页的方法
        pagination : function(setting){
//          在这个保存参数的对象中 你可以添加一些自己的参数 用来完成自己的功能
            var params = {
                    url : "",
                    data : {},
                    success : function(data){
                    }
            };
            for(var attr in setting){
                params[attr] = setting[attr];
            }
//          异步请求  查询到数据后返回 数据中主要使用查到的数据的总页数
            $.ajax({
                url : params.url,
                data:params.data,
                type : "post",
                dataType:"json",
                success:function(data){
//                  得到总页数 开始拼接页面元素
                    var totalPage = data.PageCount;
                    var u_html = "<span class='p_name'>共 "+totalPage+" 页</span><li id='prev'><a><span class='arrow_left'></span></a></li>";
                    for(var i=1;i<=totalPage;i++){
                        u_html +="<li id="+i+"><a>"+i+"</a></li>";
                    }
                    u_html+="<li  id='next'><a><span class='arrow_right'></span></a></li>";
                    $('#upage').empty();
                    $('#upage').append(u_html);
//                  为拼接好的元素添加点击事件 改变page值 回调pagination函数
                    $('#upage').find('li').click(function(){
                        var id= $(this).attr('id');
                        var p = 0;
                        if(id==="prev"){
                            p = params.data.page-1;
                        }else if(id==="next"){
                            p= params.data.page+1;
                        }else{
                            p=id;
                        }
                        if(p<1){p=1;}if(p>totalPage){p=totalPage;}
                        params.data.page = p;
                        $.pagination(params);
                    });
//                  这里执行的是自己想要传过来的方法
                    params.success(data);
                }

            });
        }
    })
})(jQuery);

以上,只是一个简单的jQuery插件的小应用,希望自己在技术的道路上越走越远!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值