頁面分頁對於程序員來說最熟悉不過,在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;
}
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>
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>
<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>
jQuery+ROW_NUMBER實現超級簡單分頁(不可錯過)
頁面分頁對於程序員來說最熟悉不過,在WEB開發中經常需要對頁面進行分頁,jQuery插件JQuery Pager分頁器能輕鬆實現javascript分頁功能,只需要幾行代碼,就可以輕鬆搞定,實例效果圖如下:
#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;
}
<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>
<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>
簡單明瞭,下面我介紹一下實現過程:
首先需要使用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();
}
}
{
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
(@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;
int endIndex = startIndex + pagecount - 1;
開始索引,結束索引,OK了!
我看了網上的相關文章,很多直接是將jQuery的分頁控件直接引用過來或者將必優博客的JQuery Pager分頁器那篇文章直接轉載,我覺得還是自己動手實現一下,OK!