SSM項目layui分頁實例
阿新 • • 發佈：2018-01-10
監聽 display 編號 out pat 圖片 not local pro
最近學了layui，發現其中的分頁挺有意思的，所以整理了一下，一遍自己隨時查看。（官方文檔上已經很詳細了，當中有不足的地方歡迎大家指出）
關於前臺的js文件，css樣式，js樣式，大家可以到官網下
本人使用的是oracle數據庫
我先貼出前臺界面
spring和spring-mvc,mybatis大家需要的jar包，有需要的可以聯系我。
這裏使用到了json傳數據，所以需要json的jar包
最關鍵的代碼就要來了
1、前臺jsp界面
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 <link href="${pageContext.request.contextPath }/js/layui/css/layui.css" 9charset="utf-8" rel="stylesheet" /> 10 <script src="${pageContext.request.contextPath }/js/layui/layui.js" 11 charset="utf-8"></script> 12 <script src="${pageContext.request.contextPath }/js/jquery-1.8.3.js" 13 charset="utf-8"></script> 14 <script type="text/javascript"> 15layui.use([ ‘table‘ ], function() { 16 var table = layui.table; 17 }); 18 </script> 19 </head> 20 <body class="layui-layout-body"> 21 <table class="layui-table" 22 lay-data="{height:‘full‘, url:‘findallEmp.do‘,page:true,limit:5,limits:[3,5,10,15]}" 23 lay-filter="test1"> 24 <thead> 25 <tr> 26 <th lay-data="{field:‘empno‘,edit:‘text‘,sort:true,width:‘50px‘}">編號</th> 27 <th lay-data="{field:‘ename‘,edit:‘text‘,width:‘50px‘}">雇員</th> 28 <th lay-data="{field:‘job‘,edit:‘text‘,width:‘50px‘}">工作</th> 29 <th lay-data="{field:‘hiredate‘,edit:‘text‘,width:‘100px‘}">入職日期</th> 30 <th lay-data="{field:‘sal‘,edit:‘text‘,width:‘50px‘}">工資</th> 31 </tr> 32 </thead> 33 </table> 34 </body> 35 </html>
2、界面跳轉到.do
1 package com.llh.controller; 2 3 import java.util.List; 4 5 import javax.annotation.Resource; 6 7 import org.springframework.context.annotation.Scope; 8 import org.springframework.stereotype.Controller; 9 import org.springframework.web.bind.annotation.RequestMapping; 10 import org.springframework.web.bind.annotation.ResponseBody; 11 12 import com.llh.entity.EmpInfo; 13 import com.llh.service.EmpService; 14 15 import net.sf.json.JSONArray; 16 17 18 @Controller 19 @Scope("prototype") 20 public class EmpController { 21 22 @Resource 23 private EmpService empService; 24 25 @RequestMapping(value="findallEmp",produces="text/html;charset=utf-8") 26 public @ResponseBody String findallEmp( int page, int limit){ 27 int before = limit * (page - 1) + 1; 28 int after = page * limit; 29 List<EmpInfo> eilist = empService.findAllPage(before, after); 30 int count = empService.count(); 31 JSONArray json = JSONArray.fromObject(eilist); 32 String js = json.toString(); 33 String jso = "{\"code\":0,\"msg\":\"\",\"count\":"+count+",\"data\":"+js+"}";//轉為layui需要的json格式 34 return jso; 35 } 36 }
3、自動裝配的service類
1 package com.llh.service; 2 3 import java.util.List; 4 5 import javax.annotation.Resource; 6 7 import org.apache.ibatis.annotations.Param; 8 import org.springframework.stereotype.Service; 9 import org.springframework.transaction.annotation.Transactional; 10 11 import com.llh.dao.EmpDao; 12 import com.llh.entity.EmpInfo; 13 @Service 14 @Transactional 15 public class EmpService implements EmpDao{ 16 17 @Resource 18 private EmpDao empDao; 19 20 /** 21 * 查詢數據 22 */ 23 public List<EmpInfo> findAllPage(@Param("before") int before,@Param("after") int after){ 24 return empDao.findAllPage(before, after); 25 } 26 /** 27 * 查詢條數 28 */ 29 public int count(){ 30 return empDao.count(); 31 } 32 33 }
4、實現dao接口
1 package com.llh.dao; 2 3 import java.util.List; 4 5 import org.apache.ibatis.annotations.Param; 6 7 import com.llh.entity.EmpInfo; 8 9 public interface EmpDao { 10 11 public List<EmpInfo> findAllPage(@Param("before") int before,@Param("after") int after); 12 13 public int count(); 14 }
5、mapper.xml監控dao
1 <?xml version="1.0" encoding="UTF-8"?> 2 <!DOCTYPE mapper 3 PUBLIC "-//mybatis.org//DTD mapper 3.0//EN" 4 "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> 5 <mapper namespace="com.llh.dao.EmpDao"> 6 <select id="findAllPage" resultType="EmpInfo"> 7 select * from (select row_number() over(order by empno) idx,e.* from emp e) s where idx between #{before} and #{after} 8 </select> 9 <select id="count" resultType="int"> 10 select count(*) from emp 11 </select> 12 </mapper>
6、至於spring-mybatis.xml也貼出來一下，供有需要的人來看
1 <?xml version="1.0" encoding="UTF-8"?> 2 <beans 3 xmlns="http://www.springframework.org/schema/beans" 4 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 5 xmlns:context="http://www.springframework.org/schema/context" 6 xmlns:tx="http://www.springframework.org/schema/tx" 7 xsi:schemaLocation="http://www.springframework.org/schema/beans 8 http://www.springframework.org/schema/beans/spring-beans-4.3.xsd 9 http://www.springframework.org/schema/context 10 http://www.springframework.org/schema/context/spring-context-4.3.xsd 11 http://www.springframework.org/schema/tx 12 http://www.springframework.org/schema/tx/spring-tx-4.3.xsd 13 " 14 > 15 <!-- 自動掃描包 --> 16 <context:component-scan base-package="com.llh"></context:component-scan> 17 18 <!-- 數據源 --> 19 <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource"> 20 <property name="driverClassName" value="oracle.jdbc.driver.OracleDriver"></property> 21 <property name="url" value="jdbc:oracle:thin:@localhost:1521:orcl"></property> 22 <property name="username" value="scott"></property> 23 <property name="password" value="tiger"></property> 24 </bean> 25 26 <!-- mybatis配置 --> 27 <bean class="org.mybatis.spring.SqlSessionFactoryBean"> 28 <property name="dataSource" ref="dataSource"></property> 29 <property name="typeAliasesPackage" value="com.llh.entity"></property> 30 <property name="mapperLocations" value="classpath:com/llh/dao/*.xml"></property> 31 </bean> 32 33 <!-- 映射配置器 --> 34 <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> 35 <property name="basePackage" value="com.llh.dao"></property> 36 </bean> 37 38 <!-- 事務管理 --> 39 <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"> 40 <property name="dataSource" ref="dataSource"></property> 41 </bean> 42 43 <!-- 開啟事務註解 --> 44 <tx:annotation-driven/> 45 46 47 </beans>
7、springmvc.xml的配置
1 <?xml version="1.0" encoding="UTF-8"?> 2 <beans xmlns="http://www.springframework.org/schema/beans" 3 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" 4 xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:tx="http://www.springframework.org/schema/tx" 5 xsi:schemaLocation="http://www.springframework.org/schema/beans 6 http://www.springframework.org/schema/beans/spring-beans-4.3.xsd 7 http://www.springframework.org/schema/context 8 http://www.springframework.org/schema/context/spring-context-4.3.xsd 9 http://www.springframework.org/schema/mvc 10 http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd 11 http://www.springframework.org/schema/tx 12 http://www.springframework.org/schema/tx/spring-tx-4.3.xsd 13 "> 14 <context:component-scan base-package="com.llh"></context:component-scan> 15 <mvc:annotation-driven /> 16 <mvc:default-servlet-handler /> 17 18 19 20 <bean id="internalResourceViewResolver" 21 class="org.springframework.web.servlet.view.InternalResourceViewResolver"> 22 <property name="prefix" value="/" /> 23 <property name="suffix" value=".jsp" /> 24 </bean> 25 <!-- 上傳下載 --> 26 <bean id="multipartResolver" 27 class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> 28 <property name="defaultEncoding" value="UTF-8" /> 29 <property name="maxUploadSize" value="-1" /> 30 </bean> 31 32 33 34 35 </beans>
8、web.xml實現字符編碼，過濾器，spring-mybatis的監聽，springmvc的監聽
1 <?xml version="1.0" encoding="UTF-8"?> 2 <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1"> 3 <display-name>PageTestDemo</display-name> 4 <welcome-file-list> 5 <welcome-file>index.jsp</welcome-file> 6 </welcome-file-list> 7 <!-- 加載spring的配置文件 --> 8 <context-param> 9 <param-name>contextConfigLocation</param-name> 10 <param-value>classpath:spring-mybatis.xml</param-value> 11 </context-param> 12 13 <!-- 配置spring的監聽 --> 14 <listener> 15 <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> 16 </listener> 17 18 <!-- 配置springmvc --> 19 <servlet> 20 <servlet-name>dispatcherServlet</servlet-name> 21 <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> 22 <init-param> 23 <param-name>contextConfigLocation</param-name> 24 <param-value>classpath:springmvc.xml</param-value> 25 </init-param> 26 </servlet> 27 <servlet-mapping> 28 <servlet-name>dispatcherServlet</servlet-name> 29 <url-pattern>*.do</url-pattern> 30 </servlet-mapping> 31 32 <!-- 過濾器 --> 33 <filter> 34 <filter-name>characterEncoding</filter-name> 35 <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class> 36 <init-param> 37 <param-name>encoding</param-name> 38 <param-value>UTF-8</param-value> 39 </init-param> 40 </filter> 41 <filter-mapping> 42 <filter-name>characterEncoding</filter-name> 43 <url-pattern>/*</url-pattern> 44 </filter-mapping> 45 46 47 </web-app>
------------------------------至此，leyui最簡單的分頁查詢數據就可以了。
過後將會更新layui的上傳，動態下載。
以及bootstrap的數據表格插件
SSM項目layui分頁實例