首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js写的评论分页(还不错)

Posted in Javascript onDecember 23, 2013 
<%@ page language="java" contentType="text/html; charset=utf-8" 
pageEncoding="utf-8"%> 
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme() + "://" 
+ request.getServerName() + ":" + request.getServerPort() 
+ path + "/"; 
%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>微客服</title> 
<style type="text/css"> 
body{ 
text-align: center; 
margin: 0; 
padding: 0; 
color: #500f60; 
background: url("../images/bj_4.jpg"); 
background-repeat:no-repeat; 
background-attachment: scroll; 
background-size:100% 100%; 
overflow-x: hidden; 
} 
li{ 
list-style-type: none; 
} 
a:link{ 
list-style-type: none; 
} 
img{ 
width: 100%; 
} 
#static{ 
margin: 0 auto; 
text-align: left; 
width: 90%; 
margin-top: 20px; 
} 
.aa{ 
padding-left: 16px; 
} 
#bott{ 
border: 3px #590303 solid; 
border-radius: 6px 6px 6px 6px; 
-moz-border-radius: 6px; 
width: 90%; 
margin-left: 5%; 
} 
.tex{ 
border-top: none; 
border-bottom: none; 
border-left: none; 
border-right: none; 
background: fixed; 
} 
</style> 
</head> 
<script type="text/javascript"> 
$(function() { 
var row = 5; 
//动态加评论信息 
function loadCommentInfo(page) { 
$("#page").text(page); 
$.ajax({ 
type : "POST", 
url : "<%=basePath%>findClickCommentByPage.action", 
data: "page="+page+"&row="+row, 
success : function(data) { 
var list = data.list; 
var row = ""; 
$("#comments").empty(); 
for ( var i = 0; i < list.length; i++) { 
row = "<h3><span style=\"color: #000; font-size: 0.5em; padding-left: 70%;\">"+list[i].time+"</span></h3>"+ 
"<h3 style=\"padding-left: 12px;\">"+list[i].content+"</h3>"; 
if(list[i].repcontent!=null){ 
row+="<h3 style=\"padding-left: 12px; word-wrap: break-word; word-break: normal;\">回复:"+list[i].repcontent+"</h3>"; 
} 
"<hr size=\"5px;\" color=\"#f0f\">"; 
$(row).appendTo($("#comments")); 
} 
$("#pagetag").val(page); 
} 
}); 
}; 
function getTotalContent() { 
$.ajax({ 
type : "POST", 
url : "<%=basePath%>getTotalNum.action", 
success : function(data) { 
$("#count").text(data.total); 
if(parseInt(data.total)==0){ 
$("#page").text(0); 
} 
var pagenum = parseInt(data.total/row); 
$("#totalpage").text(parseInt(data.total%row==0?pagenum:pagenum+1)); 
}, 
}); 
} 
$("#submit").click(function(){ 
var content = $("#content").val(); 
if(content==""){ 
alert("内容不能为空!"); 
return; 
} 
$.post("<%=basePath%>addClickComment.action","content="+content,function(data){ 
if(data.success == true) { 
alert("发表成功!"); 
$("#content").val(""); 
loadCommentInfo(parseInt($("#pagetag").val())); 
getTotalContent(); 
} 
}); 
}); 
$("#pre").click(function(){ 
var page = parseInt($("#pagetag").val()); 
if(page>1){ 
page--; 
loadCommentInfo(page); 
} 
}); 
$("#next").click(function(){ 
var page = parseInt($("#pagetag").val()); 
if(page<parseInt($("#totalpage").text())){ 
page++; 
loadCommentInfo(page); 
} 
}); 
window.onload = loadCommentInfo(1); 
window.onload = getTotalContent(); 
}); 
</script> 
<body> 
<input type="hidden" id="pagetag" value="1"> 
<div id="static"> 
<div style="text-align: left; z-index: 999"> 
<img src="../pic/top4.jpg"> 
<a href="<%=basePath%>jsp/index.jsp"><img src="../pic/fan_2.png" style="width: 10%; margin-top: -25px;"></a> 
</div> 
<button style="background: #520202; border-top: none;border: 3px #520202 solid; border-radius: 2px 2px 2px 2px;-moz-border-radius: 6px; color: #FFEA00;" id="pre">上一页</button> 
<button style="background: #520202; border-top: none;border: 3px #520202 solid; border-radius: 2px 2px 2px 2px;-moz-border-radius: 6px;float: right; color: #FFEA00;" id="next">下一页</button> 
<p style="background: #520202; color: #FFEA00;">第<span id="page"></span>/<span id="totalpage"></span>页</p> 
<h1 class="aa">评论(<span id="count"></span>)</h1> 
<hr size="5px;" color="#590303"> 
<div id="comments"> 
</div> 
<h2 class="aa">发表评论</h2> 
<h3 class="aa">您的评论：</h3> 
<div id="bott"> 
<textarea rows="7" class="tex" cols="100%" id="content"></textarea> 
</div> 
<button style="margin-left:80%; border-top: none;border: 3px #520202 solid; border-radius: 6px 6px 6px 6px;-moz-border-radius: 6px; color: #FFEA00; background: #520202;" id="submit">发表</button> 
</div> 
</body> 
</html>

