SSM项目layui分页实例

最近学了layui，发现其中的分页挺有意思的，所以整理了一下，一遍自己随时查看。（官方文档上已经很详细了，当中有不足的地方欢迎大家指出）

关于前台的js文件，css样式，js样式，大家可以到官网下

本人使用的是oracle数据库

我先贴出前台界面

spring和spring-mvc,mybatis大家需要的jar包，有需要的可以联系我。

这里使用到了json传数据，所以需要json的jar包

最关键的代码就要来了

1、前台jsp界面

 <%@ page language="java" contentType="text/html; charset=UTF-8"

     pageEncoding="UTF-8"%>

 <!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>Insert title here</title>

 <link href="${pageContext.request.contextPath }/js/layui/css/layui.css"

     charset="utf-8" rel="stylesheet" />

 <script src="${pageContext.request.contextPath }/js/layui/layui.js"

     charset="utf-8"></script>

 <script src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"

     charset="utf-8"></script>

 <script type="text/javascript">

     layui.use([ 'table' ], function() {

         var table = layui.table;

     });

 </script>

 </head>

 <body class="layui-layout-body">

     <table class="layui-table"

         lay-data="{height:'full', url:'findallEmp.do',page:true,limit:5,limits:[3,5,10,15]}"

         lay-filter="test1">

         <thead>

             <tr>

                 <th lay-data="{field:'empno',edit:'text',sort:true,width:'50px'}">编号</th>

                 <th lay-data="{field:'ename',edit:'text',width:'50px'}">雇员</th>

                 <th lay-data="{field:'job',edit:'text',width:'50px'}">工作</th>

                 <th lay-data="{field:'hiredate',edit:'text',width:'100px'}">入职日期</th>

                 <th lay-data="{field:'sal',edit:'text',width:'50px'}">工资</th>

             </tr>

         </thead>

     </table>

 </body>

 </html>

2、界面跳转到.do

 package com.llh.controller;

 import java.util.List;

 import javax.annotation.Resource;

 import org.springframework.context.annotation.Scope;

 import org.springframework.stereotype.Controller;

 import org.springframework.web.bind.annotation.RequestMapping;

 import org.springframework.web.bind.annotation.ResponseBody;

 import com.llh.entity.EmpInfo;

 import com.llh.service.EmpService;

 import net.sf.json.JSONArray;

 @Controller

 @Scope("prototype")

 public class EmpController {

     @Resource

     private EmpService empService;

     @RequestMapping(value="findallEmp",produces="text/html;charset=utf-8")

     public @ResponseBody String findallEmp( int page, int limit){

         int before = limit * (page - 1) + 1;

         int after = page * limit;

         List<EmpInfo> eilist = empService.findAllPage(before, after);

         int count = empService.count();

         JSONArray json = JSONArray.fromObject(eilist);

         String js = json.toString();

         String jso = "{\"code\":0,\"msg\":\"\",\"count\":"+count+",\"data\":"+js+"}";//转为layui需要的json格式

         return jso;

     }

 }

3、自动装配的service类

 package com.llh.service;

 import java.util.List;

 import javax.annotation.Resource;

 import org.apache.ibatis.annotations.Param;

 import org.springframework.stereotype.Service;

 import org.springframework.transaction.annotation.Transactional;

 import com.llh.dao.EmpDao;

 import com.llh.entity.EmpInfo;

 @Service

 @Transactional

 public class EmpService implements EmpDao{

     @Resource

     private EmpDao empDao;

     /**

      * 查询数据

      */

     public List<EmpInfo> findAllPage(@Param("before") int before,@Param("after") int after){

         return empDao.findAllPage(before, after);

     }

     /**

      * 查询条数

      */

     public int count(){

         return empDao.count();

     }

 }

4、实现dao接口

 package com.llh.dao;

 import java.util.List;

 import org.apache.ibatis.annotations.Param;

 import com.llh.entity.EmpInfo;

 public interface EmpDao {

     public List<EmpInfo> findAllPage(@Param("before") int before,@Param("after") int after);

     public int count();

 }

5、mapper.xml监控dao

 <?xml version="1.0" encoding="UTF-8"?>

 <!DOCTYPE mapper

 PUBLIC "-//mybatis.org//DTD mapper 3.0//EN"

 "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

 <mapper namespace="com.llh.dao.EmpDao">

     <select id="findAllPage" resultType="EmpInfo">

         select * from (select row_number() over(order by empno) idx,e.* from emp e) s where idx between #{before} and #{after}

     </select>

     <select id="count" resultType="int">

         select count(*) from emp

     </select>

 </mapper>

