您的位置：首页 > Web前端 > JQuery

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

2009-12-29 17:50 537 查看
今天花了好久时间研究出来的，下面给大家共享一下。

首先是前台的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方式。

效果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航