ssm-crud項目——分頁查詢

時間 2020-04-18

標籤 ssm crud 項目分頁查詢欄目網站開發简体版

原文原文鏈接

分頁查詢（ajax異步查詢）：javascript

工程目錄結構：css

基於maven構建工程：html

1、準配配置文件前端

1.建立pom.xmljava

<project xmlns="http://maven.apache.org/POM/4.0.0"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 
http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.atguigu</groupId>
  <artifactId>ssm-crud</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>
  
  <!-- 引入項目依賴的jar包 -->
  <!-- springmvc、spring -->
  <dependencies>
      <!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc -->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-webmvc</artifactId>
        <version>4.3.7.RELEASE</version>
    </dependency>
    
    <!-- spring-jdbc 事務控制-->
        <!-- https://mvnrepository.com/artifact/org.springframework/spring-jdbc -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>4.3.7.RELEASE</version>
        </dependency>
        
    <!-- spring-test 單元測試模塊 -->
    <!-- https://mvnrepository.com/artifact/org.springframework/spring-test -->
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-test</artifactId>
        <version>4.3.7.RELEASE</version>
        <scope>test</scope>
    </dependency>
        
    
    <!-- spring 面向切面編程 -->
        <!-- https://mvnrepository.com/artifact/org.springframework/spring-aspects -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aspects</artifactId>
            <version>4.3.7.RELEASE</version>
        </dependency>
    
    <!-- mybatis -->
        <!-- https://mvnrepository.com/artifact/org.mybatis/mybatis -->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.4.2</version>
        </dependency>
        
    <!-- mybatis 整合spring的適配包 -->
    <!-- https://mvnrepository.com/artifact/org.mybatis/mybatis-spring -->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>1.3.1</version>
        </dependency>
    
    <!-- 數據庫鏈接池、驅動 -->
    <!-- https://mvnrepository.com/artifact/c3p0/c3p0 -->
        <dependency>
            <groupId>c3p0</groupId>
            <artifactId>c3p0</artifactId>
            <version>0.9.1.2</version>
        </dependency>
        
            <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.41</version>
        </dependency>
    
    <!-- jstl,servlet-api,junit -->
        <!-- https://mvnrepository.com/artifact/jstl/jstl -->
        <dependency>
            <groupId>jstl</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
            <!-- https://mvnrepository.com/artifact/javax.servlet/servlet-api -->
        <!-- <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5</version>
            <scope>provided</scope>
        </dependency> -->
        <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.0.1</version>
            <scope>provided</scope>
        </dependency>
        
    
                <!-- https://mvnrepository.com/artifact/junit/junit -->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
            <scope>test</scope>
        </dependency>
        
    <!-- 引入pageHelper插件 -->
    <dependency>
        <groupId>com.github.pagehelper</groupId>
        <artifactId>pagehelper</artifactId>
        <version>5.0.0</version>
    </dependency>
    
    <!-- 返回json字符串的支持 -->
    <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-databind</artifactId>
        <version>2.8.8</version>
    </dependency>
    
    
    
    <!-- MBG(mybatis generator) -->     
    <!-- https://mvnrepository.com/artifact/org.mybatis.generator/mybatis-generator-core -->
    <dependency>
        <groupId>org.mybatis.generator</groupId>
        <artifactId>mybatis-generator-core</artifactId>
        <version>1.3.5</version>
    </dependency>
    
  
    <!-- <packaging>war</packaging>報錯時，添加下面依賴 -->
      <dependency> 
      <groupId>org.apache.maven.plugins</groupId>
      <artifactId>maven-resources-plugin</artifactId> 
      <version>2.5</version> </dependency>

  </dependencies>
</project>

View Code

