MySQL+Service+Servlet+Jsp實現Table表格分頁展現數據

時間 2019-12-05

標籤 mysql+service+servlet+jsp mysql service servlet jsp 實現 table 表格分頁展現數據欄目 MySQL 简体版

原文原文鏈接

下面以一個示例講解如何使用MySQL+Service+Servlet+Jsp實現Table表格分頁展現數據：javascript

eg：請假管理系統css

要求以下：html

　1、打開首頁頁面，訪問查詢請假記錄的 servlet , 將查詢結果在列表頁面進行分頁展並按照請假時同升序排序。整個頁面的標題須要加粗加大顯示，請假記錄列表要求使用式實現對錶頭文字加粗顯示，超連接 (包括「刪除」和「添加請假記錄」兩個) 無下劃線且 ’添加請假記錄「字體爲紅色，並實現信息列表隔行變色顯示，程序運行界面下：java

　　　　　　點擊「添加請假記錄「進入添加請假記錄頁面；以下圖所示：mysql

　　　　　　點擊」提交「按鈕提交表單時.要求使用‘jQuery對頁面輸入項進行驗證.驗證內包括姓名，請假shij、請假緣由的非空驗證；其中請假時間還必須進行格式驗證，驗證效果以下所示：jquery

　　　　表單數據經過驗證後. 則提交請求至添加請假記錄的 Servlet:, 如添加成功，則給出成功提示，以下圖：ajax

　　　　　　點擊」肯定’ 後跳轉至請假記錄信息的列表頁面，並不是顯示最新的請假記錄信息，效果以下所示：sql

　　　　　若是添加請假記錄信息失敗，一樣給出添加失敗提示，並跳轉回添加請假記錄頁面，從新添加請假記錄信息；數據庫

　　　　　當用戶點擊某一條請假記錄信息對應的「刪除」超連接時，首先彈出信息提示框確認是否刪除，效果以下圖：數組

　　　　當用戶點擊「肯定" 後, 實現請假詎錄的刪除操做，要求使用Ajax 異步請求後臺Sevlet 方法進行刪除，最後給出刪除成功或者失敗的信息提示；

2、MySQL數據庫設計以下：

3、項目分層設計以下：

項目代碼以下：

LeaveRecordsDao.java

package cn.jbit.leaveReccords.dao;

import java.util.List;
import java.util.Map;

import cn.jbit.leaveReccords.entity.LeaveRecords;

public interface LeaveRecordsDao {
    /**
     * 刪除請假信息
     * 
     * @param id
     * @return
     */
    public int deleteLeaveRecords(Integer id);


    /**
     * 添加請假信息
     * 
     * @param leaveRecords  請假信息的對象
     * @return
     */
    public int addLeaveRecords(LeaveRecords leaveRecords);
    
    /**
     * 分頁查詢全部消息
     * @param pageIndex 頁碼
     * @param pageSize 數據行數
     * @return 查詢到的集合
     */
    public List<LeaveRecords> selecteLeaveRecords(int pageIndex, int pageSize);
    
    /**
     * 查詢總記錄數
     * @return 查詢到記錄總數
     */
    public int count();
    
}

LeaveRecordsDaoImpl.java

package cn.jbit.leaveReccords.dao.impl;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;

import cn.jbit.leaveReccords.dao.BaseDao;
import cn.jbit.leaveReccords.dao.LeaveRecordsDao;
import cn.jbit.leaveReccords.entity.LeaveRecords;
import cn.jbit.leaveReccords.util.DatabaseUtil;

public class LeaveRecordsDaoImpl extends BaseDao implements LeaveRecordsDao {

