Layui_1.0.9_分页实例_Java
一、实体
package com.ebd.application.modules.taskManage.pojo;
import com.ebd.application.common.Base.BaseBean;
public class Task extends BaseBean{
private String tName; //任务名称
private String tStatus; //任务状态(0:未执行;1:执行成功;2执行失败)
private String tSchedule; //任务进度
private String tDesc; //任务简述
private String tDatasource;
public String gettName() {
return tName;
}
public void settName(String tName) {
this.tName = tName;
}
public String gettStatus() {
return tStatus;
}
public void settStatus(String tStatus) {
this.tStatus = tStatus;
}
public String gettSchedule() {
return tSchedule;
}
public void settSchedule(String tSchedule) {
this.tSchedule = tSchedule;
}
public String gettDesc() {
return tDesc;
}
public void settDesc(String tDesc) {
this.tDesc = tDesc;
}
public String gettDatasource() {
return tDatasource;
}
public void settDatasource(String tDatasource) {
this.tDatasource = tDatasource;
}
}
二、前端页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!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">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<%
String path = request.getContextPath();
String rootPath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ "/";
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path;
request.setAttribute("basePath", basePath);
request.setAttribute("rootPath", rootPath);
pageContext.setAttribute("newLineChar", "\n");
%>
<link rel="stylesheet" href="${basePath}/static/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all" />
<link rel="stylesheet" href="${basePath}/static/css/tasks.css" media="all" />
</head>
<body class="childrenBody">
<blockquote class="layui-elem-quote tasks_search layui-form">
<input id="checkids" type="hidden">
<div class="layui-inline">
<div class="layui-input-inline">
<input type="text" placeholder="请输入关键字" class="layui-input search_input">
</div>
<div class="layui-input-inline">
<select lay-verify="required" class="search_select">
<option value="">请选择任务状态</option>
<option value="0">未执行</option>
<option value="1">执行成功</option>
<option value="2">执行失败</option>
</select>
</div>
<a class="layui-btn search_btn" id="search">查询</a>
</div>
<div class="layui-inline">
<a class="layui-btn layui-btn-normal tasksAdd_btn" style="background-color:#5FB878">添加任务</a>
</div>
<div class="layui-inline">
<a class="layui-btn tasksEdit_btn">编辑任务</a>
</div>
<div class="layui-inline">
<a class="layui-btn layui-btn-warm tasksDel_btn">选择删除</a>
</div>
<div class="layui-inline">
<a class="layui-btn layui-btn-danger tasksBatchDel_btn">批量删除</a>
</div>
</blockquote>
<div class="layui-form tasks_list">
<table class="layui-table">
<colgroup>
<col width="50">
<col width="10%">
<col>
<col width="7%">
<col width="25%">
<col width="8%">
<col width="15%">
<col width="15%">
</colgroup>
<thead>
<tr>
<th><input type="checkbox" lay-skin="primary" lay-filter="allChoose" id="allChoose"></th>
<th>名称</th>
<th>简述</th>
<th>状态</th>
<th>进度</th>
<th>创建者</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</thead>
<tbody class="tasks_content" ></tbody>
</table>
</div>
<div id="page"></div>
<script type="text/javascript" src="${basePath}/static/js/jquery.js"></script>
<script type="text/javascript" src="${basePath}/static/layui/layui.js"></script>
<script type="text/javascript">
$(function(){
//初始化列表及分页
submit();
//点击查询时触发
$("#search").click(function(){
//当点击搜索的时候，起始搜索值为0-10,且当前页回到第一页
startPage = 0;
currentPage = 1;
submit();
})
}); //分页参数设置 这些全局变量关系到分页的功能
var startPage = 0;
var limitNum = 10;
var currentPage = 1;
var totalPage = 0;
//ajax请求后台数据
function submit(){
var selectName = $(".search_input").val()
var selectStatus = $(".search_select").val()
$.ajax({
type:"post",
async:false,
url:"${basePath}/task/taskListByPage.htm",
data:{start:startPage, limit:limitNum,selectName:selectName,selectStatus:selectStatus},
success:function(data,status){
data=eval("("+data+")"); //转为对象
startPage = data.currentIndex;//当前页数(后台返回)
totalPage = data.totalPage;//总页数(后台返回)
toPage(data.dataList);
}
});
} //看看参数有的是否为空(data:后台数据)
function toPage(data){
layui.use(['form', 'layer', 'layedit', 'laydate', 'laypage', 'element'], function() {
var form = layui.form(),
layer = layui.layer,
layedit = layui.layedit,
laydate = layui.laydate,
laypage = layui.laypage,
element = layui.element();
//调用分页
laypage({
cont: 'page'
,pages: totalPage
,curr: currentPage
,skip: true
,jump: function(obj, first){
currentPage = obj.curr;
startPage = (obj.curr-1)*limitNum;
getBacktasks(data); //渲染数据
if(!first){ //加此判断，避免初始时会无限刷新
submit(); //一定要把翻页的ajax请求放到这里，不然会请求两次。
}
element.init();
form.render();
}
});
//全选
form.on('checkbox(allChoose)', function (data) {
var checkvals="";
var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]:not([name="show"])');
child.each(function (index, item) {
item.checked = data.elem.checked;
if(item.checked){
checkvals += ","+item.value;
}
});
//捕捉被选记录个数及id
$("#checkids").attr("valength",checkvals.split(",").length-1);
$("#checkids").val(checkvals);
form.render('checkbox');
});
//通过判断文章是否全部选中来确定全选按钮是否选中
form.on("checkbox(choose)", function (data) {
var checkvals="";
var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]:not([name="show"])');
var childChecked = $(data.elem).parents('table').find('tbody input[type="checkbox"]:not([name="show"]):checked')
if (childChecked.length == child.length) {
$(data.elem).parents('table').find('thead input#allChoose').get(0).checked = true;
} else {
$(data.elem).parents('table').find('thead input#allChoose').get(0).checked = false;
}
//遍历被选中的记录
for(var i=0;i<childChecked.length;i++){
checkvals += ","+childChecked[i].value;
}
//捕捉被选记录个数及id
$("#checkids").attr("valength",childChecked.length);
$("#checkids").val(checkvals);
form.render('checkbox');
}) //处理进度条(n:后台获取;timer:循环index;id:任务id;start:点击启动时记录任务对象)
var n = 0, timer = 0, id, start;
var DISABLED = 'layui-btn-disabled';
var active = {
loading: function(othis){
start = othis;
if(othis.hasClass(DISABLED)) return;
//初始化n
n = parseInt(othis.context.lang);
//loading
timer = setInterval(function(){
n = n + Math.random()*10|0;
if(n>100){
n = 100;
clearInterval(timer);
othis.removeClass(DISABLED);
//记录到数据库
taskSchedule(100,othis.context.name);
}
element.progress(othis.context.id, n+'%');
}, 300+Math.random()*1000);
othis.addClass(DISABLED);
},stop: function(othis){
//记录进度
start.context.lang = n;
//停止循环
clearInterval(timer);
//去除disabled标记
start.removeClass(DISABLED);
//记录到数据库
taskSchedule(n,othis.context.name);
}
}; $('.taskProgress').on('click', function(){
var othis = $(this), type = $(this).data('type');
active[type] ? active[type].call(this, othis) : '';
});
});
}; //遍历装载数据
function getBacktasks(data){
var htmlStr = "";
$.each(data,function(v,o){
htmlStr+="<tr><td><input type=\"checkbox\" lay-skin=\"primary\" class='cd_checkbox' value=\""+o.id+"\" lay-filter=\"choose\"></td>";
htmlStr+='<td>'+o.tName+'</td>';
htmlStr+='<td>'+o.tDesc+'</td>';
htmlStr+='<td>';
if(0==o.tStatus){
htmlStr+='<i class=\"layui-icon\" style=\"font-size: 30px; color: #FFB800;\"></i>'
}else if(1==o.tStatus){
htmlStr+='<i class=\"layui-icon\" style=\"font-size: 30px; color: #5FB878\"></i>'
}else{
htmlStr+='<i class=\"layui-icon\" style=\"font-size: 30px; color: #FF5722;\">ဆ</i>'
}
htmlStr+='</td>';
htmlStr+='<td>';
htmlStr+='<div class=\"layui-progress layui-progress-big\" lay-showpercent=\"true\" lay-filter=\"task_'+o.id+'\">';
htmlStr+=' <div class=\"layui-progress-bar layui-bg-green\" lay-percent=\"'+o.tSchedule+'%\"></div>';
htmlStr+='</div>';
htmlStr+='</td>';
htmlStr+='<td>'+o.creater+'</td>';
htmlStr+='<td>'+o.createDate+'</td>';
htmlStr+='<td>';
htmlStr+='<a class=\"layui-btn layui-btn-mini taskProgress\" data-type=\"loading\" id=\"task_'+o.id+'\" name=\"'+o.id+'\" lang=\"'+o.tSchedule+'\"><i class=\"iconfont icon-edit\"></i>启动</a>';
htmlStr+='<a class=\"layui-btn layui-btn-danger layui-btn-mini taskProgress\" data-type=\"stop\" name=\"'+o.id+'\"><i class=\"layui-icon\"></i>停止</a>';
htmlStr+='</td></tr>';
}); if(data.length>0){
$("#page").show();
$(".tasks_content").html(htmlStr);
}else{
$("#page").hide();
$(".tasks_content").html("<tr><td colspan='9'>暂无数据</td></tr>");
} //清空checkids(checkbox记录)
$("#checkids").attr("valength",0);
$("#checkids").val("");
} //=============================点击事件===============================
$(window).one("resize",function(){
$(".tasksAdd_btn").click(function(){
var index = layui.layer.open({
title : "添加任务",
type : 2, anim: 2,
content : "${basePath}/task/modifyPage.htm",
success : function(layero, index){
setTimeout(function(){
layui.layer.tips('点击此处返回数据源列表', '.layui-layer-setwin .layui-layer-close', {
tips: 3
});
},500)
}
}) layui.layer.full(index);
});
$(".tasksEdit_btn").click(function(){
if($("#checkids").attr("valength")==1){
task_edit($("#checkids").val().substring(1));
}else{
layui.layer.alert('友情提示：请选择一条记录进行编辑', {
skin: 'layui-layer-molv'
,closeBtn: 0
});
}
});
$(".tasksDel_btn").click(function(){
if($("#checkids").attr("valength")==1){
task_del($("#checkids").val().substring(1));
}else{
layui.layer.alert('友情提示：请选择一条记录进行删除', {
skin: 'layui-layer-molv'
,closeBtn: 0
});
}
});
$(".tasksBatchDel_btn").click(function(){
if($("#checkids").attr("valength")>=1){
task_del($("#checkids").val().substring(1));
}else{
layui.layer.alert('友情提示：至少选择一条记录进行删除', {
skin: 'layui-layer-molv'
,closeBtn: 0
});
}
});
}).resize();
function task_edit(id){
var index = layui.layer.open({
title : "编辑任务",
type : 2, anim: 2,
content : "${basePath}/task/modifyPage.htm?id="+id,
success : function(layero, index){
setTimeout(function(){
layui.layer.tips('点击此处返回数据源列表', '.layui-layer-setwin .layui-layer-close', {
tips: 3
});
},500)
}
})
layui.layer.full(index);
}
function task_del(ids){
layer.confirm('友情提示：你确定要删除该记录吗', {skin: 'layui-layer-molv' }, function(index){
$.ajax({
type : "POST",
async : false,
dataType : "JSON",
cache : false,
url : "${basePath}/task/delete.htm",
data : {"ids":ids},
success : function(data) {
if (data.flag) {
layer.msg(data.msg, {
icon:data.msgIcon,
time:data.msgTime
}, function(){
submit();
});
} else {
layer.msg(data.msg, {
icon:data.msgIcon,
time:data.msgTime
});
}
}
});
layer.close(index);
});
} //记录进度
function taskSchedule(n,id){
$.ajax({
type : "POST",
async : false,
dataType : "JSON",
cache : false,
url : "${basePath}/task/remschedule.htm",
data : {"schedule":n, "id":id},
success : function(data) {}
});
}
</script>
</body>
</html>
三、分页类
package com.ebd.application.common.Base; import java.util.List;
import java.util.Map; public class Page<T> { /** 总记录数 */
private int total;
/** 分页结果 */
private List<T> dataList;
/** 开始页码 */
private int start;
/** 每页多少 */
private int limit;
/** 查询条件 */
private Map<String,Object> condition; private int currentPage; //当前页
private int currentIndex; //当前记录起始索引
private int totalPage; //总页数 public Page(int start, int limit) {
this.start = start;
this.limit = limit;
} public Page(int start, int limit, Map<String,Object> condition) {
this.start = start;
this.limit = limit;
this.condition = condition;
} public int getCurrentPage() {
if(currentPage<=0) currentPage = 1;
return currentPage;
} public void setCurrentPage(int currentPage) {
this.currentPage = currentPage;
} public int getCurrentIndex() {
this.currentIndex = (getCurrentPage()-1)*getLimit();
if(currentIndex<0) currentIndex = 0;
return currentIndex;
} public void setCurrentIndex(int currentIndex) {
this.currentIndex = currentIndex;
} public int getTotalPage() {
return totalPage;
} public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
} public int getTotal() {
return total;
} public void setTotal(int total) {
if(total%limit==0)
totalPage = total/limit;
else
totalPage = total/limit+1;
this.total = total;
} public List<T> getDataList() {
return dataList;
} public void setDataList(List<T> dataList) {
this.dataList = dataList;
} public int getStart() {
return start;
} public void setStart(int start) {
this.start = start;
} public int getLimit() {
return limit;
} public void setLimit(int limit) {
this.limit = limit;
} public Map<String, Object> getCondition() {
return condition;
} public void setCondition(Map<String, Object> condition) {
this.condition = condition;
} }
四、控制器
@ResponseBody
@RequestMapping("taskListByPage")
public Page<Task> listByPage(Integer start, Integer limit, String selectName, String selectStatus) { Map<String,Object> conditions = new HashMap<String,Object>();
conditions.put("name", selectName);
conditions.put("status", selectStatus);
Page<Task> page = new Page<Task>(start,limit,conditions);
page.setDataList(taskService.findByPage(page));
page.setTotal(taskService.getCount(page));
return page;
}
五、mapper
<!-- 获取总数 -->
<select id="getCount" resultType="int">
select count(1) from bd_tasks
where is_del = 0
<if test="condition.name != ''">
and t_name like concat('%',#{condition.name,jdbcType=VARCHAR},'%')
</if>
<if test="condition.status != ''">
and t_status = #{condition.status,jdbcType=INTEGER}
</if>
</select>
<!-- 分页获取记录 -->
<select id="findByPage" resultMap="BaseResultMap">
select
<include refid="Base_Column_List" />
from bd_tasks where is_del = 0
<if test="condition.name != ''">
and t_name like concat('%',#{condition.name,jdbcType=VARCHAR},'%')
</if>
<if test="condition.status != ''">
and t_status = #{condition.status,jdbcType=INTEGER}
</if>
order by create_date desc,update_date desc
limit #{start, jdbcType=INTEGER} , #{limit, jdbcType=INTEGER}
</select>
效果图
Layui_1.0.9_分页实例_Java的更多相关文章
- RDIFramework.NET 中多表关联查询分页实例
RDIFramework.NET 中多表关联查询分页实例 RDIFramework.NET,基于.NET的快速信息化系统开发.整合框架,给用户和开发者最佳的.Net框架部署方案.该框架以SOA范式作为 ...
- php分页实例附代码
一个典型的PHP分页实例代码分享,学习php的朋友肯定用得到,主要是了解思路: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
- Jsp分页实例---真分页
网页的分页功能的实现比较简单,实现方法也多种多样. 今天总结一个简单的Jsp真分页实例. 首先,提到分页就要先明确一个概念,何为真分页何谓假分页. 假分页:一次性从数据库读出表的所有数据一次性的返回给 ...
- Struts+jdbc+分页 实例
根据项目里分页实例,带有注解. package org.tarena.netctoss.dao.impl; import java.sql.Connection; import java.sql.Pr ...
- js分页实例
js分页实例 案例1 1.js_pageusers.html <!DOCTYPE html> <html> <head> <title>js_pageu ...
- NHibernate初学三之条件查询(Criteria Queries)与AspNetPager分页实例
NHibernate除了SQL与HQL两种查询操作外,还有一种就是条件查询Criteria,本文将从网上整理一些Criteria的理论及小实例,最后通过一个结合AspNetPager分页来加深理解,必 ...
- CSS 分页实例
CSS 分页实例 一.简单分页 如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航. 以下实例演示了如何使用 HTML 和 CSS 来创建分页: <!DOCTYPE html> ...
- ThinkPHP分页实例
ThinkPHP分页实例 (2014-09-20 15:34:36) 很多人初学thinkphp时,不太熟悉thinkphp的分页使用方法,现在将自己整理的分页方法分享下,有需要的朋友可以看看. ...
- java：（json，ajax，path，Oracle的分页实例，Filter拦截器）
1.json: <%@ page language="java" import="java.util.*" pageEncoding="UTF- ...
随机推荐
- node 文件操作
对文件的各种操作,使用姿势如下 文件操作单例 @example fu.exist(file); //是否存在 fu.copy(file, 'new-path'); //复制到某个新目录 fu.move ...
- go get 碰壁怎么办？
如果要让go get顺利进行,必须注意2个问题: 1.墙:2.墙: 解决办法是安装和配置shadowsocks和polipo.shadowsocks是socks5协议,polipo是将sock ...
- jquery中的选择器:has和:not的用法
这两个选择器可以帮助我们在选择父级和子孙之间关系的dom更从容~ <div><p><span>Hello</span></p></di ...
- Luogu2336 SCOI2012 喵星球上的点名 SA、莫队
传送门 一道很套路的题目 先将所有串拼在一起,两个不同的串之间放一个没有出现在任何串中的字符做分隔,然后SA 那么对于所有点名串能够点到的名字串在SA中对应一段区间 把这些区间拿出来然后莫队统计每一个 ...
- CF28D Don't fear, DravDe is kind 背包
题目传送门:http://codeforces.com/problemset/problem/28/D 题意:给你$N$个物品,每个物品有其价格$P_i$,之前必须要买的物品价格和$L_i$,之后必须 ...
- 如何实现.net程序的进程注入
原文:如何实现.net程序的进程注入 如何实现.net程序的进程注入 周银辉 进程注入比较常见,比如用IDE调试程序以及一些Sp ...
- Ionic App之国际化(2) json数组的处理
在Ionic App值国际化(1)中我们实现了对单个参数的多语言处理,下面开始如何进行数组的处理. 1.在我们的多语言文件中设置要访问的json数组,en.json和zh.json,此处就以en.js ...
- [Oracle]Master表字段扩张时的对应方法
Master表字段扩张时的对应方法 如果Master表的数据量很大,Master表中的列,宽度扩张了,MVIEW表如何对应处理? 此时,重建MVIEW可能会耗费很长的时间. 可以采用 alter ma ...
- Spring Boot(十六)：使用 Jenkins 部署 Spring Boot
Jenkins 是 Devops 神器,本篇文章介绍如何安装和使用 Jenkins 部署 Spring Boot 项目 Jenkins 搭建.部署分为四个步骤: 第一步,Jenkins 安装 第二步, ...
- 【已解决】在 Visual Studio 中设置 JavaScript/TypeScript 的断点 脚本出现自动中断错误
运行ASP.NET Core 程序出现错误如下: 已启用 Visual Studio 中的 Chrome 脚本调试 在 Visual Studio 中设置 JavaScript/TypeScript ...