最近学了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分页实例的更多相关文章

  1. SSM项目手动分页详解

    环境:idea+mysql 首先,既然是mysql,那肯定会用到limit,用这个分页的确很方便. 第一步,编写sql语句 <select id="selectImages" ...

  2. ssm框架layui分页下标中文乱码,或者请选择中文乱码,提示乱码等

    开始我以为是layui的bug 后来发现不是 用过的方法: 1.修改layui的js文件  将其中的中文变为encdoe 代码 比如laypage.js下的中文 2.添加web.xml的过滤器 该代码 ...

  3. Struts+jdbc+分页 实例

    根据项目里分页实例,带有注解. package org.tarena.netctoss.dao.impl; import java.sql.Connection; import java.sql.Pr ...

  4. 最易懂的layui分页

    该篇文章是在layui前端框架之分页基础上简洁化和详细化. 首先该示例采用的是Spring+MyBatis Plus+SpringMVC(常规的SSM框架),持久层换成MyBatis也行. 至于lay ...

  5. RDIFramework.NET 中多表关联查询分页实例

    RDIFramework.NET 中多表关联查询分页实例 RDIFramework.NET,基于.NET的快速信息化系统开发.整合框架,给用户和开发者最佳的.Net框架部署方案.该框架以SOA范式作为 ...

  6. Maven 搭建 SSM 项目 (oracle)

    简单谈一下maven搭建 ssm 项目 (使用数据库oracle,比 mysql 难,所以这里谈一下) 在创建maven 的web项目时,常常会缺了main/java , main/test 两个文件 ...

  7. 记一次SSM项目小结(一)

    记一次SSM项目小结(一) ssm框架 环境配置 服务器配置 解决方法  拦截器重定向到localhost nginx和tomcat中session失效 mybatis的xml文件不生效 数据库用户创 ...

  8. SSM 项目从搭建爬坑到 CentOS 服务器部署 - 速查手册

    SSM 项目从搭建爬坑到 CentOS 服务器部署 - 速查手册 提示: (1)CSDN 博客左边有操作工具条上有文章目录 (2)SSM 指 Spring,Spring MVC,MyBatis Mav ...

  9. SSM 框架快速整合实例--学生查询

    一.快速准备 SSM 框架即 Spring 框架.SpringMVC 框架.MyBatis 框架,关于这几个框架的基础和入门程序,我前面已经写过几篇文章作为基础和入门介绍了.对于这 3 个框架还不熟悉 ...

随机推荐

  1. React中props

    今天让我们开启新的篇章好吧,来搞一搞React,以下所有操作都是我个人的一些理解,如果有错吴还请指出,想要看更全的可以去React官网可能一下子好吧 昨天按摩没到位,导致今天身体不太行,撸码千万别苦了 ...

  2. android.support不统一的问题

    今天supprt28遇到的问题,由于28还是预览版,还存在一些bug 都是因为如果程序内出现不同的,support或者其他外部引用库的多个版本,Gradle在进行合并的时候会使用本地持有的,最高版本的 ...

  3. 机器学习实战(Machine Learning in Action)学习笔记————10.奇异值分解(SVD)原理、基于协同过滤的推荐引擎、数据降维

    关键字:SVD.奇异值分解.降维.基于协同过滤的推荐引擎作者:米仓山下时间:2018-11-3机器学习实战(Machine Learning in Action,@author: Peter Harr ...

  4. K邻近分类算法

    # -*- coding: utf-8 -*- """ Created on Thu Jun 28 17:16:19 2018 @author: zhen "& ...

  5. Win10安装Redis

    Redis安装 下载地址:https://github.com/MicrosoftArchive/redis/releases 下载对应的版本:这里下载Redis-x64-3.2.100 解压文件 进 ...

  6. syslog与rsyslog的了解与比较

    syslog日志收集器: syslog是早期的centos版本的日志收集器,应该是centos5之前的版本. syslog的两个重要的守护进程: 1.syslogd:system.主要以收集系统服务为 ...

  7. javascript闭包—围观大神如何解释闭包

    闭包的概念已经出来很长时间了,网上资源一大把,本着拿来主意的方法来看看. 这一篇文章 学习Javascript闭包(Closure) 是大神阮一峰的博文,作者循序渐进,讲的很透彻.下面一一剖析. 1. ...

  8. 配置私有SSH

    1.cd ~/.ssh进入ssh文件夹. 2.ls,查看文件夹里面的内容 3.ssh-keygen -t rsa -C "zhanggui@marchsoft.cn” 一路回车 4.cd ~ ...

  9. redis面试必问

    1.项目中缓存是如何使用的?为什么要用缓存?缓存使用不当会造成什么后果? 面试题剖析 为什么要用缓存? 用缓存,主要有两个用途:高性能.高并发. 高性能 假设这么个场景,你有个操作,一个请求过来,吭哧 ...

  10. Html body的滚动条禁止与启用

    在写一个在页面中,经验证用户没有登录或session失效时候弹出登录框禁止页面滚动用到今天搞了一个功能,上下左右居中,模仿QQ空间里的样式,把横向和纵向滚动条禁止掉代码如下:<script ty ...