    /**
     * 刪除
     */
    @Override
    public int deleteLeaveRecords(Integer id) {
        int result = 0;
        String sql = "DELETE FROM leaverecords WHERE id=?";
        try {
            result = this.executeUpdate(sql, id);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return result;
    }

    @Override
    public int addLeaveRecords(LeaveRecords leaveRecords) {
        int result = 0;
        String sql = "INSERT INTO `leaverecords`(`name`,leaveTime,reason) VALUES (?,?,?)";
        try {
            result = this.executeUpdate(sql, leaveRecords.getName(), leaveRecords.getLeaveTime(),
                    leaveRecords.getReason());
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return result;
    }

    /**
     * 分頁顯示數據
     */
    @Override
    public List<LeaveRecords> selecteLeaveRecords(int pageIndex, int pageSize) {
        String sql = "SELECT id,`name`,leaveTime,reason FROM leaverecords  ORDER BY leaveTime ASC limit ?,?";
        Connection conn = null;
        PreparedStatement pstmt = null;
        ResultSet rs = null;
        LeaveRecords records = null;
        List<LeaveRecords> leaveRecordsList = new ArrayList<LeaveRecords>();
        try {
            conn = DatabaseUtil.getConnection();
            pstmt = conn.prepareStatement(sql);
            pstmt.setInt(1, (pageIndex - 1) * pageSize);
            pstmt.setInt(2, pageSize);
            rs = pstmt.executeQuery();
            while (rs.next()) {
                records = new LeaveRecords();
                records.setId(rs.getInt("id"));
                records.setName(rs.getString("name"));
                records.setLeaveTime(rs.getDate("leaveTime"));
                records.setReason(rs.getString("reason"));
                leaveRecordsList.add(records);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            DatabaseUtil.closeAll(conn, pstmt, rs);
        }
        return leaveRecordsList;
    }

    /**
     * 查詢總數
     */
    @Override
    public int count() {
        int result = 0;
        String sql = "SELECT count(1) FROM leaverecords";
        ResultSet rs = null;
        try {
            rs = this.executeQuery(sql);
            while (rs.next()) {
                result = rs.getInt(1);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            DatabaseUtil.closeAll(null, null, rs);
        }
        return result;
    }
}

BaseDao.java

package cn.jbit.leaveReccords.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import cn.jbit.leaveReccords.util.DatabaseUtil;

/**
 * 執行數據庫操做的工具類。
 */
public class BaseDao {

    private Connection conn;

    /**
     * 增、刪、改操做的方法
     * 
     * @param sql   sql語句
     * @param prams 參數數組
     * @return 執行結果
     * @throws SQLException
     */
    protected int executeUpdate(String sql, Object... params) throws SQLException {
        int result = 0;
        conn = DatabaseUtil.getConnection();
        PreparedStatement pstmt = null;
        try {
            pstmt = conn.prepareStatement(sql);
            for (int i = 0; i < params.length; i++) {
                pstmt.setObject(i + 1, params[i]);
            }
            result = pstmt.executeUpdate();
        } catch (SQLException e) {
            e.printStackTrace();
            throw e;
        } finally {
            DatabaseUtil.closeAll(null, pstmt, null);
        }
        return result;
    }

    /**
     * 查詢操做的方法
     * 
     * @param sql    sql語句
     * @param params 參數數組
     * @return 查詢結果集
     * @throws SQLException
     */
    protected ResultSet executeQuery(String sql, Object... params) throws SQLException {
        PreparedStatement pstmt = null;
        conn = DatabaseUtil.getConnection();
        ResultSet rs = null;
        try {
            pstmt = conn.prepareStatement(sql);
            for (int i = 0; i < params.length; i++) {
                pstmt.setObject(i + 1, params[i]);
            }
            rs = pstmt.executeQuery();
        } catch (SQLException e) {
            e.printStackTrace();
            throw e;
        }
        return rs;
    }
}

LeaveRecords.java

package cn.jbit.leaveReccords.entity;

import java.util.Date;

public class LeaveRecords {
    private Integer id;// 編號
    private String name;// 請假人姓名
    private Date leaveTime;// 請假時間
    private String reason;// 請假緣由

    public LeaveRecords() {
        super();
    }

    public LeaveRecords(String name, Date leaveTime, String reason) {
        super();
        this.name = name;
        this.leaveTime = leaveTime;
        this.reason = reason;
    }

    public LeaveRecords(Integer id, String name, Date leaveTime, String reason) {
        super();
        this.id = id;
        this.name = name;
        this.leaveTime = leaveTime;
        this.reason = reason;
    }

    //省略了getter和setter方法

}

LeaveRecordsService.java

package cn.jbit.leaveReccords.service;

import java.util.List;
import java.util.Map;

import cn.jbit.leaveReccords.entity.LeaveRecords;
import cn.jbit.leaveReccords.util.Page;

public interface LeaveRecordsService {
    /**
     * 分頁
     * @param page
     */
    public void RecordsList(Page<LeaveRecords> page);
    /**
     * 添加請假信息
     * 
     * @param leaveRecords
     * @return
     */
    public Integer insertLeaveRecords(LeaveRecords leaveRecords);

    /**
     * 刪除請假信息
     * 
     * @param id
     * @return
     */
    public Integer deleteLeaveRecords(int id);

}

LeaveRecordsServiceImpl.java

package cn.jbit.leaveReccords.service.impl;

import java.util.List;
import java.util.Map;

import cn.jbit.leaveReccords.dao.LeaveRecordsDao;
import cn.jbit.leaveReccords.dao.impl.LeaveRecordsDaoImpl;
import cn.jbit.leaveReccords.entity.LeaveRecords;
import cn.jbit.leaveReccords.service.LeaveRecordsService;
import cn.jbit.leaveReccords.util.Page;

public class LeaveRecordsServiceImpl implements LeaveRecordsService {
    LeaveRecordsDao leaveRecordsDao = new LeaveRecordsDaoImpl();

    @Override
    public Integer insertLeaveRecords(LeaveRecords leaveRecords) {
        return leaveRecordsDao.addLeaveRecords(leaveRecords);
    }

    @Override
    public Integer deleteLeaveRecords(int id) {
        return leaveRecordsDao.deleteLeaveRecords(id);
    }

    @Override
    public void RecordsList(Page<LeaveRecords> page) {
        int count=leaveRecordsDao.count();//獲取全部消息的數量
        page.setTotalCount(count);
        //判斷傳入的頁面是否合法
        if(page.getPageIndex()>page.getTotalPageCount()) {
            //確保頁面不會超過總頁數
            page.setPageIndex(page.getTotalPageCount());
        }
        List<LeaveRecords> dataList=leaveRecordsDao.selecteLeaveRecords(page.getPageIndex(), page.getPageSize());
        page.setDataList(dataList);
    }
}

LeaveRecordsDaoTest.java

package cn.jbit.leaveReccords.test;

import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.junit.Test;

import cn.jbit.leaveReccords.dao.LeaveRecordsDao;
import cn.jbit.leaveReccords.dao.impl.LeaveRecordsDaoImpl;
import cn.jbit.leaveReccords.entity.LeaveRecords;
import cn.jbit.leaveReccords.service.LeaveRecordsService;
import cn.jbit.leaveReccords.service.impl.LeaveRecordsServiceImpl;

public class LeaveRecordsDaoTest {
    @Test
    public void LeaveRecords() {
        LeaveRecordsService recordsService=new LeaveRecordsServiceImpl();
        //添加
        String date="2018-08-07";
        SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");
        Date leaveTime=null;
        try {
            leaveTime=(Date)sdf.parse(date);
        } catch (ParseException e) {
            e.printStackTrace();
        }
        LeaveRecords leaveRecords=new LeaveRecords("www", leaveTime, "successful");
        int result=recordsService.insertLeaveRecords(leaveRecords);
        System.out.println(result);
        
        //刪除
        int num=recordsService.deleteLeaveRecords(20);
        System.out.println(num);
        //分頁查詢
        LeaveRecordsDao recordsDao=new LeaveRecordsDaoImpl();
        List<LeaveRecords> list=recordsDao.selecteLeaveRecords(1, 5);
        for (LeaveRecords leaveRecords2 : list) {
            System.out.println(leaveRecords2.getName());
        }
        
        //查詢
        Map<String , Object> param=new HashMap<String, Object>();
        param.put("records", new LeaveRecords(null, null, null, null));
        List<LeaveRecords> listinfo=recordsService.findLeaveRecords(param);
        for (LeaveRecords leaveRecords2 : listinfo) {
            System.out.println(leaveRecords2.getLeaveTime());
        }
    }
}

LeaveRecordsServlet.java

package cn.jbit.leaveReccords.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import cn.jbit.leaveReccords.entity.LeaveRecords;
import cn.jbit.leaveReccords.service.LeaveRecordsService;
import cn.jbit.leaveReccords.service.impl.LeaveRecordsServiceImpl;
import cn.jbit.leaveReccords.util.Page;

@WebServlet(urlPatterns = { "/LeaveRecordsServlet" }, name = "LeaveRecordsServlet")
public class LeaveRecordsServlet extends HttpServlet {

    private static final long serialVersionUID = -8076807217250462175L;

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=utf-8");
        LeaveRecordsService leaveRecordsService = new LeaveRecordsServiceImpl();
        // 根據action決定做什麼操做
        String action = request.getParameter("action");
        //分頁查詢
        if ("list".equals(action)) {
            // 獲取當前頁數參數
            String pageIndex = request.getParameter("pageIndex");
            // 獲取頁面大小參數（每頁顯示的數量）
            // String pageSize = request.getParameter("pageSize");
            int index = 1;// 設置首頁爲1
            int size = 8;// 設置頁面大小爲8條數據
            try {
                if (pageIndex == null) {
                    index = 1;
                } else {
                    index = Integer.parseInt(pageIndex);
                }

                // size=Integer.parseInt(pageSize);
            } catch (Exception e) {
                e.printStackTrace();
            }

            // 將分頁參數封裝到分頁對象中
            Page<LeaveRecords> page = new Page<LeaveRecords>();
            page.setPageIndex(index);
            page.setPageSize(size);

            // 調用Service層進行分頁查詢
            leaveRecordsService.RecordsList(page);

            // 尾頁填充空白行(爲了視覺美觀)（效果圖以下圖中的空白行）
            List<LeaveRecords> recordsList = page.getDataList();
            if (recordsList.size() < page.getPageSize()) {
                for (int i = recordsList.size(); i < page.getPageSize(); i++)
                    recordsList.add(null);
            }
            page.setDataList(recordsList);
            
            // 將業務層處理後的分頁對象存放至request做用域中
            request.setAttribute("page", page);
            request.getRequestDispatcher("select.jsp").forward(request, response);
        }
        //刪除記錄
        if ("delete".equals(action)) {
            String sid = request.getParameter("opt");
            int id = Integer.parseInt(sid);
            int deleteInfo = leaveRecordsService.deleteLeaveRecords(id);
            PrintWriter out = response.getWriter();
            boolean result;
            if (deleteInfo > 0) {
                result = true;
            } else {
                result = false;
            }
            out.print(result);
            out.flush();
            out.close();
        }
        //增長記錄
        if("insert".equals(action)) {
            //請假人姓名
            String name=request.getParameter("name");
            //請假時間
            String time=request.getParameter("leaveTime");
            SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");
            Date leaveTime=null;
            try {
                leaveTime = (Date)sdf.parse(time);
            } catch (ParseException e) {
                e.printStackTrace();
            }
            //請假緣由
            String reason=request.getParameter("reason");
            LeaveRecords leaveRecords=new LeaveRecords(name, leaveTime, reason);
            int result= leaveRecordsService.insertLeaveRecords(leaveRecords);
            PrintWriter out=response.getWriter();
            if(result>0) {
                out.println("<script type='text/javascript'>" 
                        + "alert('添加成功！');" 
                        + "location.href='LeaveRecordsServlet?action=list'"
                        + "</script>");
            } else {
                out.print("<script type='text/javascript'>" 
                        + "alert('添加失敗！')" 
                        + "loction='LeaveRecordsServlet?action=insert'" + "</script>");
            }
        }
    }
}

ConfigManager.java

package cn.jbit.leaveReccords.util;

import java.io.IOException;
import java.io.InputStream;
import java.util.Properties;

/**
 * 數據庫參數配置文件查找工具類
 * @author 逆風〠飛�?
 *
 */
public class ConfigManager {
    private static Properties props = null;

    static {
        InputStream is = null;
        is = ConfigManager.class.getClassLoader().getResourceAsStream("database.properties");
        if (is == null)
            throw new RuntimeException("找不到數據庫參數配置文件�?");
        props = new Properties();
        try {
            props.load(is);
        } catch (IOException e) {
            throw new RuntimeException("數據庫配置參數加載錯誤！", e);
        } finally {
            try {
                is.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

    public static String getProperty(String key) {
        return props.getProperty(key);
    }
}

DatabaseUtil.java

package cn.jbit.leaveReccords.util;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

/**
 * 數據庫鏈接與關閉工具類�??
 * 
 */
public class DatabaseUtil {
    private static String driver = ConfigManager.getProperty("driver");// 數據庫驅動字符串
    private static String url = ConfigManager.getProperty("url"); // 鏈接URL字符�?
    private static String user = ConfigManager.getProperty("user"); // 數據庫用戶名
    private static String password = ConfigManager.getProperty("password"); // 用戶密碼

    static {
        try {
            Class.forName(driver);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }

    /**
     * 獲取數據庫鏈接對象�??
     */
    public static Connection getConnection() throws SQLException {
        // 獲取鏈接並捕獲異�?
        Connection conn = null;
        try {
            conn = DriverManager.getConnection(url, user, password);
        } catch (SQLException e) {
            e.printStackTrace();
            throw e;
        }
        return conn;// 返回鏈接對象
    }

    /**
     * 
     * 關閉數據庫連�?
     * @param conn 數據庫連�?
     * @param stmt Statement對象
     * @param rs   結果�?
     */
    public static void closeAll(Connection conn, Statement stmt, ResultSet rs) {
        // 若結果集對象不爲空，則關�?
        try {
            if (rs != null && !rs.isClosed())
                rs.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
        // 若Statement對象不爲空，則關�?
        try {
            if (stmt != null && !stmt.isClosed())
                stmt.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
        // 若數據庫鏈接對象不爲空，則關�?
        try {
            if (conn != null && !conn.isClosed())
                conn.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

}

EmptyUtils.java

package cn.jbit.leaveReccords.util;

import java.util.Collection;
import java.util.Map;

/**
 * 判斷是否爲空的工具類
 * @author 逆風〠飛翔
 *
 */
public class EmptyUtils {
    // 鍒ょ┖
    public static boolean isEmpty(Object obj) {
        if (obj == null)
            return true;
        if (obj instanceof CharSequence)
            return ((CharSequence) obj).length() == 0;
        if (obj instanceof Collection)
            return ((Collection) obj).isEmpty();
        if (obj instanceof Map)
            return ((Map) obj).isEmpty();
        if (obj instanceof Object[]) {
            Object[] object = (Object[]) obj;
            if (object.length == 0) {
                return true;
            }
            boolean empty = true;
            for (int i = 0; i < object.length; i++) {
                if (!isEmpty(object[i])) {
                    empty = false;
                    break;
                }
            }
            return empty;
        }
        return false;
    }

    public static boolean isNotEmpty(Object obj) {
        return !isEmpty(obj);
    }

    private boolean validPropertyEmpty(Object... args) {
        for (int i = 0; i < args.length; i++) {
            if (EmptyUtils.isEmpty(args[i])) {
                return true;
            }
        }
        return false;
    }
}

Page.java

package cn.jbit.leaveReccords.util;

import java.util.List;

/**
 * 分頁用的基類，抽取了通用的分頁參數
 *
 */
public class Page<T> {
    private int pageIndex=1;// 當前頁數
    private int pageSize=8 ;// 每頁顯示的行數
    private int totalCount;// 總記錄數
    private int totalPageCount;// 總頁數
    private List<T> dataList ;// 分頁結果的泛型集合

    public int getPageIndex() {
        return pageIndex;
    }

    public void setPageIndex(int pageIndex) {
        // 判斷當前頁碼，若是頁碼大於零，則顯示爲當前的pageIndex頁面，不然pageIndex爲1，即第一頁
        if (pageIndex > 0) {
            this.pageIndex = pageIndex;
        } else {
            this.pageIndex = 1;
        }
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        // 設置每頁顯示數據的條數
        if (pageSize > 0) {
            this.pageSize = pageSize;
        } else {
            this.pageSize = 5;
        }
    }

    public int getTotalCount() {
        return totalCount;
    }

    public void setTotalCount(int totalCount) {
        if (totalCount > 0) {
            //總記錄數
            this.totalCount = totalCount;
            //計算總頁數
            this.totalPageCount = (this.totalCount % this.pageSize == 0) ? (this.totalCount / this.pageSize)
                    : (this.totalCount / this.pageSize + 1);
        }
    }

    public int getTotalPageCount() {
        return totalPageCount;
    }

    public void setTotalPageCount(int totalPageCount) {
        this.totalPageCount = totalPageCount;
    }

    public List<T> getDataList() {
        return dataList;
    }

    public void setDataList(List<T> dataList) {
        this.dataList = dataList;
    }
}

配置文件代碼：

database.properties

#數據庫鏈接驅動
driver=com.mysql.jdbc.Driver
#數據庫用戶名
user=WebTest
#數據庫密碼
password=1234
#鏈接URL字符串
url=jdbc\:mysql\://localhost\:3306/leaverecords?useSSL\=false

JSP頁面代碼：

查詢JSP:select.jsp

<%@page import="cn.jbit.leaveReccords.entity.LeaveRecords"%>
<%@page import="cn.jbit.leaveReccords.util.Page"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>查詢請假記錄</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
</head>
<%
    Page recordsPage = (Page) request.getAttribute("page");
    //只要是訪問select.jsp都須要先訪問LeaveRecordsServlet?action=list讓做用域中有msgPage的數據
    if (recordsPage == null) {
        request.getRequestDispatcher("LeaveRecordsServlet?action=list").forward(request, response);
        return;
    }
    
    String[] leaveRecordsInfo = { "編號", "姓名", "請假時間", "請假緣由", "操做" };
    request.setAttribute("leaveRecordsInfo", leaveRecordsInfo);
%>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/delete.js"></script>
<body>
    <div align="center" style="margin-top: 130px;">
        <h1 style="font-weight: bold;">請假記錄列表</h1>
        <div align="left" style="width: 790px"><a  href="insert.jsp">添加請假記錄</a></div>
        <form action="LeaveRecordsServlet?action=list" method="post" id="form" name="form1">
            <table border="1" width="800px" style="text-align: center;">
                <thead style="background-color: #999999">
                    <c:forEach var="leaveRecordsInfo"
                        items="${requestScope.leaveRecordsInfo}">
                        <th>${leaveRecordsInfo}</th>
                    </c:forEach>
                </thead>
                <tbody>
                    <c:forEach var="leaveRecordsList"
                        items="${requestScope.page.dataList}" varStatus="status">
                        <tr height="30px"
                            <c:if test="${status.index % 2 ==1}">style="background-color:#9CD1F3;"</c:if>>
                            <td>${leaveRecordsList.id}</td>
                            <td>${leaveRecordsList.name}</td>
                            <td>${leaveRecordsList.leaveTime}</td>
                            <td>${leaveRecordsList.reason}</td>
                            <td>
                               <c:if test="${leaveRecordsList!=null}">
                                  <a href="javascript:void(0)" onclick="del(${leaveRecordsList.id})">刪除 </a>
                               </c:if>
                            </td>
                        </tr>
                    </c:forEach>
                </tbody>
            </table>
        </form>
        <div style="width: 800px;background-color: #9CD1F3;line-height: 40px;">
            <a href="LeaveRecordsServlet?action=list&pageIndex=1">首頁</a> &#160;&#160;
            <a href="LeaveRecordsServlet?action=list&pageIndex=${page.pageIndex-1<1?1:page.pageIndex-1 }">上一頁</a>&#160;&#160;
              &#160;&#160;&#160;第${page.pageIndex }頁/共${page.totalPageCount }頁 &#160;&#160;&#160;
            <a href="LeaveRecordsServlet?action=list&pageIndex=${page.pageIndex+1>page.totalPageCount?page.pageIndex:page.pageIndex+1 }">下一頁</a>&#160;&#160;
            <a href="LeaveRecordsServlet?action=list&pageIndex=${page.totalPageCount }">末頁</a>    
             <div style="float: right; ">
                         
             當前頁<select id="select" onchange="document.all.form1.submit();">
                <c:forEach begin="1" end="${page.totalPageCount}" var="pageNum">
                  <option value="${pageNum}" ${page.pageIndex==pageNum?'selected="selected"':''}>${pageNum}</option>
               </c:forEach>
              </select>.
                 共${page.totalCount}條. 每頁顯示${page.pageSize}條&#160;&#160;&#160;&#160;
               </div>
        </div>
    </div>
</body>
</html>

刪除的js：delete.js

function del(id) {
    var dele = confirm("肯定要刪除嗎？");
    if (dele == true) {
        $.ajax({
            "url" : "LeaveRecordsServlet?action=delete",
            "type" : "post",
            "data" : "opt=" + id,
            "dataType" : "text",
            "success" : success,
            "error" : error,
        });

        // 刪除成功回調函數
        function success(data) {
            if (data == "true") {
                alert("刪除成功！");
                location.href="LeaveRecordsServlet?action=list";
            } else {
                alert("刪除失敗！");
            }
        }
        // 請求失敗回調函數
        function error(date) {
            alert("請求失敗!");
        }
    }
}

添加JSP:insert.jsp

<%@ page language="java" import="java.util.*" 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">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'insert.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->

</head>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/insert.js"></script>
<body>
    <div align="center" style="margin-top: 130px">
    <h2>添加請假記錄</h2>
        <form action="LeaveRecordsServlet?action=insert" method="post"
            onsubmit="return check()">
            <table style="padding-bottom: 30px">
                <tr>
                    <td>姓名:</td>
                    <td><input type="text" name="name" id="name" />
                </tr>
                <tr>
                    <td>請假時間:</td>
                    <td><input type="text" name="leaveTime" id="leaveTime" />
                    <div style="display: inline;">格式要求：yyyy-mm-dd</div>
                </tr>
                <tr>
                    <td>請假緣由：</td>
                    <td><textarea rows="5" cols="50" name="reason" id="reason"></textarea>
                    </td>
                </tr>
            </table>
            <input type="submit" value="提交" />&#160;&#160;<input type="reset" value="重置" />
        </form>
    </div>
</body>
</html>

添加的非空驗證的js：insert.js

//非空驗證
function check() {
    var name = $("#name").val();
    var leaveTime = $("#leaveTime").val();
    var context=$("context").val();
    var reg = /^([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8])))$/;
    if (name == "" || leaveTime=="" || context=="" ) {
        alert("信息未填寫完整，請完善！");
        return false;
    }
    if(reg.test(leaveTime)==false){
        alert("日期格式有誤，請從新填寫！");
        return false;
    }
}