dao层 
package dfml.daoImpl; import java.sql.SQLException; 
import java.util.List; 
import javax.annotation.Resource; 
import org.hibernate.Criteria; 
import org.hibernate.HibernateException; 
import org.hibernate.Query; 
import org.hibernate.Session; 
import org.hibernate.criterion.Order; 
import org.springframework.orm.hibernate3.HibernateCallback; 
import org.springframework.orm.hibernate3.HibernateTemplate; 
import org.springframework.stereotype.Component; 
import dfml.dao.ClickCommentDao; 
import dfml.pojo.ClickComment; 
@Component 
public class ClickCommentDaoImpl implements ClickCommentDao{ 
private HibernateTemplate hibernateTemplate; 
@Resource 
public void setHibernateTemplate(HibernateTemplate hibernateTemplate) { 
this.hibernateTemplate = hibernateTemplate; 
} 
//添加一条评论信息 
@Override 
public boolean addClickComment(ClickComment clickComment) { 
boolean isSuccess = false; 
try { 
hibernateTemplate.save(clickComment); 
isSuccess = true; 
} catch (Exception e) { 
isSuccess = false; 
e.printStackTrace(); 
} 
return isSuccess; 
} 
//分页查找评论信息 
@SuppressWarnings("unchecked") 
@Override 
public List<ClickComment> findClickCommentByPage(final int page, final int row) { 
List<ClickComment> list = this.hibernateTemplate 
.executeFind(new HibernateCallback<Object>() { 
@Override 
public Object doInHibernate(Session session) 
throws HibernateException, SQLException { 
Criteria c = session.createCriteria(ClickComment.class); 
c.setFirstResult((page - 1) * row); 
c.setMaxResults(row); 
c.addOrder(Order.desc("time")); 
return c.list(); 
} 
}); 
return list; 
} 
//得到评论的个数 
@SuppressWarnings({ "unchecked", "rawtypes" }) 
@Override 
public Long getClickCommentCount() { 
final String hql = "select count(*) from ClickComment"; 
Long result = null; 
result = (Long) hibernateTemplate.execute(new HibernateCallback() { 
public Object doInHibernate(Session arg0) 
throws HibernateException, SQLException { 
Query query = arg0.createQuery(hql); 
return query.uniqueResult(); 
} 
}); 
return result; 
} 
//更新评论信息 
@Override 
public boolean updateClickComment(ClickComment clickComment) { 
boolean isSuccess=false; 
try { 
hibernateTemplate.update(clickComment); 
isSuccess=true; 
} catch (Exception e) { 
e.printStackTrace(); 
isSuccess=false; 
} 
return isSuccess; 
} 
//根据id查找评论信息 
@Override 
public ClickComment findClickCommentById(int id) { 
return (ClickComment) hibernateTemplate.find("from ClickComment where id = ?", 
id).get(0); 
} 
//删除评论信息 
@Override 
public boolean deleteClickComment(ClickComment clickComment) { 
boolean isSuccess=false; 
try { 
hibernateTemplate.delete(clickComment); 
isSuccess=true; 
} catch (Exception e) { 
e.printStackTrace(); 
isSuccess=false; 
} 
return isSuccess; 
} 
//查询所有的评论 
@SuppressWarnings("unchecked") 
@Override 
public List<ClickComment> findAllClickComment() { 
return hibernateTemplate.find("from ClickComment"); 
} 
}

