基于jquery的分页脚本，非常好用，配合后台生成的json数据。

最新推荐文章于 2025-11-26 18:40:17 发布

原创最新推荐文章于 2025-11-26 18:40:17 发布 · 577 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #json #脚本 #stylesheet #div #url

本文介绍了一种基于jQuery的前端分页插件实现方法，通过Ajax获取数据并利用特定的模板显示获奖名单等列表信息。该插件支持概述信息显示，并可根据不同页面请求展示相应内容。

今天花了好久时间研究出来的，下面给大家共享一下。

首先是前台的html，如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>javascript 获奖名单</title> <mce:script src="js/jquery.pack.js" mce_src="js/jquery.pack.js" type="text/javascript"></mce:script> <mce:script src="js/pagination.js" mce_src="js/pagination.js" type="text/javascript"></mce:script> <link href="/css/common2009.css" mce_href="css/common2009.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="list"> </div> <div class="page_677"> <div id="page"> </div> </div> </body> </html>

可以看到前台只需要几个div的容器。一个是“<div id="list"></div> ”这个是用来显示列表里面的内容的。

“<div class="page_677"> <div id="page"> </div> </div>”这个主要是用来显示页码的。

页面上你只需要写入如下代码即可：

//调用示例 $(function(){ $.url = '/AjaxData/TopCommentsListHandler.ashx?page={0}&tmp='+Math.random();//ajax请求url，必须返回json类型 $.isShowSummary = true;//是否显示概述信息 $.listTemplate = "<li>序号：$$RowNumber$$ 姓名：$$USERNAME$$ 内容：$$COMMENT$$</li>";//模板，必须以“$$”开始和结束 $('#page').GetPage(1); });

后台，也就是Ajax请求路径返回的字符串如下：

({ comments:{ recordcount:31, pagecount:4,records:[ {"RowNumber":"1","COMMENTID":"34","POSTID":"19827","POSTGUID":"4c273b84f9b1463aa0fe8f2d4655731d","USERID":"11","COMMENT":"试试组合键","DIG":"0","BURY":"0","INPUTDATE":"2009-12-28 11:23:58","USERNAME":"水若寒","PIC":"/images/avatars/temp/pic_20091226222539.JPG","IP":"127.0.0.1","ISREPORTED":"0"}, {"RowNumber":"2","COMMENTID":"33","POSTID":"2818","POSTGUID":"FDE8C8C9D2DC4E04A65AF3A0B3B9B8DA","USERID":"11","COMMENT":"试试组合键可不可以评论？","DIG":"0","BURY":"0","INPUTDATE":"2009-12-27 19:46:45","USERNAME":"水若寒","PIC":"/images/avatars/temp/pic_20091226222539.JPG","IP":"127.0.0.1","ISREPORTED":"0"}, {"RowNumber":"3","COMMENTID":"32","POSTID":"2818","POSTGUID":"FDE8C8C9D2DC4E04A65AF3A0B3B9B8DA","USERID":"11","COMMENT":"<quote>引用1楼 <url=/"/users/11/">[水若寒]</url> 的原话<span>(2009-12-27 19:36:35)</span><p><quote>引用1楼 <url=/"/users/11/">[水若寒]</url> 的原话<span>(2009-12-27 18:26:59)</span><p>说说！哈哈！沙发！</p></quote>哈哈，终于可以啦。</p></quote><br>可以重复引用吗？","DIG":"0","BURY":"0","INPUTDATE":"2009-12-27 19:37:37","USERNAME":"水若寒","PIC":"/images/avatars/temp/pic_20091226222539.JPG","IP":"127.0.0.1","ISREPORTED":"0"}, {"RowNumber":"4","COMMENTID":"31","POSTID":"2818","POSTGUID":"FDE8C8C9D2DC4E04A65AF3A0B3B9B8DA","USERID":"11","COMMENT":"<quote>引用1楼 <url=/"/users/11/">[水若寒]</url> 的原话<span>(2009-12-27 18:26:59)</span><p>说说！哈哈！沙发！</p></quote>哈哈，终于可以啦。","DIG":"0","BURY":"0","INPUTDATE":"2009-12-27 19:36:35","USERNAME":"水若寒","PIC":"/images/avatars/temp/pic_20091226222539.JPG","IP":"127.0.0.1","ISREPORTED":"0"}, {"RowNumber":"5","COMMENTID":"30","POSTID":"2818","POSTGUID":"FDE8C8C9D2DC4E04A65AF3A0B3B9B8DA","USERID":"11","COMMENT":"说说！哈哈！沙发！","DIG":"0","BURY":"0","INPUTDATE":"2009-12-27 18:26:59","USERNAME":"水若寒","PIC":"/images/avatars/temp/pic_20091226222539.JPG","IP":"127.0.0.1","ISREPORTED":"0"}, {"RowNumber":"6","COMMENTID":"29","POSTID":"19827","POSTGUID":"4c273b84f9b1463aa0fe8f2d4655731d","USERID":"11","COMMENT":"<quote>引用2楼 <url=/"/users/11/">[水若寒]</url> 的原话<span>(2009-12-27 17:46:56)</span><p>怎么不能引用呢？</p></quote>能使用吗？","DIG":"0","BURY":"0","INPUTDATE":"2009-12-27 17:58:08","USERNAME":"水若寒","PIC":"/images/avatars/temp/pic_20091226222539.JPG","IP":"127.0.0.1","ISREPORTED":"1"}, {"RowNumber":"7","COMMENTID":"28","POSTID":"19827","POSTGUID":"4c273b84f9b1463aa0fe8f2d4655731d","USERID":"11","COMMENT":"<quote>引用6楼 <url=/"/users/11/">[水若寒]</url> 的原话<span>(2009-12-27 16:52:18)</span><p>真是奇怪啊！~~</p></quote>现在可以正常使用了吗？","DIG":"0","BURY":"0","INPUTDATE":"2009-12-27 17:57:08","USERNAME":"水若寒","PIC":"/images/avatars/temp/pic_20091226222539.JPG","IP":"127.0.0.1","ISREPORTED":"1"}, {"RowNumber":"8","COMMENTID":"27","POSTID":"19827","POSTGUID":"4c273b84f9b1463aa0fe8f2d4655731d","USERID":"11","COMMENT":"怎么不能引用呢？","DIG":"0","BURY":"0","INPUTDATE":"2009-12-27 17:46:56","USERNAME":"水若寒","PIC":"/images/avatars/temp/pic_20091226222539.JPG","IP":"127.0.0.1","ISREPORTED":"1"}, {"RowNumber":"9","COMMENTID":"26","POSTID":"19827","POSTGUID":"4c273b84f9b1463aa0fe8f2d4655731d","USERID":"11","COMMENT":"怎么不能引用呢？","DIG":"0","BURY":"0","INPUTDATE":"2009-12-27 17:40:03","USERNAME":"水若寒","PIC":"/images/avatars/temp/pic_20091226222539.JPG","IP":"127.0.0.1","ISREPORTED":"0"}, {"RowNumber":"10","COMMENTID":"25","POSTID":"19827","POSTGUID":"4c273b84f9b1463aa0fe8f2d4655731d","USERID":"11","COMMENT":"怎么不能引用呢？","DIG":"0","BURY":"0","INPUTDATE":"2009-12-27 17:34:27","USERNAME":"水若寒","PIC":"/images/avatars/temp/pic_20091226222539.JPG","IP":"127.0.0.1","ISREPORTED":"0"} ] } } )

注意：上面是一段字符串，因为我的请求方式为jquery的get方式。

效果如下：