ajax分頁迭代顯示不同行數跳轉下一頁mysql+spring+ajax
話不多說,直接上代碼。。。
equip_monitor.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>設備監測</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../js/Calender.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#sect').blur(function() {
var sel = document.getElementById('sect').value;
setline(sel)
})
})
function setline(line) {
$.ajax({
type : "post",
url : '${pageContext.request.contextPath}/equip/changeline.action',
data : "line=" + line,
success : function(data) {
}
});
}
</script>
</head>
<body id="body">
<form action="getDate.jsp">
搜索:<input type="text">
<button type="submit">點擊搜索</button>
</form>
<form name="date" method="post" action="getDate.jsp">
<select name="year">
</select>年 <select name="month">
</select>月 <select name="day">
</select>日
<button type="submit">提交查詢</button>
</form>
<br> 顯示數據行數:
<select name="option" id="sect">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</select>
<a href="${pageContext.request.contextPath }/equip/getList.action">確定</a>
<a href="${pageContext.request.contextPath }/equip/getList.action">首頁</a>
<a
href="${pageContext.request.contextPath }/equip/lastPage.action?begin=${indexOf}">上一頁</a>
<a
href="${pageContext.request.contextPath }/equip/nextPage.action?end=${line-1}">下一頁</a>
<br>
<table cellspacing="0" cellpadding="0" border="1" width="1000px"
style="text-align: center">
<tr>
<td>ID:</td>
<td>設備序號</td>
<td>設備名稱</td>
<td>能耗總值(KWH)</td>
<td>基準值(KWH)</td>
<td>當前能耗</td>
<td>操作</td>
</tr>
<c:forEach items="${equipList}" var="equip" begin="${indexOf}"
end="${line-1}">
<tr>
<td>${equip.id}</td>
<td>${equip.equipId}</td>
<td>${equip.equipName}</td>
<td>${equip.totalConsum}</td>
<td>${equip.referValue}</td>
<td>${equip.currentConsum}</td>
<td><a
href="${pageContext.request.contextPath }/equip/updateThis.action?id=${equip.id}">修改</a>
<a
href="${pageContext.request.contextPath }/equip/deleteThis.action?id=${equip.id}"
style="color: red">刪除</a></td>
</tr>
</c:forEach>
</table>
</body>
</html>
equip_monitor.jsp的代碼也不是很複雜,能看懂,顯示行數最關鍵在於c標籤foreach
c:forEach標籤中的 begin 和 end 開始下標和結束下標,相當於list.get(index)方法,
當select option失去焦點時, js中的代碼處理是把option中value的值通過ajax傳到springMvc框架中Controller層
的 /changeline.action 進行處理
EquipMonitController.java
package com.dy.nygl.controller;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.Resource;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;
import com.dy.nygl.pojo.EquipMonit;
import com.dy.nygl.pojo.User;
import com.dy.nygl.service.EquipMonitService;
@Controller
@RequestMapping("/equip")
public class EquipMonitController {
private Integer line = 10;
@Resource(name = "equipMonitService")
private EquipMonitService equipMonitService;
@RequestMapping("/getList.action")
public ModelAndView getList(HttpSession session) throws IOException {
List<EquipMonit> equipList = new ArrayList<>();
ModelAndView model = new ModelAndView();
equipList = equipMonitService.selectAll();
model.addObject("indexOf", 0);
line = getline();
model.addObject("line", line);
model.addObject("equipList", equipList);
model.setViewName("equip_monitor");
return model;
}
@RequestMapping("/updateThis.action")
public ModelAndView updateThis(@RequestParam("id") Integer id, HttpSession session) throws IOException {
ModelAndView model = new ModelAndView();
model.addObject("id", id);
model.setViewName("equipment");
return model;
}
@RequestMapping(value = "/updateSelective", method = { RequestMethod.POST })
public ModelAndView updateSelective(HttpServletRequest request, HttpSession session) throws IOException {
String id1 = request.getParameter("id");
int id = Integer.parseInt(id1);
String equipId = request.getParameter("equipId");
String equipName = request.getParameter("equipName");
String totalConsum = request.getParameter("totalConsum");
String referValue = request.getParameter("referValue");
String currentConsum = request.getParameter("currentConsum");
EquipMonit equipMonit = new EquipMonit();
equipMonit.setId(id);
equipMonit.setEquipName(equipName);
equipMonit.setEquipId(equipId);
equipMonit.setTotalConsum(totalConsum);
equipMonit.setReferValue(referValue);
equipMonit.setCurrentConsum(currentConsum);
equipMonitService.update(equipMonit);
List<EquipMonit> equipList = new ArrayList<>();
ModelAndView model = new ModelAndView();
equipList = equipMonitService.selectAll();
model.addObject("indexOf", 0);
line = getline();
model.addObject("line", line);
model.addObject("equipList", equipList);
model.setViewName("equip_monitor");
return model;
}
@RequestMapping("/nextPage.action")
public ModelAndView nextPage(@RequestParam("end") Integer end, HttpSession session) throws IOException {
List<EquipMonit> equipList = new ArrayList<>();
ModelAndView model = new ModelAndView();
equipList = equipMonitService.selectAll();
model.addObject("indexOf", end + 1);
line = getline();
model.addObject("line", end + line + 1);
model.addObject("equipList", equipList);
model.setViewName("equip_monitor");
return model;
}
@RequestMapping("/lastPage.action")
public ModelAndView lastSPage(@RequestParam("begin") Integer begin, HttpSession session) throws IOException {
List<EquipMonit> equipList = new ArrayList<>();
ModelAndView model = new ModelAndView();
equipList = equipMonitService.selectAll();
if (begin - line < 0) {
model.addObject("indexOf", 0);
line = getline();
model.addObject("line", line);
} else {
model.addObject("indexOf", begin - line);
line = getline();
model.addObject("line", begin);
}
model.addObject("equipList", equipList);
model.setViewName("equip_monitor");
return model;
}
@RequestMapping(value = "/changeline.action", method = { RequestMethod.POST })
public void checkUser(HttpServletRequest request, HttpServletResponse response, HttpSession session)
throws ServletException, IOException {
PrintWriter out = response.getWriter();
String line = request.getParameter("line");
setline(line);
out.print(1);
}
public void setline(String line) {
int line1 = Integer.parseInt(line);
this.line = line1;
}
public int getline() {
return line;
}
@RequestMapping("/update.action")
public void update() {
EquipMonit equipMonit = new EquipMonit();
for (int i = 1; i < 500; i++) {
equipMonit.setId(i);
equipMonit.setName("name" + i);
equipMonit.setEquipName("Equip-Name-" + i);
equipMonit.setEquipId("Equip-No." + i);
equipMonit.setTotalConsum("666" + i);
equipMonit.setReferValue("28" + i);
equipMonit.setCurrentConsum("235." + i);
equipMonitService.update(equipMonit);
}
}
@RequestMapping("/insert.action")
public void insert() {
EquipMonit equipMonit = new EquipMonit();
for (int j = 49; j < 500; j++) {
equipMonit.setName("Name-" + j);
equipMonit.setEquipName("EquipName-" + j);
equipMonit.setEquipId("Equip-No." + j);
equipMonit.setReferValue("28" + j);
equipMonit.setTotalConsum("666" + j);
equipMonit.setCurrentConsum("235." + j);
equipMonitService.insert(equipMonit);
}
}
}
Controller層的代碼比較多,因爲要對getList.action ,nextPage.action,lastPage.action,changeline進行操作
ajax首先執行url changline.action操作,把option的value值傳到Controller層
再是setline和getline.這裏要注意一點,private int line=10;line的初始值爲10,沒有初始值server開始運行時會出現505報錯。
設定好後執行 getList.action 這就不多說了
nextpage.action也就是點擊下一頁的操作,起始點indexOf是傳過來的end的參數,終點是end+line。仔細研究一下可以看懂。還有就是要加1 因爲傳來的end是上一頁的終點
lastpage.action也就是上一頁也是同樣的原理,需要注意的是起始點不能爲負數,所以model.addObject()中value的值begin-line要大於等於0才行,不然運行會報錯
還有修改刪除操作也很簡單的,自己研究下也就會了…
完美運行
以上是經驗分享,感謝閱讀!
QQ: 1099749430
聰聰工作室—原創作品