java +jsp实现的点击加载更多,实现数据的异步加载

时间:2022-12-22 22:23:54

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt"%>
<%@taglib uri="/WEB-INF/tld/struts-logic.tld" prefix="logic"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sss</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/alike.css"/>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/main.css"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/public/option.js"></script>
<script>
$(function(){
$("#table0 tr td").each(function(){
//alert(3);
//alert($(this).find("input[name='df']").html());
//$(this).find("input[name='df']").attr("checked","checked");

$(this).find("input[name='df']").each(function(){
if($(this).attr("checked")){
//alert("000");
}
});
});
});
//checkbox选中事件
function afterchecked(obj){
//alert();
$(obj).css("display","block");
$(obj).parent().removeClass();
$(obj).parent().addClass("hp_new_xz");

}
//td添加样式
function tdover(obj,num0){
document.getElementById('df_'+num0).style.display='block';
//this.className='hp_new_xz';
$(obj).removeClass();
$(obj).addClass("hp_new_xz");
}
function tdout(obj,num0){
//判断td里的checkbox是否被选中
if(document.getElementById('df_'+num0).checked){
document.getElementById('df_'+num0).style.display='block';
//this.className='hp_new_xz';
$(obj).removeClass();
$(obj).addClass("hp_new_xz");
}else{
document.getElementById('df_'+num0).style.display='none';
//this.className='hp_new';
$(obj).removeClass();
$(obj).addClass("hp_new");
}

}

function sub1(){
var name=$("#name").val();
if(name==''){
alert("名称不能为空!");
return false;
}
}
function sub2(){
var name=$("#name1").val();
if(name==''){
alert("名称不能为空!");
return false;
}
}
function cmm(){
var id=cb();
if(id!=''){
var id1=(id+"").split(",");
if(id1.length==1){
$.ajax({
type:"post",
url:"jcjgfzhyl_getName.action",
data:{
"id":id
},
dataType:"json",
async: false,
success:function(data){
$("#id1").val(data.jcjgglfzTbl.id);
$("#name1").val(data.jcjgglfzTbl.groupName);
document.getElementById('make_enter_ckebh_01xg').style.display='block';
}
});
}else{
alert("只能选择一条要修改的数据");
return false;
}
}else{
alert("请选择一条要修改的数据!");
return false;
}

}

function cb(){
var id="";
$("input[type=checkbox][name='df']").each(function (){
if($(this).attr("checked")){
if($(this).attr("checked")){
if(id==""){
id=$(this).val();
}else{
id+=","+$(this).val();
}
}
}
});
return id;
}
function del(){
var id=cb();
if(id==''){
alert("至少选择一条删除数据!");
}else{
$.ajax({
type:"post",
url:"jcjgfzhyl_del.action",
data:{
"id":id
},
dataType:"json",
async: false,
success:function(data){
if(data==0){
alert("删除成功!");
window.location.href='jcjgfzhyl_list.action'
}else{
alert("删除失败!");
}
}
});
}
}
//点击加载更多
var pagenow = 1;
function nextpage(){
$("#getmore").html("加载中...");
$.ajax({
type:"post",
url:"jcjgfzhyl_ajaxmore.action",
data:{
"pagenow":pagenow+1
},
dataType:"html",
async: false,
success:function(data){
//alert(data);
if(data==""){
$("#getmore").html("数据已经全部加载");
}else{
$("#table0").append(data);
$("#getmore").html("加载更多...");
pagenow=pagenow+1;
}
}
});
}
//加载图片
function loadimage(obj){
obj.src='${pageContext.request.contextPath }/images/folder.png';
}
</script>
</head>

<body>
<!-- 将map对象(操作)设置到request域中 -->
<c:set value="${sessionScope.user.map }" var="maps" scope="request"/>

<!--新增弹窗-->
<form action="jcjgfzhyl_save.action" method="post" onsubmit="return sub1();">
<div class="make_enter_zjtc" id="make_enter_ckebh_01" style="display:none;">
<div>
<div class="tc_left"></div>
<div class="tc_top">
<strong class="left">检查结果管理</strong>
<input type="button" class="btn_close right" onclick="document.getElementById('make_enter_ckebh_01').style.display='none';document.getElementById('bgdiv').style.display='none';"/>
</div>
<div class="tc_right"></div>
</div>
<div class="margin">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="show_table_yel">
<tr >
<th style="width:4%;">结果名称:</th>
<td style="width:10%;">
<input type="text" class="ty_text" name="groupName" id="name" maxlength="25" />
<strong class="allred">*</strong>
</td>
</tr>


</table>
</div>
<div class="tcbt_bottom center">
<input type="submit" class="btn_xzfj margin" value="保存" />
<input type="button" class="btn_xzfj margin" value="取消" onclick="document.getElementById('make_enter_ckebh_01').style.display='none';document.getElementById('bgdiv').style.display='none';"/>
</div>
</div>
</form>



<!--修改弹窗-->
<form action="jcjgfzhyl_update.action" method="post" onsubmit="return sub2();">
<div class="make_enter_zjtc" id="make_enter_ckebh_01xg" style="display:none;">
<div>
<div class="tc_left"></div>
<div class="tc_top">
<strong class="left">检查结果管理</strong>
<input type="button" class="btn_close right" onclick="document.getElementById('make_enter_ckebh_01xg').style.display='none';document.getElementById('bgdiv').style.display='none';"/>
</div>
<div class="tc_right"></div>
</div>
<div class="margin">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="show_table_yel">
<tr >
<th style="width:4%;">结果名称:</th>
<input type="hidden" class="ty_text" name="id" id="id1" maxlength="20" />
<td style="width:10%;">
<input type="text" class="ty_text" name="groupName" id="name1" maxlength="25" />
<strong class="allred">*</strong>
</td>
</tr>


