分享一个自己写的jquery分页插件

最新推荐文章于 2024-05-21 17:16:51 发布
最新推荐文章于 2024-05-21 17:16:51 发布
阅读量3.2k 收藏
点赞数

自己写的第一个jquery插件，起名字叫amsetpager。暂定为第一个版本吧，哈哈。

目前实现三种分页吧，一个是普通的通过url按当前页向后台查询数据展示，一种是所有的数据查询完毕进行分页。然后就是通过回调函数进行ajax展示数据。测试ie6好像也没问题。

首先我的js一般，可能代码有些臃肿，有些地方可能代码不是写的好。但是我会努力的，只要大家提提意见哈。

下面是三个例子的集合（asp.net做的一个页面）：

首先是css代码：

<style type="text/css">  
        .pager a{ text-decoration: none; border: 1px solid #e7ecf0;color: #15B;}  
        .pager a:hover{ background-color:#E6EBEF}  
        .pager a,.pager span{display: inline-block;padding: 0.1em 0.4em;margin-right: 5px; margin-bottom: 5px;}  
        .selectno{background: #26B;color: #fff;border: 1px solid #AAE;}  
    </style>

.pager是分页的容器的class，.selectno就是选中页class。

然后js代码：

<script type="text/javascript">
        $(function () {
            //url分页
            $("#tab_url").AmSetPager({
                'pagerName': 'pager1',
                'mode': 'url',
                'dataCount': '<%=DataCount %>', //后台获取总条数
                'viewCount': '<%=viewCount %>', //配置每页显示
                'listCount': 6,                 //默认模板此值不能小于5
                'urlparameter': 'type=3&d=22'   //最后一个参数是你其他的查询参数，没有的话就不用添加
            }); 
            //静态的分页
            $("#tab_static").AmSetPager({
                'pagerName': 'pager2',
                'mode': 'static',
                'viewCount': 5,
                'listCount': 9
            });
            //回调的分页（mode选ajax，static也行--那静态分页也没效果了）
            $("#tab_ajax").AmSetPager({
                'pagerName': 'pager3',
                'mode': 'ajax',
                'dataCount': '<%=DataCount %>', //后台获取总条数
                'viewCount': '<%=viewCount %>', //配置每页显示
                'listCount': 7,
                'callback': function (e, i, c) {  //分别代表e：数据父容器，i：当前页，c：每页显示多少条数据
                    e.html('loding...'); //就是加个效果
                    $.getJSON("getdata.ashx", { "index": i, "count": c }, function (data) {
                        e.html('');     //先清空遗留数据
                        for (var i = 0; i < data.length; i++) {
                            e.append("<li>" + data[i] + "......</li>");
                        }
                    })
                }
            });
        })
    </script>

主要一些配置参数（有些可配置的直接写在代码里了，做的不是很好，以后会改的）

pagerName: "pager",			//分页的容器
viewCount: 5,				//可显示多少条数据
dataCount: 0,				//如果后台取数据，总数多少（静态的不用）
selectClass: "selectno",			//选中的样式

listCount:10,				//显示多少个分页码（不包括前一页，后一页）
enablePrevNext:true,		//允许显示前一页后一页
enableFirst:true,			//允许只有一页的情况下显示页码
template:"default",			//模板（现只有default）
			
mode:"static",				//"url" or "ajax"
urlparameter:"",		//url参数,后面aa=1&bb=2...
callback:null			//回调函数（ajax取数据或者静态也可以使用）

下面是三个分页的html代码： 

<div style=" border:1px solid blue; margin:10px;padding:5px">
        <h3>url分页，就是后台查询数据根据url参数分页</h3>
        <table id="tab_url">
        <asp:Repeater ID="repurl" runat="server">
        <ItemTemplate>
            <tr><td><%#Eval("UName") %></td><td><%#Eval("Age") %></td></tr>
        </ItemTemplate>
        </asp:Repeater>
        </table>
        <div id='pager1' class='pager'></div>
    </div>
    <div style=" border:1px solid gray; margin:10px; padding:5px">
        <h3>static分页，就是查询完毕的静态数据，再进行分页</h3>
        <div id="tab_static">
            <asp:Repeater ID="repstatic" runat="server">
            <ItemTemplate>
                <div><%#Eval("UName") %><span>----------</span><%#Eval("Age") %></div>
            </ItemTemplate>
            </asp:Repeater>
            
        </div>
        <div id='pager2' class='pager'></div>
    </div>
    <div style=" border:1px solid red; margin:10px;padding:5px">
        <h3>回调分页，用于ajax请求数据时，就是自行进行数据展示</h3>
        <ul id="tab_ajax">
            <li>loding...</li>
        </ul>
        <div id='pager3' class='pager'></div>
    </div>

这个应该简单，就是可以使用table，ul或div里放什么元素。

然后就是后台模拟的简单的给repeater进行数据绑定（还有一个ashx文件，用于ajax方式的取数据）

View Code 
 1 protected int DataCount = 0;//总条数
 2         protected int viewCount = 0;//每页显示几条
 3         protected void Page_Load(object sender, EventArgs e)
 4         {
 5             if (!IsPostBack) 
 6             {
 7                 int p = int.Parse(string.IsNullOrEmpty(Request.QueryString["p"])? "1" : Request.QueryString["p"]);//索引页
 8                 DataCount = GetDataCount();
 9                 viewCount = 6;
10                 BindData(p,viewCount);//url分页数据
11                 BindTotalData();    //用于静态分页数据
12             }
13         }
14         int GetDataCount()
15         {
16             //下面仅是示例
17             return 50;
18         }
19         List<Users> GetData(int p,int v)
20         {
21             List<Users> list = new List<Users>();
22             //下面仅是示例
23             for (int i = 0; i < v; i++)
24             {
25                 Users u = new Users();
26                 u.UName = p + "----"+i+"abc";
27                 u.Age = i + 1;
28                 list.Add(u);
29             }
30             return list;
31         }
32         List<Users> GetTotalData()
33         {
34             List<Users> list = new List<Users>();
35             //下面仅是示例
36             for (int i = 0; i < DataCount; i++)
37             {
38                 Users u = new Users();
39                 u.UName =  "----" + i + "abc";
40                 u.Age = i + 1;
41                 list.Add(u);
42             }
43             return list;
44         }
45 
46         void BindData(int p,int v)
47         {
48             this.repurl.DataSource = GetData(p, v);
49             this.repurl.DataBind();
50         }
51         void BindTotalData()
52         { 
53             this.repstatic.DataSource = GetTotalData();
54             this.repstatic.DataBind();
55         }
56         class Users
57         {
58             public string UName { get; set; }
59             public int Age { get; set; }
60         }
View Code 
 1 /// <summary>
 2     /// getdata 的摘要说明,这个是简单的ajax取数据
 3     /// </summary>
 4     public class getdata : IHttpHandler
 5     {
 6 
 7         public void ProcessRequest(HttpContext context)
 8         {
 9             context.Response.ContentType = "text/plain";
10             int index = int.Parse(context.Request.QueryString["index"]);
11             int count = int.Parse(context.Request.QueryString["count"]);
12             List<string> list = new List<string>();
13             for (int i = 0; i < count; i++)
14             {
15                 list.Add(index.ToString() + new Random().Next(10000));
16             }
17             JavaScriptSerializer sl = new JavaScriptSerializer();
18             context.Response.Write(sl.Serialize(list));
19             context.Response.End();
20         }
21 
22         public bool IsReusable
23         {
24             get
25             {
26                 return false;
27             }
28         }
29     }

完毕

那么先来看下这三种效果吧：

附源码：

分页插件的代码 
/*
 *  Project:    AmSetPager
 *  Description:    a Plugin for creating page numbers
 *  Author:        ameol
 *  License:    v1.0
 */
;(function ( $, window, document, undefined ) {
    // Create the defaults once
    var pluginName = "AmSetPager",
        defaults = {
            pagerName: "pager",            //分页的容器
            viewCount: 5,                //可显示多少条数据
            dataCount: 0,                //如果后台取数据，总数多少（静态的不用）
            selectClass: "selectno",            //选中的样式

            listCount:10,                //显示多少个分页码（不包括前一页，后一页）
            enablePrevNext:true,        //允许显示前一页后一页
            enableFirst:true,            //允许只有一页的情况下显示页码
            template:"default",            //模板（现只有default）
            
            mode:"static",                //"url" or "ajax"
            urlparameter:"",        //url参数,后面aa=1&bb=2...
            callback:null            //回调函数（ajax取数据或者静态也可以使用）
        };

    // The actual plugin constructor
    function Plugin( element, options ) {
        this.element = element;
        this.options = $.extend( {}, defaults, options );
        //this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }
    
    //private
    //获取url参数
    var getQueryString = function (name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return undefined;
    }
    //静态模板数据展示
    var Bind_StaticData = function($content,minnum,maxnum) {
        if (minnum > 0) {
            $content.children(":gt(" + (minnum - 1) + "):lt(" + maxnum + ")").css("display", "block");
        } else {
            $content.children(":lt(" + maxnum + ")").css("display", "block");
        }
        $content.children(":lt(" + (minnum) + ")").css("display", "none");
        $content.children(":gt(" + (maxnum - 1) + ")").css("display", "none");    
    }
    
    //主要
    //创建SetPager类
    var SetPager = function (options,pageCount){
        this.op = options;
        this.pageCount = pageCount;
    }
    SetPager.prototype = {
        //格式化成a元素
        FormatStr : function(pageNo, pageText) {
            var href = this.op.mode=='url'?location.pathname+"?"+this.op.urlparameter+"&p="+pageNo:"javascript:void(0);";
            if (typeof (pageText) == "number") {
                return "<a href='"+href+"' >" + pageText + "</a>";
            }
            return "<a href='"+href+"' i='" + pageNo + "'>" + pageText + "</a>";
        },
        //选中状态a元素
        FormatStrIndex : function(pageNo){
            return "<span class='"+this.op.selectClass+"'>" + pageNo + "</span>";
        },    
        //默认模板初始化页码集合
        InitDefaultList : function(_pageIndex){
            if(this.op.listCount<5)
                    throw new Error("listCount must be lager than 5");    //listCount>5
            var pageIndex = parseFloat(_pageIndex);        //转化为number
            var ns = new Array();
            var numList = new Array(this.op.listCount);    
            if (pageIndex >= this.op.listCount) {   
                numList[0] = 1;
                numList[1] = "…";    
                var infront = 0;
                var inback = 0;
                var inflag = Math.floor((this.op.listCount-2)/2);
                if(this.op.listCount%2==0){
                    infront = inflag-1;
                    inback = inflag;
                }else{
                    infront = inflag;
                    inback = inflag;
                }
                if (pageIndex + inback >= this.pageCount) {                
                    for (i = this.pageCount - (this.op.listCount-3); i < this.pageCount + 1; i++) {
                        ns.push(i);
                    }
                    for (j = 0; j <= (this.op.listCount-3); j++) {  
                        numList[j + 2] = ns[j];
                    }
                }
                for (i = pageIndex - infront; i <= pageIndex + inback; i++) {
                    ns.push(i);
                }
                for (j = 0; j < (this.op.listCount-2); j++) {
                    numList[j + 2] = ns[j];
                }
            } else {              
                if (this.pageCount >= this.op.listCount) {                               
                    for (i = 0; i < this.op.listCount; i++) {
                        numList[i] = i+1;
                    }
                } else {                        
                    for (i = 0; i < this.pageCount; i++) {
                        numList[i] = i+1;
                    }
                }
            }
            return numList;
        },
        //生成页码
        InitPager : function(pageIndex){
            $("#"+this.op.pagerName).html('');
            if(this.op.enableFirst==false&&this.pageCount<=1){
                return null;
            }
            var array = new Array();
            //var finalarr = new Array();
            var $con = $("#"+this.op.pagerName);
            //var pageIndex = parseFloat(pageIndex);
            switch(this.op.template){    //选择模板
                case 'default':array = this.InitDefaultList(pageIndex,this.pageCount);break;
                default:array = this.InitDefaultList(pageIndex,this.pageCount);
            }
            if(!array instanceof Array){
                throw new Error("is not array");
            } 
            if(array.length!=this.op.listCount){
                throw new Error("array.length error:"+array.length);
            }
            if(pageIndex>1&&this.op.enablePrevNext){
                $con.append(this.FormatStr(pageIndex-1,'上一页'));      
            }    
            for(var i=0;i<array.length;i++){
                if(typeof array[i]=='undefined'){
                    continue;
                }
                if(pageIndex==array[i]){
                    $con.append(this.FormatStrIndex(array[i]));
                }else if(typeof array[i]=='number'){
                    $con.append(this.FormatStr(array[i],array[i]));
                }else{
                    $con.append(array[i]);
                }
            }
            if(pageIndex<this.pageCount&&this.op.enablePrevNext){
                $con.append(this.FormatStr(pageIndex+1,'下一页'));             
            }
            //$("#"+this.op.pagerName).append(finalarr);
        }
    }
    
    Plugin.prototype = {
        //初始化
        init: function() {
            var options = this.options;
            var $thisbase = $(this.element);
            var $content;
            if($thisbase.is(':has(tbody)')){                    
                $content=$thisbase.children();
            }
            else{
                $content=$thisbase;
            }    
            var count = options.mode=='static'?$content.children().length:options.dataCount;        
            var eachcount = options.viewCount;                
            var totalpage = Math.ceil(count / eachcount); 
            var $pager = $("#"+options.pagerName);
            var setpager = new SetPager(options,totalpage);        //init
            if(options.mode=='url'){
                var urlindex = getQueryString("p");
                if(isNaN(urlindex)){
                    setpager.InitPager(1);
                }else{
                    urlindex = parseFloat(urlindex);
                    setpager.InitPager(urlindex>totalpage?totalpage:urlindex);
                }
            }else{
                setpager.InitPager(1);
                if(options.mode=='static'&&typeof options.callback!='function'){
                    Bind_StaticData($content,0,eachcount);
                }else{
                    options.callback($content,1,options.viewCount);
                }
                $pager.bind("click",function(e){        //click事件
                    if(e.target.tagName!='A') return;
                    var $this = $(e.target);
                    $this.removeAttr("href").siblings().attr("href", "javascript:void(0);");//..
                    var indexnum = parseInt($this.html())==$this.html()?parseInt($this.html()):parseInt($this.attr('i'));
                    var maxnum = (indexnum * eachcount);
                    var minnum = (indexnum - 1) * eachcount;
                    if(options.mode!='static'&&options.mode!='ajax'){
                        throw new Error("mode must be selected:static,url,ajax");
                    }
                    if(options.mode=='static'&&typeof options.callback!='function'){
                        setpager.InitPager(indexnum);
                        Bind_StaticData($content,minnum, maxnum);
                    }else{
                        setpager.InitPager(indexnum);
                        options.callback($content,indexnum,options.viewCount);
                    }
                });
            }
        }
    };
    
    
    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Plugin( this, options ));
            }
        });
    };

})( jQuery, window, document );

 