2.建立web.xmlmysql

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xmlns="http://java.sun.com/xml/ns/javaee" 
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" 
id="WebApp_ID" version="2.5">

    <!-- 一、啓動spring容器 -->
    <!-- needed for ContextLoaderListener -->
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:applicationContext.xml</param-value>
    </context-param>

    <!-- Bootstraps the root web application context before servlet initialization -->
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>
    
    <!-- 二、springmvc的前端控制器 攔截全部請求 -->
    <!-- The front controller of this Spring Web application, responsible for handling all application requests -->
    <servlet>
        <servlet-name>dispatcherServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <!-- Map all requests to the DispatcherServlet for handling -->
    <servlet-mapping>
        <servlet-name>dispatcherServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
    
    <!-- 字符編碼 過濾器  必定要放在全部過濾器以前的-->
    <filter>
        <filter-name>CharacterEncodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>utf-8</param-value>
        </init-param>
        <init-param>
            <param-name>forceRequestEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
        <init-param>
            <param-name>forceResponseEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CharacterEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    
    <!-- 四、使用Rest風格的URI 將頁面普通的post請求轉爲指定的delete或者put請求-->
    <filter>
        <filter-name>HiddenHttpMethodFilter</filter-name>
        <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>HiddenHttpMethodFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    
    
  <display-name>ssm-crud</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
</web-app>

View Code

3.建立（springmvc）dispatcherServlet-servlet.xmljquery

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd
        http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd">

    <!-- springmvc配置文件，包含網站跳轉邏輯的控制，配置 -->
    <context:component-scan base-package="com.atguigu" use-default-filters="false">
        <!-- 只掃描控制器 -->
        <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
    </context:component-scan>
    
    <!-- 配置視圖解析器，方便頁面返回 -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/views/"></property>
        <property name="suffix" value=".jsp"></property>
    </bean>
        
    <!-- 兩個標準配置 -->
    <!-- 將springMVC不能處理的請求交給Tomcat -->
    <mvc:default-servlet-handler/>
    <!-- 能支持springmvc更高級的一些功能 ，如：JSR303校驗，快捷的ajax.. 映射動態請求-->
    <mvc:annotation-driven/>
</beans>

View Code

4.建立(mybatis全局配置文件) mybatis-config.xmlgit

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
  PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-config.dtd">
 <configuration>
     <settings>
         <setting name="mapUnderscoreToCamelCase" value="true"/>
     </settings>
     <!-- 類型別名 配置-->
     <typeAliases>
         <package name="com.atguigu.crud.bean"/>
     </typeAliases>
     
     <!-- 註冊pagehelper插件 -->
     <plugins>
         <plugin interceptor="com.github.pagehelper.PageInterceptor">
             <!-- 分頁參數合理化 -->
             <property name="reasonable" value="true"/>
         </plugin>
     </plugins>
 </configuration>

View Code

5.建立（spring）applicationContext.xmlgithub

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:aop="http://www.springframework.org/schema/aop"
    xmlns:tx="http://www.springframework.org/schema/tx"
    xsi:schemaLocation="http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.3.xsd
        http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.3.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd">


