jQuery+ROW_NUMBER实现超级简单分页（不可错过）

最新推荐文章于 2020-02-28 22:02:34 发布

JIN20468320

最新推荐文章于 2020-02-28 22:02:34 发布

阅读量4.4k

点赞数

分类专栏： .net 技术文章文章标签： jquery jquery插件 border javascript function web开发

本文链接：https://blog.youkuaiyun.com/jin20468320/article/details/4181672

版权

.net 技术文章专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种利用jQuery插件JQueryPager实现网页分页的方法。通过简单的代码配置即可快速实现分页功能，并提供了完整的HTML、JavaScript及C#示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面分页对于程序员来说最熟悉不过，在WEB开发中经常需要对页面进行分页，jQuery插件JQuery Pager分页器能轻松实现javascript分页功能，只需要几行代码，就可以轻松搞定，实例效果图如下：

简单明了，下面我介绍一下实现过程：

首先需要使用jQuery库文件和JQuery Pager库文件，请点击下载。

分页样式page.css会在你下载的jQuery库文件里面，当然你可以选择拷贝下面，或者自己做修改

接下来，我们来看看jQuery实现代码段：

下面则是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(); } }

这里我没有将读数据库的代码放在这里，我想这个也是极其简单的，这里就不贴出来了，下面我将分页存储过程贴一下：

这就是用ROW_NUMBER写的存储过程，简单吧，当然要注意需要传的两个参数：

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

开始索引，结束索引，OK了！

我看了网上的相关文章，很多直接是将jQuery的分页控件直接引用过来或者将必优博客的JQuery Pager分页器那篇文章直接转载，我觉得还是自己动手实现一下,OK！