ajax分頁迭代顯示不同行數跳轉下一頁mysql+spring+ajax

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
聰聰工作室—原創作品


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章