<!-- spring配置文件的核心點（數據源，與mybatis的整合，事務控制） -->

    <!--================ 掃描業務邏輯組件====================================-->
    <context:component-scan base-package="com.atguigu">
        <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
    </context:component-scan>



    <!-- spring配置文件，這裏主要配置和業務邏輯有關的 -->
    
    
    
    <!-- =====================數據源================================ -->
    
    <!-- 引入配置的dbconfig.properties -->
    <context:property-placeholder location="classpath:dbconfig.properties"/>
    
    <bean id="pooledDataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
        <property name="jdbcUrl" value="${jdbc.jdbcUrl}"></property>
        <property name="driverClass" value="${jdbc.driverClass}"></property>
        <property name="user" value="${jdbc.user}"></property>
        <property name="password" value="${jdbc.password}"></property>
    </bean>
    
    <!--===================== 配置和mybatis的整合 ========================-->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!-- 指定mybatis全局配置文件的位置 -->
        <property name="configLocation" value="classpath:mybatis-config.xml"></property>
        <property name="dataSource" ref="pooledDataSource"></property>
        <!-- 指定mybatis，mapper文件的位置 -->
        <property name="mapperLocations" value="classpath:mapper/*.xml"></property>
    </bean>
    
    <!-- 配置掃描器，將mybatis接口的實現加入到ioc容器中 -->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <!-- 掃描全部dao接口的實現，加入到ioc容器中 -->
        <property name="basePackage" value="com.atguigu.crud.dao"></property>
    </bean>
    
    <!-- 配置一個能夠執行批量的sqlSession -->
    <bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate">
        <constructor-arg name="sqlSessionFactory" ref="sqlSessionFactory"></constructor-arg>
        <constructor-arg name="executorType" value="BATCH"></constructor-arg>
    </bean>
    
    
    <!--======================= 事務控制的配置========================== -->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <!-- 控制住數據源 -->
        <property name="dataSource" ref="pooledDataSource"></property>
    </bean>
    <!-- 開啓基於註解的事務，使用xml形式配置事務（通常比較重要的使用配置式） -->
    <aop:config>
        <!-- 切入點表達式，哪些要切入 -->
        <aop:pointcut expression="execution(* com.atguigu.crud.service..*(..))" id="txPoint" />
        <!-- 配置事務加強  -->
        <aop:advisor advice-ref="txAdvice" pointcut-ref="txPoint"/>
    </aop:config>
    
    <!-- 配置事務加強，事務如何切入 -->
    <tx:advice id="txAdvice" transaction-manager="transactionManager">
        <tx:attributes>
            <!-- 全部方法都是事務方法 -->
            <tx:method name="*"/>
            <!-- 以get開始的全部方法 -->
            <tx:method name="get*" read-only="true"/>
        </tx:attributes>
    </tx:advice>
    
    
    
</beans>

View Code

6.建立dbconfig.propertiesweb

jdbc.jdbcUrl=jdbc:mysql://localhost:3306/ssm_crud
jdbc.driverClass=com.mysql.jdbc.Driver
jdbc.user=root
jdbc.password=123

View Code

2、在src/main/java下建立項目包（controller、service、dao、bean、test、utils）

3、經過mybatis generator逆向工程經過數據庫中的表生成對應的bean、dao、mapper

　　　　MBG使用方法

4、編寫：

package com.atguigu.crud.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.atguigu.crud.bean.Employee;
import com.atguigu.crud.bean.Msg;
import com.atguigu.crud.service.EmployeeService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
/**
 * 處理員工CRUD請求
 * @author Administrator
 *
 */
@Controller
public class EmployeeController {

    @Autowired
    EmployeeService employeeService;
    
    /**
     * @ResponseBody要正常工做,需導入jackson包
     * @ResponseBody能夠自動將返回的對象轉換爲json字符串
     */
    @RequestMapping("/emps")
    @ResponseBody
    public Msg    getEmpsWithJson(@RequestParam(value="pn",defaultValue="1") Integer pn){
        PageHelper.startPage(pn, 5);
        //startPage後面緊跟的這個查詢就是一個分頁查詢
        List<Employee> emps = employeeService.getAll();
        //使用pageInfo包裝查詢後的結果，只須要將pageInfo交給頁面就好了。
        //pageInfo裏面封裝了分頁的詳細信息，包括有咱們查詢出來的數據,傳入連續顯示的頁數5
        PageInfo page = new PageInfo(emps,5);
        
        return Msg.success().add("pageInfo", page);
        
    }
    
    /**
     * 查詢員工數據（分頁查詢）
     * @return
     * 
     * Integer pn表示傳入的所要查詢的哪一頁,若沒有指定查哪一頁，則爲默認值 1
     */
    //@RequestMapping("/emps")
    public String getEmps(@RequestParam(value="pn",defaultValue="1") Integer pn,
            Model model){
        //這不是一個分頁查詢；
        //List<Employee> emps = employeeService.getAll();
        //return "list";
        
        //使用PageHelper分頁插件
        //在查詢以前只須要調用，傳入頁碼，以及每頁的大小
        PageHelper.startPage(pn, 5);
        //startPage後面緊跟的這個查詢就是一個分頁查詢
        List<Employee> emps = employeeService.getAll();
        //使用pageInfo包裝查詢後的結果，只須要將pageInfo交給頁面就好了。
        //pageInfo裏面封裝了分頁的詳細信息，包括有咱們查詢出來的數據,傳入連續顯示的頁數5
        PageInfo page = new PageInfo(emps,5);
        //在Model裏面傳的數據都會帶給頁面
        model.addAttribute("pageInfo", page);
        
        return "list";
    }
}

