jQuery+ROW_NUMBER实现超级简单分页(不可错过)
2009-05-14 09:32
1071 查看
页面分页对于程序员来说最熟悉不过,在WEB开发中经常需要对页面进行分页,jQuery插件JQuery Pager分页器能轻松实现javascript分页功能,只需要几行代码,就可以轻松搞定,实例效果图如下:
![](http://images.cnblogs.com/cnblogs_com/yangtongnet/1.png)
简单明了,下面我介绍一下实现过程:
首先需要使用jQuery库文件和JQuery Pager库文件,请点击下载。
分页样式page.css会在你下载的jQuery库文件里面,当然你可以选择拷贝下面,或者自己做修改
接下来,我们来看看jQuery实现代码段:
下面则是html页面代码
当然这里要注意的是 <div id="pager" ></div>,它就是jQuery的分页控件,如果大家对他的样式不满意可以自行修改。下面我们来看看C#实现代码:
这里我没有将读数据库的代码放在这里,我想这个也是极其简单的,这里就不贴出来了,下面我将分页存储过程贴一下:
这就是用ROW_NUMBER写的存储过程,简单吧,当然要注意需要传的两个参数:
int startIndex = page * pagecount + 1;
int endIndex = startIndex + pagecount - 1;
开始索引,结束索引,OK了!
我看了网上的相关文章,很多直接是将jQuery的分页控件直接引用过来或者将必优博客的JQuery Pager分页器那篇文章直接转载,我觉得还是自己动手实现一下,OK!
![](http://images.cnblogs.com/cnblogs_com/yangtongnet/1.png)
简单明了,下面我介绍一下实现过程:
首先需要使用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实现代码段:
<mce: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; } // --></mce: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" mce_style="border-collapse:collapse"> <tr style="backGround-color:#CCCCFF" mce_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" mce_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" mce_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了!
我看了网上的相关文章,很多直接是将jQuery的分页控件直接引用过来或者将必优博客的JQuery Pager分页器那篇文章直接转载,我觉得还是自己动手实现一下,OK!
相关文章推荐
- jQuery+ROW_NUMBER实现超级简单分页(不可错过)
- jQuery+ROW_NUMBER实现超级简单分页(不可错过)
- jQuery+ROW_NUMBER实现超级简单分页(不可错过)
- jQuery+ROW_NUMBER实现超级简单分页(不可错过)
- jQuery+ROW_NUMBER结合Repeater实现简单分页
- 一个最为简单的jquery 分页实现方法!可以用用于理解js分页的原理。
- 用SQL 2005的ROW_NUMBER() 实现分页功能
- 基于jquery的ajax分页控件的简单实现
- 用SQL 2005的ROW_NUMBER() 实现分页功能
- 使用row_number()实现分页
- Row_Number实现分页
- SQL 2005的ROW_NUMBER()实现分页功能(转载)
- jquery实现导航栏鼠标点击后实行背景高亮,点击离开恢复(超级简单!!!!)
- Row_Number实现分页
- 在sql server2005中使用row_number()实现分页
- SQL2005新函数ROW_NUMBER()实现分页
- 用SQL 2005的ROW_NUMBER() 实现分页功能
- SQL Server利用RowNumber()内置函数与Over关键字实现通用分页存储过程(支持单表或多表结查集分页)
- sql 用ROW_NUMBER() over函数简单分页