js寫的評(píng)論分頁(還不錯(cuò))
更新時(shí)間:2013年12月23日 15:19:46 作者:
js寫的分頁在網(wǎng)上可以搜到很多的文章,在也為大家介紹一個(gè),喜歡的的朋友可以參考下
復(fù)制代碼 代碼如下:
<%@ 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;
//動(dòng)態(tài)加評(píng)論信息
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;\">回復(fù):"+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("內(nèi)容不能為空!");
return;
}
$.post("<%=basePath%>addClickComment.action","content="+content,function(data){
if(data.success == true) {
alert("發(fā)表成功!");
$("#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">評(píng)論(<span id="count"></span>)</h1>
<hr size="5px;" color="#590303">
<div id="comments">
</div>
<h2 class="aa">發(fā)表評(píng)論</h2>
<h3 class="aa">您的評(píng)論:</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">發(fā)表</button>
</div>
</body>
</html>
dao層
復(fù)制代碼 代碼如下:
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;
}
//添加一條評(píng)論信息
@Override
public boolean addClickComment(ClickComment clickComment) {
boolean isSuccess = false;
try {
hibernateTemplate.save(clickComment);
isSuccess = true;
} catch (Exception e) {
isSuccess = false;
e.printStackTrace();
}
return isSuccess;
}
//分頁查找評(píng)論信息
@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;
}
//得到評(píng)論的個(gè)數(shù)
@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;
}
//更新評(píng)論信息
@Override
public boolean updateClickComment(ClickComment clickComment) {
boolean isSuccess=false;
try {
hibernateTemplate.update(clickComment);
isSuccess=true;
} catch (Exception e) {
e.printStackTrace();
isSuccess=false;
}
return isSuccess;
}
//根據(jù)id查找評(píng)論信息
@Override
public ClickComment findClickCommentById(int id) {
return (ClickComment) hibernateTemplate.find("from ClickComment where id = ?",
id).get(0);
}
//刪除評(píng)論信息
@Override
public boolean deleteClickComment(ClickComment clickComment) {
boolean isSuccess=false;
try {
hibernateTemplate.delete(clickComment);
isSuccess=true;
} catch (Exception e) {
e.printStackTrace();
isSuccess=false;
}
return isSuccess;
}
//查詢所有的評(píng)論
@SuppressWarnings("unchecked")
@Override
public List<ClickComment> findAllClickComment() {
return hibernateTemplate.find("from ClickComment");
}
}
struts配置
復(fù)制代碼 代碼如下:
<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
復(fù)制代碼 代碼如下:
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;// 評(píng)論內(nèi)容
private String repcontent;// 回復(fù)評(píng)論
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;
}
//添加評(píng)論 用于微信用戶
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";
}
//分頁查找評(píng)論 用戶微信用戶
public String findClickCommentByPage() {
map = new HashMap<String, Object>();
map.put("list", clickCommentDao.findClickCommentByPage(page, row));
return "findByPage";
}
//查詢?cè)u(píng)論條數(shù) 用于微信用戶
public String getTotalNum(){
map = new HashMap<String, Object>();
map.put("total", clickCommentDao.getClickCommentCount());
return "total";
}
//回復(fù)評(píng)論 用于后臺(tái)管理
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";
}
//查詢所有評(píng)論 用于后臺(tái)管理
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";
}
//刪除評(píng)論 用于后臺(tái)管理
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
復(fù)制代碼 代碼如下:
package dfml.pojo;
import java.io.Serializable;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
//評(píng)論表
@Entity
public class ClickComment implements Serializable{
private static final long serialVersionUID = 1L;
private Integer id;
private String time;// 評(píng)論時(shí)間
private String content;// 評(píng)論內(nèi)容
private String name;// 評(píng)論人
private String repcontent;//回復(fù)評(píng)論
@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實(shí)現(xiàn)回復(fù)評(píng)論功能
- JavaScript評(píng)論點(diǎn)贊功能的實(shí)現(xiàn)方法
- vue.js評(píng)論發(fā)布信息可插入QQ表情功能
- Vue.js實(shí)現(xiàn)文章評(píng)論和回復(fù)評(píng)論功能
- JS類定義原型方法的兩種實(shí)現(xiàn)的區(qū)別評(píng)論很多
- vue.js實(shí)現(xiàn)用戶評(píng)論、登錄、注冊(cè)、及修改信息功能
- 使用AngularJS和PHP的Laravel實(shí)現(xiàn)單頁評(píng)論的方法
- JavaScript實(shí)現(xiàn)簡(jiǎn)單評(píng)論功能
- react結(jié)合bootstrap實(shí)現(xiàn)評(píng)論功能
相關(guān)文章
JavaScript通過改變文字透明度實(shí)現(xiàn)的文字閃爍效果實(shí)例
這篇文章主要介紹了JavaScript通過改變文字透明度實(shí)現(xiàn)的文字閃爍效果,結(jié)合完整實(shí)例形式分析了javascript基于定時(shí)器周期性動(dòng)態(tài)修改頁面元素屬性的相關(guān)操作技巧,需要的朋友可以參考下2017-04-04JS實(shí)現(xiàn)當(dāng)前頁居中分頁效果的方法
這篇文章主要介紹了JS實(shí)現(xiàn)當(dāng)前頁居中分頁效果的方法,涉及javascript操作頁面元素與樣式的相關(guān)技巧,需要的朋友可以參考下2015-06-06深入理解JavaScript和TypeScript中的class
class 聲明創(chuàng)建一個(gè)基于原型繼承的具有給定名稱的新類,下面這篇文章主要給大家介紹了關(guān)于JavaScript和TypeScript中class的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下。2018-04-04JavaScript中英文字符長(zhǎng)度統(tǒng)計(jì)方法示例【按照中文占2個(gè)字符】
這篇文章主要介紹了JavaScript中英文字符長(zhǎng)度統(tǒng)計(jì)方法,涉及javascript針對(duì)中英文字符的匹配與運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-01-01