CodeEmployeeController.java

package com.atguigu.crud.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.atguigu.crud.bean.Employee;
import com.atguigu.crud.dao.EmployeeMapper;

@Service
public class EmployeeService {

    @Autowired
    EmployeeMapper employeeMapper;
    
    /**
     * 查詢全部員工
     * @return
     */
    public List<Employee> getAll() {
        return employeeMapper.selectByExampleWithDept(null);
    }


}

EmployeeService.java

5、測試（模擬前端測試數據）

package com.atguigu.crud.test;

import java.util.UUID;

import org.apache.ibatis.session.SqlSession;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;

import com.atguigu.crud.bean.Department;
import com.atguigu.crud.bean.Employee;
import com.atguigu.crud.dao.DepartmentMapper;
import com.atguigu.crud.dao.EmployeeMapper;

/**
 * 測試dao層工做
 * @author Administrator
 *推薦Spring的項目就可使用spring的單元測試，能夠自動注入咱們須要的組件
 *    一、導入springTest模塊
 *    二、@ContextConfiguration指定spring配置文件的位置，幫咱們自動建立出ioc容器
 *    三、@RunWith這個是junit裏面的註解，咱們在運行單元測試的時候，指定咱們是用哪一個來運行，
 *        咱們使用的是spring的單元測試模塊，裏面的值爲SpringJUnit4ClassRunner.class（全部的test運行的時候是它來運行的）
 *    四、直接autowired要使用的組件便可
 */

@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration(locations={"classpath:applicationContext.xml"})
public class MapperTest {
    
    //直接從ioc容器中取出dao接口實現
    @Autowired
    DepartmentMapper departmentMapper;
    
    @Autowired
    EmployeeMapper employeeMapper;
    
    @Autowired
    SqlSession sqlsession;
    
    /**
     * 測試DepartmentMapper
     */
    @Test
    public void testCRUD(){
        
        /*//原生從spring容器中獲取實例
        //一、建立SpringIOC容器
        ApplicationContext ioc = new ClassPathXmlApplicationContext("applicationContext.xml");
        //二、從容器中獲取mapper
        DepartmentMapper bean = ioc.getBean(DepartmentMapper.class);
        */
        
        System.out.println(departmentMapper);
        
        //一、插入幾個部門
        //departmentMapper.insertSelective(new Department(null, "開發部"));
        //departmentMapper.insertSelective(new Department(null, "測試部"));
        
        //2.生成員工數據，測試員工插入
        //employeeMapper.insertSelective(new Employee(null, "Jerry", "M", "Jerry@atguigu.com", 1));
        
        //3.批量插入多個員工；批量，使用能夠執行批量操做的sqlsession
        EmployeeMapper mapper = sqlsession.getMapper(EmployeeMapper.class);
        for(int i = 0;i<1000;i++){
            String uid = UUID.randomUUID().toString().substring(0, 5) + i;
            mapper.insertSelective(new Employee(null, uid, "M", uid+"@atguigu.com", 1));
        }
        
        System.out.println("批量完成");
    }
}

MapperTest.java

package com.atguigu.crud.test;

import java.util.List;

import org.junit.Before;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.mock.web.MockHttpServletRequest;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
import org.springframework.test.context.web.WebAppConfiguration;
import org.springframework.test.web.servlet.MockMvc;
import org.springframework.test.web.servlet.MvcResult;
import org.springframework.test.web.servlet.request.MockMvcRequestBuilders;
import org.springframework.test.web.servlet.setup.MockMvcBuilders;
import org.springframework.web.context.WebApplicationContext;

import com.atguigu.crud.bean.Employee;
import com.github.pagehelper.PageInfo;

