JQuery Ajax无刷新分页的实例代码

先看效果图

实现原理很简单，使用了jquery.pagination这个插件，每当点击页码时异步去服务器去取该页的数据，简单介绍如下：一、数据库表结构：很简单就四个字段分别是新闻_id新闻_标题新闻_时间新闻_阅读时间二、前台页面代码：复制代码代码如下： head runat=' server ' title jquery无刷新分页/title link href=' style/common。CSS ' rel='样式表type=' text/CSS '/link href=' style/paging。CSS ' rel='样式表type=' text/CSS '/脚本src=' http :脚本/jquery-1。4 .1 .js ' type=' text/JavaScript '/脚本脚本src=' http 3360脚本/jquery。传呼。js ' type=' text/JavaScript '/脚本脚本var page SiZe=3；$(function(){ InitTable(0))；$(' #分页').分页(%)=页数%，{ callback: PageCallback，prev_text: '上一页，next_text: '下一页，items_per_page: pageSize，num _ display _ entries: 6，//连续分页主体部分分页条目数current_page: pageIndex，//当前页索引num _ edge _ entry : 2/两侧首尾分页条目数});//翻页调用函数PageCallback(index，jq){ InitTable(index)；} //请求数据函数InitTable(pageIndex) { $ .ajax({ type: 'POST '，dataType: 'text '，URL : ' Ajax/page处理程序。ashx '，数据： '页面索引='(页面索引1)'页面大小='页面大小，成功：函数（数据){ $(' # Result tr 3360 gt(0)').移除();//移除身份为结果的表格里的行，从第二行开始（这里根据页面布局不同页变)$(“# Result”).追加（数据);//将返回的数据追加到表格} });} });/脚本/标题复制代码代码如下：窗体id='form1' runat='server '中心表id=' Result '边框=' 1 '单元格填充=' 5 '样式=' border-collapse : collapse；余量：20pxborder:固体1px # 85 A8 beyond th :60% ' tr th style=' width : 10% ' ID/th style=' width : 60% '标题/th style='宽度： 20% '更新时间/th style=' width : 10% '点击量/th/tr/table div id=' Pagination ' class=' paging '/div/center/form三、页面后台文件这里主要是获取记录总数：复制代码代码如下：公共字符串页面计数=字符串。空的；//总条目数受保护的无效页面_加载(对象发送方，事件参数e) { if(！IsPostBack) { pageCount=new News().getnewscout()；} }四、最主要的是创建交互式、快速动态网页应用的网页开发技术处理程序：PagerHandler.ashx复制代码代码如下：公共类页面处理程序： IHttpHandler { public void process request(HttpContext context){ context .响应。内容类型='文本/纯文本；字符串字符串=字符串。空的；整数页索引=转换.ToInt32(上下文。请求[' PageIndex '])；int size=转换.ToInt32(上下文。请求[' PageSize '])；if(PageIndex==0){ PageIndex=1；} int count=0；新闻n=新新闻();ListNews list=n.GetNewsList(页面索引、大小、引用计数);StringBuilder sb=new StringBuilder()；列表中的新闻。追加(“trtd”)；某人(某人的简写)追加(p . News _ id)；某人(某人的简写)追加('/tdtd ')；某人(某人的简写)追加(' a href=' # ' p . News _ title '/a ')；某人(某人的简写)追加('/tdtd ')；某人(某人的简写)追加(p .新闻_时间)；某人(某人的简写)追加('/tdtd ')；某人(某人的简写)追加(p . News _ readtimes)；某人(某人的简写)追加('/TD/tr ')；} str=sb .ToString()；语境。响应。写入（字符串);} public bool IsReuse { get { return false；} } }