struts配置 
<package name="clickComment" extends="json-default" namespace="/"> 
<action name="addClickComment" method="addClickComment" class="clickCommentAction"> 
<result name="add" type="json"> 
<param name="root">map</param> 
</result> 
</action> 
<action name="findClickCommentByPage" method="findClickCommentByPage" class="clickCommentAction"> 
<result name="findByPage" type="json"> 
<param name="root">map</param> 
</result> 
</action> 
<action name="getTotalNum" method="getTotalNum" class="clickCommentAction"> 
<result name="total" type="json"> 
<param name="root">map</param> 
</result> 
</action> 
<action name="updateClickComment" method="updateClickComment" class="clickCommentAction"> 
<result name="update" type="json"> 
<param name="root">map</param> 
</result> 
</action> 
<action name="findAllClickComment" method="findAllClickComment" class="clickCommentAction"> 
<result name="list" type="json"> 
<param name="root">map</param> 
</result> 
</action> 
<action name="deleteClickComment" method="deleteClickComment" class="clickCommentAction"> 
<result name="delete" type="json"> 
<param name="root">map</param> 
</result> 
</action>

action 
package dfml.action; import java.sql.Date; 
import java.text.SimpleDateFormat; 
import java.util.HashMap; 
import java.util.List; 
import java.util.Map; 
import javax.annotation.Resource; 
import org.springframework.context.annotation.Scope; 
import org.springframework.stereotype.Component; 
import com.opensymphony.xwork2.ActionSupport; 
import dfml.dao.ClickCommentDao; 
import dfml.pojo.Activity; 
import dfml.pojo.ClickComment; 
@Component("clickCommentAction") 
@Scope("prototype") 
public class ClickCommentAction extends ActionSupport{ 
private static final long serialVersionUID = 1L; 
private ClickCommentDao clickCommentDao; 
private Map<String, Object> map; 
private String content;// 评论内容 
private String repcontent;// 回复评论 
private int page; 
private int row; 
private int rows; 
private int id; 
public void setId(int id) { 
this.id = id; 
} 
public Map<String, Object> getMap() { 
return map; 
} 
@Resource 
public void setClickCommentDao(ClickCommentDao clickCommentDao) { 
this.clickCommentDao = clickCommentDao; 
} 
public void setContent(String content) { 
this.content = content; 
} 
public void setRepcontent(String repcontent) { 
this.repcontent = repcontent; 
} 
public void setPage(int page) { 
this.page = page; 
} 
public void setRow(int row) { 
this.row = row; 
} 
public void setRows(int rows) { 
this.rows = rows; 
} 
//添加评论 用于微信用户 
public String addClickComment() { 
boolean isSuccess = false; 
map = new HashMap<String, Object>(); 
ClickComment clickComment = new ClickComment(); 
SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); 
clickComment.setTime(format.format(new Date(System.currentTimeMillis()))); 
clickComment.setContent(content); 
try { 
isSuccess = clickCommentDao.addClickComment(clickComment); 
} catch (Exception e) { 
isSuccess = false; 
e.printStackTrace(); 
} 
map.put("success", isSuccess); 
return "add"; 
} 
//分页查找评论 用户微信用户 
public String findClickCommentByPage() { 
map = new HashMap<String, Object>(); 
map.put("list", clickCommentDao.findClickCommentByPage(page, row)); 
return "findByPage"; 
} 
//查询评论条数 用于微信用户 
public String getTotalNum(){ 
map = new HashMap<String, Object>(); 
map.put("total", clickCommentDao.getClickCommentCount()); 
return "total"; 
} 
//回复评论 用于后台管理 
public String updateClickComment(){ 
boolean isSuccess=false; 
map=new HashMap<String, Object>(); 
ClickComment clickComment =clickCommentDao.findClickCommentById(id); 
if(clickComment!=null){ 
clickComment.setRepcontent(repcontent); 
isSuccess=clickCommentDao.updateClickComment(clickComment); 
} 
map.put("success", isSuccess); 
return "update"; 
} 
//查询所有评论 用于后台管理 
public String findAllClickComment(){ 
map=new HashMap<String, Object>(); 
List<ClickComment> lists=clickCommentDao.findClickCommentByPage(page, rows); 
List<ClickComment> listss=clickCommentDao.findAllClickComment(); 
map.put("rows", lists); 
map.put("total", listss.size()); 
map.put("list", listss); 
return "list"; 
} 
//删除评论 用于后台管理 
public String deleteClickComment(){ 
boolean isSuccess=false; 
map=new HashMap<String, Object>(); 
ClickComment clickComment =clickCommentDao.findClickCommentById(id); 
if(clickComment!=null){ 
isSuccess=clickCommentDao.deleteClickComment(clickComment); 
} 
map.put("success", isSuccess); 
return "delete"; 
} 

}

