萬盛學電腦網 >> 腳本專題 >> javascript >> js寫的評論分頁
js寫的評論分頁
js寫的分頁在網上可以搜到很多的文章，在也為大家介紹一個，喜歡的的朋友可以參考下
代碼如下: <%@ 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 isSuccesjavascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved