jQuery+ROW_NUMBER結合Repeater實現簡單分頁

 

頁面分頁對於程序員來說最熟悉不過，在WEB開發中經常需要對頁面進行分頁，jQuery插件JQuery Pager分頁器能輕鬆實現javascript分頁功能，只需要幾行代碼，就可以輕鬆搞定，實例效果圖如下：

簡單明瞭，下面我介紹一下實現過程：

      首先需要使用jQuery庫文件和JQuery Pager庫文件，請點擊下載。

      分頁樣式page.css會在你下載的jQuery庫文件裏面，當然你可以選擇拷貝下面，或者自己做修改 

#pager ul.pages {
display:block;
border:none;
text-transform:uppercase;
font-size:10px;
margin:10px 0 50px;
padding:0;
}

#pager ul.pages li {
list-style:none;
float:left;
border:1px solid #ccc;
text-decoration:none;
margin:0 5px 0 0;
padding:5px;
}

#pager ul.pages li:hover {
border:1px solid #003f7e;
}

#pager ul.pages li.pgEmpty {
border:1px solid #eee;
color:#eee;
}

#pager ul.pages li.pgCurrent {
border:1px solid #003f7e;
color:#000;
font-weight:700;
background-color:#eee;
}

接下來，我們來看看jQuery實現代碼段：

<script type="text/javascript" language="javascript">
            var page=document.getElementById("hPage").value;
            var count=document.getElementById("hCount").value;
            $(document).ready(function() {
            $("#pager").pager({ pagenumber: page, pagecount: count, buttonClickCallback: PageClick });});
            PageClick = function(pageclickednumber)    
            {
                window.location.href="jQuery_Page.aspx?page="+pageclickednumber;
            }
</script>

下面則是html頁面代碼

<form runat="server">
<h1 id="result">jQuery分頁器</h1>
    <asp:Repeater ID="Repeater1" runat="server">
                <HeaderTemplate>
                <table width="100%" border="1" cellspacing="0" cellpadding="4" style="border-collapse:collapse">
                <tr style="backGround-color:#CCCCFF"><th style="width:15%">IP編號</th><th style="width:15%">IP開始段</th><th style="width:30%">IP結束段</th><th style="width:20%">歸屬地</th><th style="width:20%">操作</th></tr>
                </HeaderTemplate>
                <ItemTemplate>
                <tr style="background-color:#FAF3DC">
                <td><%# Eval("IPid")%></td>
                <td><%# Eval("IPFrom")%></td>
                <td><%# Eval("IPTo")%></td>
                <td><%# Eval("IPLocation")%></td>
                <td></td>
                </tr>
                </ItemTemplate>
                <AlternatingItemTemplate>
                <tr style="background-color:#eaeaea">
                <td><%# Eval("IPid")%></td>
                <td><%# Eval("IPFrom")%></td>
                <td><%# Eval("IPTo")%></td>
                <td><%# Eval("IPLocation")%></td>
                <td></td>
                </tr>
                </AlternatingItemTemplate>
                <FooterTemplate>
                </table>
                </FooterTemplate>
                </asp:Repeater>
                <br />
<div id="pager" ></div>
    
</form>

當然這裏要注意的是 <div id="pager" ></div>，它就是jQuery的分頁控件，如果大家對他的樣式不滿意可以自行修改。下面我們來看看C#實現代碼：

public partial class Page_jQuery_Page : System.Web.UI.Page
{
        public int count;//數據條數
        public int page = 1;//當前頁
        public int pagecount = 5;//每頁顯示數據條數
        protected void Page_Load(object sender, EventArgs e)
        {
                if (!IsPostBack)
                {
                        count = IPDAO.getCount();
                        Bind();
                }
        }
        public void Bind()
        {
                if (Request.QueryString["page"] == null)
                {
                        page = 1;
                }
                else
                {
                        page = int.Parse(Request.QueryString["page"]);
                }
                int startIndex = page * pagecount + 1;
                int endIndex = startIndex + pagecount - 1;
                DataTable dt = IPDAO.getPageDatatable(startIndex, endIndex);
                this.Repeater1.DataSource = dt.DefaultView;
                this.Repeater1.DataBind();
        }
}

 這裏我沒有將讀數據庫的代碼放在這裏，我想這個也是極其簡單的，這裏就不貼出來了，下面我將分頁存儲過程貼一下：

ALTER PROCEDURE [dbo].[P_GetPagedOrders2005]
(@startIndex INT,    
@endindex INT
)
AS
select * from (SELECT ROW_NUMBER() OVER(ORDER BY IPid DESC) AS rownum,
[IPid],[IPFrom],[IPTo],[IPLocation],[IPCity],[IPToNumber],[IPFromNumber] from IPInfo) as U
WHERE rownum between @startIndex and @endIndex

這就是用ROW_NUMBER寫的存儲過程，簡單吧，當然要注意需要傳的兩個參數：

int startIndex = page * pagecount + 1;
int endIndex = startIndex + pagecount - 1;

開始索引，結束索引，OK了！