JQuery+Ajax无刷新分页的实例代码
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JQuery+Ajax无刷新分页的实例代码,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2929字,纯文字阅读大概需要5分钟。
内容图文
![JQuery+Ajax无刷新分页的实例代码](/upload/InfoBanner/zyjiaocheng/304/cbc7e7cc7a9d4159ba6919d7d1c07cd8.jpg)
实现原理很简单,使用了jquery.pagination这个插件,每当点击页码时异步去服务器去取该页的数据,简单介绍如下:
一、数据库表结构:很简单 就四个字段 分别是News_id News_title News_time News_readtimes
二、前台页面代码:
<head runat="server"> <title>JQuery无刷新分页</title> <link href="Styles/common.css" rel="stylesheet" type="text/css" /> <link href="Styles/paging.css" rel="stylesheet" type="text/css" /> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script src="Scripts/jquery.pagination.js" type="text/javascript"></script> <script type="text/javascript"> var pageIndex = 0; var pageSize = 3; $(function() { InitTable(0); $("#Pagination").pagination(<%=pageCount %>, { callback: PageCallback, prev_text: '上一页', next_text: '下一页', items_per_page: pageSize, num_display_entries: 6,//连续分页主体部分分页条目数 current_page: pageIndex,//当前页索引 num_edge_entries: 2//两侧首尾分页条目数 }); //翻页调用 function PageCallback(index, jq) { InitTable(index); } //请求数据 function InitTable(pageIndex) { $.ajax({ type: "POST", dataType: "text", url: 'Ajax/PagerHandler.ashx', data: "pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize, success: function(data) { $("#Result tr:gt(0)").remove();//移除Id为Result的表格里的行,从第二行开始(这里根据页面布局不同页变) $("#Result").append(data);//将返回的数据追加到表格 } }); } }); </script> </head>
<form id="form1" runat="server"> <center> <table id="Result" border="1" cellpadding="5" style="border-collapse: collapse; margin:20px; border: solid 1px #85A8BE;width:60%"> <tr> <th style="width: 10%"> ID </th> <th style="width: 60%"> 标题 </th> <th style="width: 20%"> 更新时间 </th> <th style="width: 10%"> 点击量 </th> </tr> </table> <div id="Pagination" class="paging"> </div> </center> </form>
三、页面后台文件
这里主要是获取记录总数:
public string pageCount = string.Empty;//总条目数 protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { pageCount = new News().GetNewsCount(); } }
四、最主要的是ajax处理程序:PagerHandler.ashx
public class PagerHandler : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string str = string.Empty; int pageIndex = Convert.ToInt32(context.Request["pageIndex"]); int size = Convert.ToInt32(context.Request["pageSize"]); if (pageIndex == 0) { pageIndex = 1; } int count = 0; News n = new News(); List<News> list = n.GetNewsList(pageIndex, size, ref count); StringBuilder sb = new StringBuilder(); foreach (News p in list) { sb.Append("<tr><td>"); sb.Append(p.News_id); sb.Append("</td><td>"); sb.Append("<a href='#'>"+p.News_title+"</a>"); sb.Append("</td><td>"); sb.Append(p.News_time); sb.Append("</td><td>"); sb.Append(p.News_readtimes); sb.Append("</td></tr>"); } str = sb.ToString(); context.Response.Write(str); } public bool IsReusable { get { return false; } } }
更多JQuery+Ajax无刷新分页的实例代码相关文章请关注PHP中文网!
内容总结
以上是互联网集市为您收集整理的JQuery+Ajax无刷新分页的实例代码全部内容,希望文章能够帮你解决JQuery+Ajax无刷新分页的实例代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。