SSM项目layui分页实例

最近学了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"
 9     charset="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">
15     layui.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的数据表格插件

posted @ 2018-01-10 12:21 念念不忘、阅读(12630) 评论(5) 编辑收藏举报

刷新页面返回顶部

念念不忘

非常欢迎，GitHub地址：https://lviter.github.io/professional/

SSM项目layui分页实例

公告