首页
所有分类
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 AJAX 调用WebService实现代码
Mar 24 Javascript
JS时间特效最常用的三款
Aug 19 Javascript
论JavaScript模块化编程
Mar 07 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
Apr 20 Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 Javascript
详解vue嵌套路由-params传递参数
May 23 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
vue的一个分页组件的示例代码
Dec 25 Javascript
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
JavaScript中严格判断NaN的方法
Feb 16 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 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
location(2) 区块链(2) TypeScript(2) RTMP(1) 双向链表(6) NumPy(2) text-shadow(1) http_stub_status_module(1) keeplive_timeout(1) zabbix(9)
You might like
php学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
php中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
PHP处理bmp格式图片的方法分析
2017/07/04 PHP
php实现数组重复数字统计实例
2018/09/30 PHP
php ZipArchive实现多文件打包下载实例
2019/10/31 PHP
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
JavaScript模板引擎用法实例
2015/07/10 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
详解微信小程序开发—你期待的分享功能来了，微信小程序序新增5大功能
2016/12/23 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
Vue仿今日头条实例详解
2018/02/06 Javascript
详解Angular路由之路由守卫
2018/05/10 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
关于RxJS Subject的学习笔记
2018/12/05 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄：天赋异禀》
2015/09/22 DOTA
python实现定制交互式命令行的方法
2014/07/03 Python
Python中 Lambda表达式全面解析
2016/11/28 Python
python好玩的项目—色情图片识别代码分享
2017/11/07 Python
把pandas转换int型为str型的方法
2019/01/29 Python
Python如何处理大数据？3个技巧效率提升攻略（推荐）
2019/04/15 Python
python 环境搭建 及python-3.4.4的下载和安装过程
2019/07/20 Python
python with语句的原理与用法详解
2020/03/30 Python
Python新手学习函数默认参数设置
2020/06/03 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
python爬虫智能翻页批量下载文件的实例详解
2021/02/02 Python
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
海滩咖啡馆：Beach Cafe
2018/02/02 全球购物
《诚实与信任》教学反思
2014/04/10 职场文书
咖啡店创业计划书
2014/08/15 职场文书
防汛通知
2015/04/25 职场文书
党支部审查意见
2015/06/02 职场文书