/**
 * 使用spring測試模塊提供的測試請求功能，測試crud請求的正確性
 * spring4測試的時候，須要servlet3.0的支持
 * @author Administrator
 *
 */
@RunWith(SpringJUnit4ClassRunner.class)
@WebAppConfiguration
@ContextConfiguration(locations={"classpath:applicationContext.xml","file:src/main/webapp/WEB-INF/dispatcherServlet-servlet.xml"})
public class MvcTest {
    //傳入Springmvc的ioc
    @Autowired
    WebApplicationContext context;
    
    //虛擬mvc請求，獲取處處理結果。
    MockMvc mockMvc;
    
    @Before
    public void initMockMvc(){
        mockMvc = MockMvcBuilders.webAppContextSetup(context).build();
    }
    
    //編寫測試分頁的方法
    @Test
    public void testPage() throws Exception{
        //模擬請求，拿到返回值
        MvcResult result = mockMvc.perform(MockMvcRequestBuilders.get("/emps").param("pn", "5")).
                andReturn();
    
        //請求成功之後，請求域中會有pageInfo，能夠取出pageInfo進行驗證
        MockHttpServletRequest request = result.getRequest();
        PageInfo pi = (PageInfo) request.getAttribute("pageInfo");
        
        System.out.println("當前頁碼"+pi.getPageNum());
        System.out.println("總頁碼"+pi.getPages());
        System.out.println("總記錄數"+pi.getTotal());
        System.out.println("在頁面中須要連續顯示的頁碼：");
        int[] nums = pi.getNavigatepageNums();
        for (int i : nums) {
            System.out.println(" "+i);
        }
        
        //獲取員工數據
        List<Employee> list = pi.getList();
        for (Employee employee : list) {
            System.out.println("ID:"+employee.getdId()+"===>Name：  "+employee.getEmpName());
        }
    }
}

MvcTest.java

6、編寫前端頁面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
   
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>員工頁面</title>
<%
    pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<script type="text/javascript"
    src="${APP_PATH }/static/js/jquery-1.12.4.min.js"></script>
<link
    href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
    rel="stylesheet">
<script
    src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

