ajax分页迭代<c:foreach><select><option&gt

2016-12-16 18:57:57来源:CSDN作者:baidu_34386466人点击

第七城市

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
聪聪工作室—原创作品


第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台