给个demo下载链接吧   点这里


<script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
Jlins
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery分页插件
07-07
一个jQuery的分页插件，是在原来网上下载的jQuery的插件上扩展的，原来的是只有按钮的，扩展新增了可以选择用文本框或下拉框来选择跳转页面。因为出现过乱码问题，所以中文的那个里面的中文字符是用的Unicode的编码
分享一个自己动手写的jQuery分页插件
12-11
工作需要一个JS分页插件，心想自己动手写一个吧，一来上网找一个不清楚代码结构的，出了问题难以解决，而且网上的插件所包含的功能太多，有些根本用不到，就没必要加载那段JS，二来想起没写过jQuery插件，就当练一下...
jquery分页插件
Admans的专栏
07-21 1632
* * * * jquery分页插件 * 1.0 zheng 2014-03-18 * 1.1 兼容url包含#号地址，GoToPage可以指定锚点（特殊需求）2014-04-10 09:00:34 * 1.2 可以配置分页条列出页面数 * 1.3 增加了页面码跳转功能 * $('#mypage').scPagination(555, { * pageSize: 10,//每页显示的记录条数 * myPagerCount:10,//分页条显示的页
基于jquery的分页器插件Pagination.js
最新发布
宝码香车的博客
05-21 334
导航器（formatNavigator），页码器（PageNumbers），跳转器（GoInput）。根据需要对这三部分进行设置。一般普通的就够用了。
jquery分页插件_jQuery分页插件
02-22 245
jquery分页插件 这篇热门文章已于2017年2月更新，以反映jQuery分页插件的当前状态。 呈现冗长而笨拙的结果列表通常是显示信息的一种糟糕方法。 这就是为什么分页（尤其是内容较长的分页）对于正确设置很重要。 服务器端分页通常用于获取分页的内容，显示一组分为页面的结果（通常具有唯一的URL）。 尽管这很好，但客户端分页是另一种解决方案。 让我们来看看一些基于jQuery的插件，您可以...
利用JQuery写一个简单的异步分页插件
11-23
在本文中，我们将探讨如何利用jQuery来创建一个简单的异步分页插件。这个插件适用于需要动态加载数据的Web应用程序，特别是在用户界面中展示大量数据时，分页能提高用户体验并减少页面加载时间。 首先，我们需要...
使用JQuery实现的分页插件分享
11-22
总结，这个jQuery分页插件提供了一个简洁的框架，允许开发者快速实现分页功能，同时保持良好的扩展性和可定制性。通过理解插件的内部逻辑，我们可以根据项目需求进行调整，以达到最佳的用户体验。
最实用的jQuery分页插件
10-21
总的来说，这个jQuery分页插件是一个轻量级、易于理解和使用的工具，适用于需要快速实现分页功能的项目。它的设计兼顾了功能性和效率，能够满足大部分常规的分页需求。如果你正在寻找一个简单的jQuery分页解决方案，...
jQuery插件--分页插件
03-17
NULL 博文链接：https://gogole.iteye.com/blog/457627
jQuery分页插件jQuery.pager.js
03-24
插件描述：表格分页，li分页.
Jquery 分页插件
明天也要努力的博客
08-23 608
1. 背景 找到一款自认为不错的分页组件，《js版的QuickPager分页控件 V2.0》，想下载完整的资源，js/css等,不过找了一会，没找到，联系博主也没有回复。那直接看了页面引用了js文件，下载下来改写了一下，同时借此机会进一步掌握封装jquery组件。虽说有重复造轮子之嫌，不过只有重复造了轮子，才能更好的掌握。不是曾经有位大神说过，“看再多的框架，不如亲自动手写一个框架。” 效果图 代码地址 https://gitee.com/zhengyis/jquery-pagination.git 2
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值