</head>
<body>
    <!-- 搭建顯示頁面 -->
    <div class="container">
        <!-- 標題 -->
        <div class="row">
            <div class="col-md-12">
                <h1>SSM-CRUD</h1>
            </div>
        </div> 
        <!-- 按鈕 -->
        <div class="row">
            <div class="col-md-4 col-md-offset-8">
                <button class="btn btn-primary">新增</button>
                <button class="btn btn-danger">刪除</button>
            </div>
        </div> 
        <!-- 顯示錶格數據 -->
        <div class="row">
            <div class="col-md-12">
                <table class="table table-hover" id="emps_table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>empName</th>
                            <th>gender</th>
                            <th>email</th>
                            <th>deptName</th>
                            <th>操做</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                    </tbody>
                </table>
            </div>
        </div> 
        
        <!-- 顯示分頁信息 -->
        <div class="row">
            <!-- 分頁文字信息 -->
            <div class="col-md-6" id = "page_info_area">
                
            </div>
            <!-- 分頁條信息 -->
            <div class="col-md-6" id = "page_nav_area">
                
            </div>
        </div> 
        
    </div>
    
    <script type="text/javascript">
        //一、頁面加載完成後，直接發送一個ajax請求，要到分頁 數據
        $(function(){
            //頁面加載完後，首先查詢第一頁
            to_page(1);
        });
        
        //查詢分頁的數據（抽取ajax查詢方法）
        function to_page(pn){
            $.ajax({
                url:"${APP_PATH}/emps",
                data:"pn="+pn,
                type:"GET",
                success:function(result){
                    //console.log(result);
                    //1.解析並顯示員工數據
                    build_emps_table(result);
                    //2.解析顯示分頁信息
                    build_page_info(result);
                    //3.解析顯示（構建）分頁條
                    build_page_nav(result);
                    
                }
            });
        }
        
        
        //解析顯示(構建)員工表格
        function build_emps_table(result){
            
            /***************
            查詢數據以前，必須清空table表
            */
            $("#emps_table tbody").empty();
            
            //取出員工數據
            var emps = result.extend.pageInfo.list;
            //遍歷員工數據
            $.each(emps,function(index,item){
                //alert(item.empName);
                //取出empId(構建單元格)
                var empIdTd = $("<td></td>").append(item.empId);
                var empNameTd = $("<td></td>").append(item.empName);
                var genderTd = $("<td></td>").append(item.gender=='M'?"男":"女");
                var emailTd = $("<td></td>").append(item.email);
                var deptNameTd = $("<td></td>").append(item.department.deptName);
                /*
                <button class="btn btn-primary btn-xs">
                                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                                    編輯
                                </button>
                */
                var editBtn = $("<button></button>").addClass("btn btn-primary btn-xs")
                                .append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
                                .append("編輯");
                var delBtn =  $("<button></button>").addClass("btn btn-danger btn-xs")
                                .append($("<span></span>").addClass("glyphicon glyphicon-trash"))
                                .append("刪除");
                var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
                
                $("<tr></tr>").append(empIdTd)
                .append(empNameTd)
                .append(genderTd)
                .append(emailTd)
                .append(deptNameTd)
                .append(btnTd)
                .appendTo("#emps_table tbody");
            });
        }
        
        //解析顯示分頁信息
        function build_page_info(result){
            /***************
            查詢數據以前，必須清空分頁信息
            */
            $("#page_info_area").empty();
            
            $("#page_info_area").append("當前"+
                    result.extend.pageInfo.pageNum+"頁，總"+
                    result.extend.pageInfo.pages+"頁，總"+
                    result.extend.pageInfo.total+"條記錄。")
        }
        
        
        //解析顯示（構建）分頁條，點擊分頁條要能去下一頁。。。
        function build_page_nav(result){
            /***************
            查詢數據以前，必須清空分頁條信息
            */
            $("#page_nav_area").empty();
            
            //page_info_area
            var ul= $("<ul></ul>").addClass("pagination");
            
            //構建元素
            var firstPageLi = $("<li></li>").append($("<a></a>").append("首頁").attr("href","#"));
            var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
            if(result.extend.pageInfo.hasPreviousPage==false){
                firstPageLi.addClass("disabled");
                prePageLi.addClass("disabled");
            }else{
                //爲元素添加點擊翻頁事件
                firstPageLi.click(function(){
                    to_page(1);
                });
                prePageLi.click(function(){
                    to_page(result.extend.pageInfo.pageNum-1);
                });
            }
            
            
            
            var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
            var lastPageLi = $("<li></li>").append($("<a></a>").append("末頁").attr("href","#"));
            if(result.extend.pageInfo.hasNextPage==false){
                nextPageLi.addClass("disabled");
                lastPageLi.addClass("disabled");
            }else{
                //爲元素添加點擊翻頁事件
                nextPageLi.click(function(){
                    to_page(result.extend.pageInfo.pageNum + 1);
                });
                lastPageLi.click(function(){
                    to_page(result.extend.pageInfo.pages);
                });
            }
            
            
            //添加首頁和前一頁的提示
            ul.append(firstPageLi).append(prePageLi);
            
            //遍歷頁碼號 1.2.3.
            //將頁碼號添加到ul中
            $.each(result.extend.pageInfo.navigatepageNums,function(index,item){
                var numLi= $("<li></li>").append($("<a></a>").append(item));    
                if(result.extend.pageInfo.pageNum == item){
                    numLi.addClass("active");
                }
                //添加點擊事件，經過ajax查詢選擇的頁面
                numLi.click(function(){
                    to_page(item);
                });
                ul.append(numLi);
                
            });
            
            //添加下一頁和末頁的提示
            ul.append(nextPageLi).append(lastPageLi);
            //將ul添加到nav
            var navEle = $("<nav></nav>").append(ul);
            
            navEle.appendTo("#page_nav_area");
        }
    </script>
</body>
</html>

index.jsp

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。