sns 评论ajax分页 和 二级评论ajax 分页 ssh2 实现 源码下载
2023-09-11 14:21:14 时间
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 id=Pagination private final String MINI_THEME_BEGIN = " div id=PaginationMini // 分页 div 结束 private final String DEFAULT_THEME_END = " /div // 分页字符串 private final String PAGE_A = " a href=\"javaScript:void(0);\" "goPage("; // 默认样式模板 @Override public 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页,最小1 int 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) { // 显示第 1 strOut.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的button int startTemp = (i - 1) * pageConf.getLimit(); if (i == (pageConf.getCurrentPage() + 1)) { strOut.append(" span 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; @Override public 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 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 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 s:iterator value="page.data" status="status" li id="comment_${id}_id" div span a href="" img src="http://toeoso-laptop/thinksns/data/userface/000/00/00/1_small_face.jpg"/ /a /span /div div div span span a href="javaScript:void(0);" 回复 /a /span /span a href="/thinksns/index.php?s=/space/1" 管理员 /a em 37分钟前 /em /h3 p s:property value="comment"/ /p /div span id="subComment_${id}_anchor_id" /span div id="subComment_${id}_id" script type="text/javascript" $(document).ready(function(){ $("#subComment_${id}_id").html(" div align=center img src=${img_ctx}/loading_blue_big.gif /div $("#subComment_${id}_id").load("${ctx}/listSubComment.html?appType=${param.appType} appId=${param.appId} parentId=${id}",function() {}); //-- /script /div /div /li /s:iterator /ul fsns:page action="listComment.html" 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 span a href="" rel="" img src="http://toeoso-laptop/thinksns/data/userface/000/00/00/1_small_face.jpg" /a /span /div div h3 span span a href="###" 删除 /a /span /span a href="/thinksns/index.php?s=/space/1" 管理员 /a em 37分钟前 /em /h3 p s:property value="comment"/ /p /div div /div /div /s:iterator !-- 子回复框 Begin -- input name="comment.parentId" id="replayParentId_${parentId}_id" type="hidden" value="${parentId}"/ div id="replaySubComment_${parentId}_id" div div span img src="http://toeoso-laptop/thinksns/data/userface/000/00/00/1_small_face.jpg" id="face" /span /div div textarea id="replayTextarea_${parentId}_id" name="comment.comment" rows="4" onblur="this.className=Text" onfocus="this.className=Text1" /textarea input type="submit" value="回 复" input type="button" value="取消" / /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 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 进行。
相关文章
- [Android] repo 下载Android源码(国内镜像)
- [Android 源码] Android源码下载
- C# ini文件操作【源码下载】
- Python源码导出到一个txt文件
- 下载论坛源码GBK UTF8 BIG5分别是什么意思
- java坦克大战源码下载
- maven 下载源码
- maven 下载 源码和javadoc命令
- 使用maven下载源码和doc(转)
- nginx模块_使用gdb调试nginx源码
- [已解决]下载chromium源码 download_from_google_storage 无法下载文件
- Reflux原理与源码详解
- 【云栖大会】阿里云开放AliSQL数据库源码下载
- MFC Windows 程序设计[254]之椭圆形按钮集合(附源码)
- MFC Windows 程序设计[189]之滑动窗口页签(附源码)
- nodejs 使用http模块保存源码
- openssl源码下载
- 【Linux 内核 内存管理】munmap 系统调用源码分析 ② ( do_munmap 函数执行流程 | do_munmap 函数源码 )
- 【Android 进程保活】提升进程优先级 ( 使用前台 Service 提高应用进程优先级 | 效果展示 | 源码资源 )
- Android开发之使用Handler封装下载图片工具类(源码分享)
- 编译Android源码:Exception in thread “main“ java.lang.UnsupportedClassVersionError:报错解决(七)
- 第二人生的源码分析(六十七)LLXMLNode使用Expat库打开文件
- Android源码批量下载及导入到Eclipse
- 风格迁移0-01:stylegan-源码及数据资源下载
- Hadoop源码详解之MultipleInputs类
- Jdk源码详解之ProcessBuilder类
- 深度学习 各版本的tensorflow源码编译库、CUDA、cudnn下载
- SELinux零知识学习五、libcap-ng源码下载、编译和安装
- libvirt零知识学习2 —— libvirt源码下载
- shell之repo/git下载源码断后重新下载(三)