</table>
</div>
<div class="tcbt_bottom center">
<input type="submit" class="btn_xzfj margin" value="修改" />
<input type="button" class="btn_xzfj margin" value="取消" onclick="document.getElementById('make_enter_ckebh_01xg').style.display='none';document.getElementById('bgdiv').style.display='none';"/>
</div>
</div>
</form>
<div id="bgdiv" class="black_overlay" style="display:none;"></div>

<!--right-->
<div class="big">
<div class="right_title">
<span>当前位置:检查管理 >> 检查结果管理</span>
</div>
<div class="clearfix margin">
<div class="allmar">
<!--<h2 class="avtiveH">
<span class="left cur">水果</span>
<span class="left last">蔬菜</span>
<span class="left last">干果</span>
<span class="left last">粮油</span>
<label class="right"><img src="../images/xz_sg.png" alt="" title="添加图片" style="margin-right:10px; cursor:pointer; margin-top:2px;"/></label>
</h2>-->
<div class="activeCo">
<div class="jsgl_table_tab">

<div class="right">
<c:if test="${maps.get('6.2.1').updateauthority == 0}">
<input type="button" class="btn_bj margin" value="重命名" onclick="cmm()"/>
</c:if>
<c:if test="${maps.get('6.2.1').addauthority == 0}">
<input type="button" class="btn_bj margin" value="新增" onclick="document.getElementById('make_enter_ckebh_01').style.display='block';"/>
</c:if>
<c:if test="${maps.get('6.2.1').delauthority == 0}">
<input type="button" class="btn_bj margin" value="删除" onclick="del();"/>
</c:if>
</div>
</div>
<div class="bor">
<div id="marquee_new">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table_tp_new" id="table0">
<c:forEach items="${_page.data }" var="p" varStatus="index">
<c:if test="${index.index%5==0}"><tr></c:if>
<td width="20%" align="center" onmouseover="tdover(this,${index.index});" onmouseout="tdout(this,${index.index});" id="td">
<input type="checkbox" id="df_${index.index}" name="df" style="display:none;" class="xz_check" value="${p.id }" onclick="afterchecked(this);"/>
<div class="hp_new" onclick="location.href='jcjgfzhyl_detaillist.action?groupid=${p.id}';">
<a href="#">
<img src="${pageContext.request.contextPath}/images/folder.png" alt="" />
</a>
<span>${p.groupName }</span>

</div>
</td>
<c:if test="${index.index%5==4}"></tr></c:if>
</c:forEach>

</table>
</div>
</div>
<c:if test="${datasize>10 }">
<div style="margin-top:2px; border-top:1px solid #CCC" class="center">
<div class="margin"><a href="javascript:nextpage();" style="color:#333;"><strong style="font-size:16px" class="five" id="getmore">查看更多...</strong></a></div>
</div>
</c:if>
<div class="margin" style="border-top:1px solid #CCC">
</div>
</div>
</div>
</div>
</div>
</body>
</html>


上面是页面代码,点击nextpage()加载方法

public void ajaxmore(){
String pagenow=getParameter("pagenow");
if(pagenow!=null&&!"".equals(pagenow)){
Pager p=get_page() ;
p.setCurPage(Integer.parseInt(pagenow));
p =jcjgglfzTblService.getAllByPage("from JcjgglfzTbl", "select count(*) from JcjgglfzTbl", false, _page);
List<JcjgglfzTbl> list=p.getData();
StringBuilder sb = new StringBuilder("");
//String imagepath=ServletActionContext.getServletContext().getRealPath("/images")+"/folder.png";
if(list!=null&&list.size()>0){
for (int i = 0; i < list.size(); i++) {
if(i%5==0){
sb.append("<tr>");
}
sb.append("<td width=\"20%\" align=\"center\" onmouseover=\"document.getElementById('df_"+list.get(i).getId()+"').style.display='block';this.className='hp_new_xz';\" onmouseout=\"tdout(this,"+list.get(i).getId()+");\" id=\"td\">"); //onmouseout=\"document.getElementById('df_"+list.get(i).getId()+"').style.display='none';this.className='hp_new';\"
sb.append("<input type=\"checkbox\" id=\"df_"+list.get(i).getId()+"\" name=\"df\" style=\"display:none;\" class=\"xz_check\" value=\""+list.get(i).getId()+"\"/>");
sb.append("<div class='hp_new' onclick=\"location.href='jcjgfzhyl_detaillist.action?groupid="+list.get(i).getId()+"';\">");
sb.append("<a href=\"#\"><img src=\" \" alt=\"\" onerror=\"loadimage(this); \"/></a>");
sb.append("<span>"+list.get(i).getGroupName()+"</span>");
sb.append("</div></td>");
if(i%5==4){
sb.append("</tr>");
}
}
//System.out.println(sb.toString());
setAjaxData(sb.toString());
}
}

}

java +jsp实现的点击加载更多,实现数据的异步加载

java +jsp实现的点击加载更多,实现数据的异步加载