首页
所有分类
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优化尝试小结
Feb 06 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
Oct 24 Javascript
解决JS浮点数运算出现Bug的方法
Mar 12 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
Jun 23 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
Jun 03 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 Javascript
微信小程序 支付后台java实现实例
May 09 Javascript
详谈Node.js之操作文件系统
Aug 29 Javascript
浅谈Express.js解析Post数据类型的正确姿势
May 30 Javascript
JavaScript创建、读取和删除cookie
Sep 03 Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 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
R9700(1) WR-800F(1) DE1102(1) 胆机(1) 对讲机(1) R71E(1) DE1107(3) ICOM(2) R72E(1) React(6)
You might like
基于PHP对XML的操作详解
2013/06/07 PHP
php中array_multisort对多维数组排序的方法
2020/06/21 PHP
轻松掌握php设计模式之访问者模式
2016/09/23 PHP
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
jQuery简单图表peity.js使用示例
2014/05/02 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
JavaScript实现select添加option
2015/07/03 Javascript
JavaScript中的工厂函数(推荐)
2017/03/08 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
2019/04/10 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
小程序input数据双向绑定实现方法
2019/10/17 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
微信小程序学习总结（四）事件与冒泡实例分析
2020/06/04 Javascript
vue 数据操作相关总结
2020/12/17 Vue.js
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
Python中正则表达式的用法实例汇总
2014/08/18 Python
PyCharm在win10的64位系统安装实例
2017/11/26 Python
python Flask实现restful api service
2017/12/04 Python
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
英国最大的线上保健品零售商之一：Vitamin Planet
2016/12/01 全球购物
松本清官方海外旗舰店：日本最大的药妆连锁店
2017/11/21 全球购物
介绍一下Java的安全机制
2012/06/28 面试题
门卫人员岗位职责
2013/12/24 职场文书
关于青春的演讲稿
2014/05/05 职场文书
歌颂党的演讲稿
2014/09/10 职场文书
群众路线教育实践活动学习心得体会
2014/10/30 职场文书
javaScript Array api梳理
2021/03/31 Javascript