jQuery分页原理

来源：互联网发布：能看日漫的漫画软件编辑：程序博客网时间：2024/06/11 02:10

源码下载地址：

分页插件jquery.simplepager.js：

// JScript 文件 
$.fn.mypagination = function(totalProperty,opts){   
    opts = $.extend({   
        perPage:10,   
    
        callback:function(){   
             //$("#feeds").load("htmlpage?page="+page); 
        }   
    },opts||{});   
           
    return this.each(function(){   
        function numPages(){   
            return Math.ceil(totalProperty/opts.perPage);   
        }   
    
           
        function selectPage(page){   
            return function(){   
                currPage = page;   
                if (page<0) currPage = 0;   
                if (page>=numPages()) currPage = numPages()-1;   
                render();   
    
                $('img.page-wait',panel).attr('src','images/wait.gif');   
                opts.callback(currPage+1);   
                $('img.page-wait',panel).attr('src','images/nowait.gif');   
            }   
        }   
           
        function render(){   
    
            var html = '<table><tbody><tr>'    
                +'<td><a href="#"><img class="page-first"></a></td>'  
                +'<td><a href="#"><img class="page-prev"></a></td>'  
                +'<td><span>第<input type="text" class="page-num">页/共'+numPages()+'页</span></td>'  
                +'<td><a href="#"><img class="page-next"></a></td>'  
                +'<td><a href="#"><img class="page-last"></a></td>'  
                +'<td><img src="images/nowait.gif" class="page-wait"></td>'  
                +'<td><span style="padding-left:50px;">检索到'+totalProperty+'记录</span></td>'  
                +'</tr></tbody></table>';   
            var imgFirst = 'images/page-first-disabled.gif';   
            var imgPrev = 'images/page-prev-disabled.gif';   
            var imgNext = 'images/page-next-disabled.gif';   
            var imgLast = 'images/page-last-disabled.gif';   
            if (currPage > 0){   
                imgFirst = 'images/page-first.gif';   
                imgPrev = 'images/page-prev.gif';   
            }   
            if (currPage < numPages()-1){   
                imgNext = 'images/page-next.gif';   
                imgLast = 'images/page-last.gif';   
            }   
            panel.empty();   
            panel.append(html);   
            $('img.page-first',panel)   
                .bind('click',selectPage(0))   
                .attr('src',imgFirst);     
            $('img.page-prev',panel)   
                .bind('click',selectPage(currPage-1))   
                .attr('src',imgPrev);      
            $('img.page-next',panel)   
                .bind('click',selectPage(currPage+1))   
                .attr('src',imgNext);      
            $('img.page-last',panel)   
                .bind('click',selectPage(numPages()-1))   
                .attr('src',imgLast);   
            $('input.page-num',panel)   
                .val(currPage+1)   
                .change(function(){   
                    selectPage($(this).val()-1)();   
                });   
        }   
           
        var currPage = 0;   
        var panel = $(this);   
        render();   
    
    });   
} 

使用分页的页面：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="jqPager_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jQuery分页原理(Ajax)</title>
    <script type="text/javascript" src="../js/jquery-1.2.6.js"></script>
    <script type="text/javascript" src="../js/jquery.simplepager.js"></script>
    <script type="text/javascript">
        $(function(){   
            $('#mypage').mypagination(10112,{   
                callback:function(page){   
                    //alert(page);  
                    //$("#feeds").html("hello world");
                    $("#feeds").load("PageTest.aspx?page="+page); 
                }   
            });  
            $("#feeds").load("PageTest.aspx?page=1"); 
        }); 
        
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id="mypage" class="mypagination">
            </div>
            <div id="feeds" style="width: 500px; height: 500px; background: #369;">
            </div>
        </div>
    </form>
</body>
</html>

iframe里调用的页面：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageTest.aspx.cs" Inherits="jqPager_PageTest" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>根据地址传来的参数显示某一页</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="lblPager" runat="server" Text="第0页"></asp:Label>
    </div>
    </form>
</body>
</html>

后台：

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class jqPager_PageTest : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Request.QueryString["page"] != null)
            lblPager.Text = "第" + Request.QueryString["page"].ToString() + "页";
        else
            lblPager.Text = "第0页";
    }
}

end