sns 评论ajax分页 和 二级评论ajax 分页 ssh2 实现 源码下载
?sns 评论 ajax 分页 和二级 评论 ajax 分页 ssh2 实现 源码下组 jar 在jar_1 jar_2 下载 数据 mysql测试可以
?
?
?
经过周六日的研究 终于弄明白 ajax 分页的实现了。
?
基本上就是利用了 jquery 的一个函数?
?
?
$("#id").load(url,function() {});?
?
首先 进入 评论页面 -> load 评论 ，评论 再 -> load 子评论。
?
按照 组件开发的方式 ?编写分页标签。
?
?
package com.freewebsys.core.sns.taglib;import javax.servlet.jsp.JspException;import javax.servlet.jsp.tagext.TagSupport;import com.freewebsys.core.sns.page.PageConf;public class PageTaglib extends TagSupport {private String id;// 标识不同分页,当一个页面有多个分页时,private String action;private int start;private int limit;private int total;private String otherValue;private String theme;// 默认 分页跳转 js.兼容写法。兼容刷新分页 和 ajax分页。都调js函数。ajax要重写 goPage函数private static final String DEFAULT_PAGE_JS = "<script type='text/javascript'>function goPage(url){location.href = url;}</script>";// 分页 div 开始private final String DEFAULT_THEME_BEGIN = "<div class='pagination' id='Pagination'>";private final String MINI_THEME_BEGIN = "<div class='paginationMini' id='PaginationMini'>";// 分页 div 结束private final String DEFAULT_THEME_END = "</div>";// 分页字符串private final String PAGE_A = "<a href="javaScript:void(0);" onclick="goPage('";// 默认样式模板@Overridepublic int doStartTag() throws JspException {try {if (total <= limit) {// 如果还不够一页 就不显示return super.doEndTag();}// 初始化参数.每次独立计算.否则分页有问题.PageConf pageConf = new PageConf(start, limit, total);String ctx = pageContext.getServletContext().getContextPath() + "/";ctx += action;if (action.indexOf("?") >= 0) {// 如果存在?号用&ctx += "&" + findOtherValue();} else {// 否则用?ctx += "?" + findOtherValue();}PageConf pageConfFirst = new PageConf(start, limit, total);String firstUrl = ctx;PageConf pageConfPrev = new PageConf(start, limit, total);String prevUrl = ctx;PageConf pageConfNext = new PageConf(start, limit, total);String nextUrl = ctx;PageConf pageConfLast = new PageConf(start, limit, total);String lastUrl = ctx;// pageContext.setAttribute("gridPanelWidth", width);// pageContext.setAttribute("gridPanelHeight", height);if (pageConf.hastPrevious()) {pageConfFirst.getFirst();firstUrl += "&start=" + pageConfFirst.getStart();pageConfPrev.getPrevious();prevUrl += "&start=" + pageConfPrev.getStart();}if (pageConf.hasNext()) {pageConfNext.getNext();nextUrl += "&start=" + pageConfNext.getStart();pageConfLast.getLast();lastUrl += "&start=" + pageConfLast.getStart();}// 直接将数据写到页面String str = genCenterButtons(start, limit, total, ctx);if (theme == null || theme.equals("")) {writeToPage(DEFAULT_PAGE_JS);// 默认跳转函数writeToPage(DEFAULT_THEME_BEGIN);writeToPage(str);} else if (theme.equals("ajax")) {// 普通ajax分页writeToPage(DEFAULT_THEME_BEGIN);writeToPage(str);} else if (theme.equals("miniAjax")) {// mini型ajax分页writeToPage(MINI_THEME_BEGIN);if (id != null) {//标识不用分页str = str.replace("goPage", "goMiniPage_" + id);} else {str = str.replace("goPage", "goMiniPage");}writeToPage(str);}// 如果是ajax就要在页面重写goPage函数writeToPage(DEFAULT_THEME_END);} catch (Exception e) {e.printStackTrace();}return super.doEndTag();}/** * 生成多个跳转按钮方法,如1，2，3，4，5这样的按钮跳转最大7页跳转 */private String genCenterButtons(int start, int limit, int total, String ctx) {// 初始化参数.每次独立计算.否则分页有问题.PageConf pageConf = new PageConf(start, limit, total);PageConf pageConfTemp1 = new PageConf(start, limit, total);PageConf pageConfTemp2 = new PageConf(start, limit, total);// 结束页PageConf pageConfTempLast = new PageConf(start, limit, total);//pageConfTempLast.getLast();// 字符串拼写.StringBuilder strOut = new StringBuilder();// 设置开始为当前页往前3页,最小1int begin = Math.max(1, (pageConf.getCurrentPage() + 1) - 3);// 设置结束为当前页往后3页,最大到总页数int end = Math.min((pageConf.getCurrentPage() + 1) + 3,pageConf.getTotalPage());int abs = 5 - Math.abs(pageConfTempLast.getCurrentPage()- pageConf.getCurrentPage());if (abs > 0) {begin = pageConf.getCurrentPage() - abs;begin = Math.min(begin, (pageConf.getCurrentPage() + 1) - 3);begin = Math.max(1, begin);}// 计算当前页和首页的距离abs = 7 - pageConf.getCurrentPage();if (abs > 0) {end = pageConf.getCurrentPage() + abs;end = Math.max((pageConf.getCurrentPage() + 1) + 3, end);end = Math.min(end, pageConf.getTotalPage());}if (pageConf.getTotalPage() > 7) {// 如果大于7显示首页末页// 显示前一页if (pageConfTemp1.hastPrevious()) {pageConfTemp1.getPrevious();strOut.append(PAGE_A + ctx + "&start="+ pageConfTemp1.getStart() + "');">");strOut.append("上一页</a>");}if (pageConf.getCurrentPage() > 3) {// 显示第 1strOut.append(PAGE_A + ctx + "&start=" + (0) + "');">");strOut.append(1);strOut.append("</a>");if (pageConf.getCurrentPage() > 4) {// 显示第 2 页strOut.append(PAGE_A + ctx + "&start="+ (0 + pageConf.getLimit()) + "');">");strOut.append(2);strOut.append("</a>");}strOut.append("…");}}// if(pageConf.getCurrentPage())// 循环显示数字for (int i = begin; i <= end; i++) {// 循环多个table的buttonint startTemp = (i - 1) * pageConf.getLimit();if (i == (pageConf.getCurrentPage() + 1)) {strOut.append("<span class='current'>");strOut.append(i);// 当前页显示禁用strOut.append("</span>");} else {strOut.append(PAGE_A + ctx + "&start=" + startTemp + "');">");strOut.append(i);strOut.append("</a>");}}// 末页显示,显示最后一页和倒数第二页if (pageConf.getTotalPage() > 7) {// 如果大于7显示首页末页if (pageConf.getCurrentPage() < (pageConfTempLast.getCurrentPage() - 3)) {// 如果当前页是倒数第4页就不显示strOut.append("…");// System.out.println(pageConf.getCurrentPage() + "/"// + pageConfTempLast.getCurrentPage());if (pageConf.getCurrentPage() < (pageConfTempLast.getCurrentPage() - 4)) {// 如果当前页是倒数第4页就不显示倒数第2页strOut.append(PAGE_A+ ctx+ "&start="+ (pageConfTempLast.getStart() - pageConf.getLimit()) + "');">");strOut.append(pageConfTempLast.getCurrentPage());strOut.append("</a>");}strOut.append(PAGE_A + ctx + "&start="+ pageConfTempLast.getStart() + "');">");strOut.append(pageConfTempLast.getCurrentPage() + 1);strOut.append("</a>");}// 显示下一页if (pageConfTemp2.hasNext()) {pageConfTemp2.getNext();strOut.append(PAGE_A + ctx + "&start="+ pageConfTemp2.getStart() + "');">");strOut.append("下一页</a>");}}return strOut.toString();}/** * 添加其他参数. */private String findOtherValue() {String tempValue = "";if (otherValue != null && !"".equals(otherValue)) {// 将数据按照','进行分开.String[] values = otherValue.split(",");for (int i = 0; i < values.length; i++) {// 从request里面取得数据value.String temp = (null == pageContext.getRequest().getParameter(values[i]) ? "" : pageContext.getRequest().getParameter(values[i]));if (i == 0) {// 如果是第一个.直接等于.否则就添加&tempValue = values[i] + "=" + temp;} else {tempValue += "&" + values[i] + "=" + temp;}}}return tempValue;}@Overridepublic int doEndTag() throws JspException {try {// 读取模板// writeToPage("<!--GridPanelPage结束-->");// 完成一个h3不读取模板} catch (Exception e) {e.printStackTrace();}return super.doEndTag();}private void writeToPage(String strOut) {try {pageContext.getOut().print(strOut);} catch (Exception e) {e.printStackTrace();}}....get set 方法略..}??
用来生成 分页标签 其中分页参数 是pageconf
?
?
package com.freewebsys.core.sns.page;import java.util.List;/* * 分页类开始.*./ /** 排序字段. */public class PageConf {private String sortField;/** 排序升降.des,aesc. */private String sortDir;/** 分页开始. */private int start;/** 分页结束. */private int end;/** 每页最大数. */private int limit;/** 分页总数. */private int total;private List data;public List getData() {return data;}public void setData(List data) {this.data = data;}public int getCurrentPage() {return (int) Math.floor((double) start / limit);}public int getTotalPage() {/** 取得总共的页数. */return (int) Math.ceil((double) total / limit);}public void getGo(int page) {/* 页面跳转函数.输入要跳转的页面. */System.out.println("page:[" + page);int totalPage = getTotalPage();int currentPage = getCurrentPage();if (page <= 1) {/* 如果小于1.跳到首页. */getFirst();return;} else if (page >= totalPage) {/* 如果大于总页数跳到末页. */getLast();return;} else if (page == currentPage) {/* 当前页返回. */return;} else {/* 否则进行页面跳转.也就是计算start和end. */this.start = (page - 1) * limit;this.end = Math.min(page * limit, total);}// System.out.println("getGo:[" + toString());}public void getNext() {// System.out.println("getNextPage");int currentPage = getCurrentPage();int tempStart = (currentPage + 1) * limit;if (tempStart >= total) {return;}this.start = tempStart;this.end = Math.min((currentPage + 2) * limit, total);// System.out.println("getNext" + toString());}public void getFirst() {// System.out.println("getFirst");this.start = 0;this.end = Math.min(limit, total);// System.out.println("getFirst" + toString());}public void getLast() {// System.out.println("getEnd");int lastPage = getTotalPage();/** 如果刚好总页数刚好被整除.就往前一页. */if ((lastPage * limit) >= total) {lastPage--;}this.start = lastPage * limit;this.end = Math.min((lastPage + 1) * limit, total);// System.out.println("getLast" + toString());}public void getPrevious() {// System.out.println("getPreviouspage");int currentPage = getCurrentPage();/** 前一页等于当前页数乘以每页记录数. */this.start = Math.max((currentPage - 1) * limit, 0);this.end = Math.max((currentPage) * limit, limit);// System.out.println("getPrevious" + toString());}public boolean hasNext() {// System.out.println("hasNext" + toString());if (this.end == this.total) {return false;} else if (this.getTotalPage() <= 1) {return false;} else {return true;}}public boolean hastPrevious() {// System.out.println("hastPrevious" + toString());if (this.start == 0) {return false;} else {return true;}}public PageConf(int start, int limit, int total) {/* 构造函数.设置开始.和分页数. */this.start = start;this.limit = limit;// 重新计算end.int currentPage = getCurrentPage();this.end = Math.min((currentPage + 1) * limit, total);this.total = total;// System.out.println("PageConf" + toString());}....get set 方法略..}?
?
??显示底部评论分页
?显示二级评论的小分页
?
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib prefix="s" uri="/struts-tags"%><%@ taglib prefix="fsns" uri="http://freewebsys.sns.googlecode.com"%><%request.setAttribute("ctx",request.getContextPath());//重新设置缩写. %><%request.setAttribute("img_ctx",request.getContextPath()+"/common/css/web/images");//重新设置缩写. %><script type="text/javascript"><!--function showReplay(objId){//{status.index}$('#replaySubComment_'+objId+'_id').toggle();$('#replayTextarea_'+objId+'_id').focus();}function hideReplay(objId){//{status.index}$('#replaySubComment_'+objId+'_id').hide();}function saveReplayComment(objId){if($('#replayTextarea_'+objId+'_id').val() == ''){alert('请输入评论内容。');}$.ajax({url:'saveComment.html',type:"POST",data:{'appType':'${appType}','appId':'${appId}','parentId':$('#replayParentId_'+objId+'_id').val(),'commentContent':$('#replayTextarea_'+objId+'_id').val()},success:function(data){//回调函数if(data == 1){$('#replayTextarea_'+objId+'_id').val('');$('#replaySubComment_'+objId+'_id').hide();//重新加载子分页var parentId = $('#replayParentId_'+objId+'_id').val();$("#subComment_"+objId+"_id").html("<div align='center' style='padding-top:50px'><img src='${img_ctx}/loading_blue_big.gif'></div>'");$("#subComment_"+objId+"_id").load("${ctx}/listSubComment.html?appType=${param.appType}&appId=${param.appId}&parentId="+parentId,function() {$('html,body').animate({scrollTop: $("#comment_"+objId+"_id").offset().top}, 1);});}}});}function goPage(url){//加载 loading 图片$("#comment_id").html("<div align='center' style='padding-top:50px'><img src='${img_ctx}/loading_blue_big.gif'></div>'");$("#comment_id").load(url,function() {$('html,body').animate({scrollTop: $("comment_anchor_id").offset().top}, 1);});}//--></script><ul> <s:iterator value="page.data" status="status"> <li id="comment_${id}_id" style="width: 65px;"><span onclick="showReplay('${id}');">回复</a></span></span><a href="/thinksns/index.php?s=/space/1">管理员</a><em otherValue="appType,appId" start="${page.start}" limit="${page.limit}" total="${page.total}" theme="ajax"/>?上面是评论分页load jsp 页面。
?
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib prefix="s" uri="/struts-tags"%><%@ taglib prefix="fsns" uri="http://freewebsys.sns.googlecode.com"%><%request.setAttribute("ctx",request.getContextPath());//重新设置缩写. %><%request.setAttribute("img_ctx",request.getContextPath()+"/common/css/web/images");//重新设置缩写. %><s:iterator value="page.data" status="subStatus"> <div id="subComment_${parentId}_${subStatus.index}_id"><div style="width: 50px;"><span rel=""><img src="http://toeoso-laptop/thinksns/data/userface/000/00/00/1_small_face.jpg"></a></span></div><div style="margin-left: 50px;"><h3 onclick="deleteComment('${status.index}_${subStatus.index}')">删除</a></span></span><a href="/thinksns/index.php?s=/space/1">管理员</a><em id="replayParentId_${parentId}_id" type="hidden" value="${parentId}"/><div style="display: none;" id="replaySubComment_${parentId}_id"> <div style="width: 50px;"><span id="face"></span></div> <div style="margin-left: 50px; overflow: hidden;"> <textarea id="replayTextarea_${parentId}_id" name="comment.comment" rows="4" style="width: 99%;" onblur="this.className='Text'" onfocus="this.className='Text1'"></textarea> <input type="submit" value="回 复" onclick="saveReplayComment('${parentId}');"> <input type="button" value="取消" onclick="hideReplay('${parentId}');"/> </div> </div> </div><!-- 子回复框 End --><fsns:page id="${parentId}" action="listSubComment.html" otherValue="parentId,appType,appId" start="${page.start}" limit="${page.limit}" total="${page.total}" theme="miniAjax"/><script type="text/javascript"><!--function goMiniPage_${parentId}(url){//加载 loading 图片$("#subComment_${parentId}_id").html("<div align='center' style='padding-top:50px'><img src='${img_ctx}/loading_blue_big.gif'></div>'");$("#subComment_${parentId}_id").load(url,function() {$('html,body').animate({scrollTop: $("#subComment_"+objId+"_anchor_id").offset().top}, 1);});}//--></script>?
上面是 子评论 分页的 ?load的 jsp 页面。
?
?
整个 页面的样式 是 参考 thinksns ?的评论的样式的。
使用的技术 是 ssh2 数据库 是mysql。
?
protected String appType;// 应用类型 如blog
?
protected Integer appId;// 应用Id
?
可以设计 针对 不同应用 进行评论。
?
?
打算利用 ?自己独立 开发一个 类似于 替换 thinksns 的社区。
界面 没有美工 就参考 thinksns 数据也部分参考 thinksns ?然后 按照模块 进行分布开发。
?
前端 用 jquery 和 jqueryui 进行。
?
1 楼 ld57601870 2011-02-10 楼主发的我运行了，点上去没反应。不知道是不是我的问题。 2 楼 asialee 2011-02-10 可否把这个项目的源码上传一下，研究一下，谢谢了 3 楼 toeo 2011-02-17 asialee 写道可否把这个项目的源码上传一下，研究一下，谢谢了