6、至于spring-mybatis.xml也贴出来一下，供有需要的人来看

 <?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:tx="http://www.springframework.org/schema/tx"

 xsi:schemaLocation="http://www.springframework.org/schema/beans

 http://www.springframework.org/schema/beans/spring-beans-4.3.xsd

 http://www.springframework.org/schema/context

 http://www.springframework.org/schema/context/spring-context-4.3.xsd

 http://www.springframework.org/schema/tx

 http://www.springframework.org/schema/tx/spring-tx-4.3.xsd

 "

 >

 <!-- 自动扫描包 -->

 <context:component-scan base-package="com.llh"></context:component-scan>

 <!-- 数据源 -->

 <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource">

     <property name="driverClassName" value="oracle.jdbc.driver.OracleDriver"></property>

     <property name="url" value="jdbc:oracle:thin:@localhost:1521:orcl"></property>

     <property name="username" value="scott"></property>

     <property name="password" value="tiger"></property>

 </bean>

 <!-- mybatis配置 -->

 <bean class="org.mybatis.spring.SqlSessionFactoryBean">

     <property name="dataSource" ref="dataSource"></property>

     <property name="typeAliasesPackage" value="com.llh.entity"></property>

     <property name="mapperLocations" value="classpath:com/llh/dao/*.xml"></property>

 </bean>

 <!-- 映射配置器 -->

 <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">

     <property name="basePackage" value="com.llh.dao"></property>

 </bean>

 <!-- 事务管理 -->

 <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">

     <property name="dataSource" ref="dataSource"></property>

 </bean>

 <!-- 开启事务注解 -->

 <tx:annotation-driven/>

 </beans>

7、springmvc.xml的配置

 <?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" xmlns:tx="http://www.springframework.org/schema/tx"

     xsi:schemaLocation="http://www.springframework.org/schema/beans

 http://www.springframework.org/schema/beans/spring-beans-4.3.xsd

 http://www.springframework.org/schema/context

 http://www.springframework.org/schema/context/spring-context-4.3.xsd

 http://www.springframework.org/schema/mvc

 http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd

 http://www.springframework.org/schema/tx

 http://www.springframework.org/schema/tx/spring-tx-4.3.xsd

 ">

     <context:component-scan base-package="com.llh"></context:component-scan>

     <mvc:annotation-driven />

     <mvc:default-servlet-handler />

     <bean id="internalResourceViewResolver"

         class="org.springframework.web.servlet.view.InternalResourceViewResolver">

         <property name="prefix" value="/" />

         <property name="suffix" value=".jsp" />

     </bean>

 <!-- 上传下载 -->

      <bean id="multipartResolver"

         class="org.springframework.web.multipart.commons.CommonsMultipartResolver">

         <property name="defaultEncoding" value="UTF-8" />

         <property name="maxUploadSize" value="-1" />

     </bean> 

 </beans>