pojo 
package dfml.pojo; import java.io.Serializable; 
import javax.persistence.Entity; 
import javax.persistence.GeneratedValue; 
import javax.persistence.Id; 
//评论表 
@Entity 
public class ClickComment implements Serializable{ 

private static final long serialVersionUID = 1L; 
private Integer id; 
private String time;// 评论时间 
private String content;// 评论内容 
private String name;// 评论人 
private String repcontent;//回复评论 

@Id 
@GeneratedValue 
public Integer getId() { 
return id; 
} 
public void setId(Integer id) { 
this.id = id; 
} 
public String getRepcontent() { 
return repcontent; 
} 
public void setRepcontent(String repcontent) { 
this.repcontent = repcontent; 
} 
public String getTime() { 
return time; 
} 
public void setTime(String time) { 
this.time = time; 
} 
public String getContent() { 
return content; 
} 
public void setContent(String content) { 
this.content = content; 
} 
public String getName() { 
return name; 
} 
public void setName(String name) { 
this.name = name; 
} 
}

js写的评论分页(还不错)

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery 过滤not()与filter()实例代码
May 10 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
Feb 18 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
Dec 04 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 Javascript
JavaScript中Cookies的相关使用教程
Jun 04 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
Jun 08 Javascript
JSON 数据格式详解
Sep 13 Javascript
JS中Attr的用法详解
Oct 09 Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 Javascript
Ant Design的Table组件去除
Oct 24 Javascript
用js来刷新当前页面保留参数的具体实现
Dec 23 #Javascript
jquery插件jTimer(jquery定时器)使用方法
Dec 23 #Javascript
jquery实现图片翻页效果
Dec 23 #Javascript
js substring从右边获取指定长度字符串(示例代码)
Dec 23 #Javascript
JS判断对象是否存在的10种方法总结
Dec 23 #Javascript
JS判断表单输入是否为空(示例代码)
Dec 23 #Javascript
js中判断用户输入的值是否为空的简单实例
Dec 23 #Javascript
SOA面试题(9) Ruby面试题(15) J2EE面试题(19) Delphi面试题(13) MySQL面试题(19) PYTHON面试题(27) Servlet面试题(20) 自我评价(886) UNIX面试题(27) 自我鉴定(671)
You might like
PHP新手上路（十二）
2006/10/09 PHP
Cakephp 执行主要流程
2010/03/24 PHP
php设计模式小结
2013/02/15 PHP
php实现的返回数据格式化类实例
2014/09/22 PHP
php实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
详细讲解JS节点知识
2010/01/31 Javascript
jquery得到font-size属性值实现代码
2013/09/30 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
Jquery实现的简单轮播效果【附实例】
2016/04/19 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
easyui datebox 时间限制，datebox开始时间限制结束时间，datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
2017/04/13 Javascript
mui back 返回刷新页面的实例
2017/12/06 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
vue修改对象的属性值后页面不重新渲染的实例
2018/08/09 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
JavaScript canvas绘制渐变颜色的矩形
2020/02/18 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
Python切片用法实例教程
2014/09/08 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
Django认证系统实现的web页面实现代码
2019/08/12 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
华为python面试题
2016/05/03 面试题
函授本科毕业自我鉴定
2013/10/09 职场文书
酒店销售经理岗位职责
2014/01/31 职场文书
《金钱的魔力》教学反思
2014/02/24 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
SQL实现LeetCode(180.连续的数字)
2021/08/04 MySQL