8、web.xml实现字符编码，过滤器，spring-mybatis的监听，springmvc的监听

 <?xml version="1.0" encoding="UTF-8"?>

 <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">

   <display-name>PageTestDemo</display-name>

   <welcome-file-list>

     <welcome-file>index.jsp</welcome-file>

   </welcome-file-list>

    <!-- 加载spring的配置文件 -->

   <context-param>

       <param-name>contextConfigLocation</param-name>

       <param-value>classpath:spring-mybatis.xml</param-value>

   </context-param>

   <!-- 配置spring的监听 -->

   <listener>

       <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>

   </listener>

   <!-- 配置springmvc -->

   <servlet>

       <servlet-name>dispatcherServlet</servlet-name>

       <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

     <init-param>

           <param-name>contextConfigLocation</param-name>

           <param-value>classpath:springmvc.xml</param-value>

       </init-param>

   </servlet>

   <servlet-mapping>

       <servlet-name>dispatcherServlet</servlet-name>

       <url-pattern>*.do</url-pattern>

   </servlet-mapping>

   <!-- 过滤器 -->

   <filter>

       <filter-name>characterEncoding</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>

   </filter>

   <filter-mapping>

       <filter-name>characterEncoding</filter-name>

       <url-pattern>/*</url-pattern>

   </filter-mapping>

 </web-app>

------------------------------至此，leyui最简单的分页查询数据就可以了。

过后将会更新layui的上传，动态下载。

以及bootstrap的数据表格插件

SSM项目layui分页实例的更多相关文章

SSM项目手动分页详解
环境:idea+mysql 首先,既然是mysql,那肯定会用到limit,用这个分页的确很方便. 第一步,编写sql语句 <select id="selectImages" ...
ssm框架layui分页下标中文乱码，或者请选择中文乱码，提示乱码等
开始我以为是layui的bug 后来发现不是用过的方法: 1.修改layui的js文件将其中的中文变为encdoe 代码比如laypage.js下的中文 2.添加web.xml的过滤器该代码 ...
Struts+jdbc+分页实例
根据项目里分页实例,带有注解. package org.tarena.netctoss.dao.impl; import java.sql.Connection; import java.sql.Pr ...
最易懂的layui分页
该篇文章是在layui前端框架之分页基础上简洁化和详细化. 首先该示例采用的是Spring+MyBatis Plus+SpringMVC(常规的SSM框架),持久层换成MyBatis也行. 至于lay ...
RDIFramework.NET 中多表关联查询分页实例
RDIFramework.NET 中多表关联查询分页实例 RDIFramework.NET,基于.NET的快速信息化系统开发.整合框架,给用户和开发者最佳的.Net框架部署方案.该框架以SOA范式作为 ...
Maven 搭建 SSM 项目（oracle）
简单谈一下maven搭建 ssm 项目 (使用数据库oracle,比 mysql 难,所以这里谈一下) 在创建maven 的web项目时,常常会缺了main/java , main/test 两个文件 ...
记一次SSM项目小结（一）
记一次SSM项目小结(一) ssm框架环境配置服务器配置解决方法拦截器重定向到localhost nginx和tomcat中session失效 mybatis的xml文件不生效数据库用户创 ...
SSM 项目从搭建爬坑到 CentOS 服务器部署 - 速查手册
SSM 项目从搭建爬坑到 CentOS 服务器部署 - 速查手册提示: (1)CSDN 博客左边有操作工具条上有文章目录 (2)SSM 指 Spring,Spring MVC,MyBatis Mav ...
SSM 框架快速整合实例--学生查询
一.快速准备 SSM 框架即 Spring 框架.SpringMVC 框架.MyBatis 框架,关于这几个框架的基础和入门程序,我前面已经写过几篇文章作为基础和入门介绍了.对于这 3 个框架还不熟悉 ...

随机推荐

【工具相关】web-HTML/CSS/JS Prettify的使用
一,打开Sublime Text,代码如下面所示. 二,鼠标右键--->HTML/CSS/JS Prettify--->Prettify Code.代码如图所示,明显的代码变得整齐了.
Sublime Text3 安装 markdownediting插件报错 Error loading syntax file "Packages/Markdown/Markdown.tmLanguage":
问题: Error loading syntax file "Packages/Markdown/Markdown.sublime-syntax": 解决方法: ./Data/Lo ...
Android视屏播放兼容性问题分享
最近产品提了一个紧急需求:webview加载的URL,需要支持视频播放. 为了快速完成需求,功能实现上直接使用系统自带播放器播放视频.由于是自带播放器,需要进行兼容性测试,过程发现了不少问题,这里分享 ...
Spring Data JPA方法定义规范
Spring Data Jpa方法定义的规则: (1)简单条件查询简单条件查询:查询某一个实体类或者集合. 按照Spring Data的规范的规定,查询方法以find | read | get开头, ...
sql语句进阶教程
转载自:http://blog.csdn.net/u011001084/article/details/51318434 最近从图书馆借了本介绍SQL的书,打算复习一下基本语法,记录一下笔记,整理一下 ...
sql 查询表格中多列重复的数据并显示该表的其他列
我们一般情况下通过分组函数group by来查询重复的列 ) R 但是查询出的结果不能显示该表的其他列想要查询一张表中有多个列重复的数据且也要显示该表的其他列 SELECT M.* FROM [db ...
shell中>/dev/null 2>&1
本文转自http://www.kissyu.org/ 背景我们经常能在shell脚本中发现>/dev/null 2>&1这样的语句.以前的我并没有去深入地理解这段命令的作用,照搬 ...
pyenv离线安装python各版本
1.问题描述: 可能是国内的网络原因,在线用pyenv安装python老是定住没反应 [root@zabbix ~]# pyenv install Downloading Python-.tar.xz ...
Linux 小知识翻译 - 「Linux」和「发行版」之间的关系
「Linux」本来指的仅仅是内核.5年之前大多都是这么认为的,但是最近不这么说了. 最近一般都说「Linux」是个 OS,这里的OS,不仅仅是内核,而是指电脑的整体环境(除了内核,还包括一些外围的软件 ...
vue的组件详解
什么是组件组件(Component)是 Vue.js 最强大的功能之一.(好比电脑中的每一个元件(键盘,鼠标,CPU),它是一个具有独立的逻辑和功能或界面,同时又能根据规定的接口规则进行互相融合,变 ...

SSM项目layui分页实例

SSM项目layui分页实例的更多相关文章

随机推荐

热门专题