SSM项目用ajax来显示数据
<script type="text/javascript">
//1:页面加载完成后,直接去发送ajax请求,要到分页的数据
$(function(){
$.ajax({
url:"${APP_PATH}/emps",
data:"pn=1",
type:"GET",
success:function(result){
//1:解析并显示员工数据。
build_emps_table(result);
}
});
}); function build_emps_table(result){
//result是一个返回结果集。数据是在Controller层的时候就返回的是一个JSON对象。然后页面上直接取出来就行了。
var emps=result.map.pageInfo.list;
//ajax的foreach遍历。
$.each(emps,function(index,item){
//$("<td></td>")这是创建一个<td>标签。<th>表示行。<td>表示列。
var empIdTd=$("<td></td>").append(item.empId);
var empNameTd=$("<td></td>").append(item.empName);
var genderTd=$("<td></td>").append(item.gender=='M'?"男":"女");
var emailTd=$("<td></td>").append(item.email);
var deptNameTd=$("<td></td>").append(item.department.deptName);
/**
<button class="">
<span class="" aria-hidden="true"></span>
编辑
</button>
*/
var editBtn=$("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
.append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
.append("编辑");
var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
.append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
//先在<tbody>下创建<tr>标签。然后创建的<td>标签追加到<tr>的后面。
$("<tr></tr>").append(empIdTd)
.append(empNameTd)
.append(genderTd)
.append(emailTd)
.append(deptNameTd)
.append(btnTd)
.appendTo("#emps_table tbody"); });
} 48 </script>
PageHelper.startPage(pn, 5);
// startPage后面紧跟的这个查询就是一个分页查询
List<Employee> emps = employeeService.getAllEmployees();
// 使用pageInfo包装查询后的结果,只需要将pageInfo交给页面就行了。
// 封装了详细的分页信息,包括有我们查询出来的数据,传入连续显示的页数
PageInfo page = new PageInfo(emps, 5);
return Msg.success().add("pageInfo", page);
map是我们写的JSON类中,用来存储返回结果集的。Controller中的数据是直接返回的是这个JSON的类。
pageInfo是保存处理后的数据。
package com.ssm.curd.bean; import java.util.HashMap;
import java.util.Map; /*
* 通用的返回类
*/
public class Msg { //返回码,100表示成功。200表示失败
private int code;
//提示信息
private String msg;
//用户要返回的数据
private Map<String, Object> map=new HashMap<String, Object>(); public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Map<String, Object> getMap() {
return map;
}
public void setMap(Map<String, Object> map) {
this.map = map;
} //100的返回
public static Msg success(){
Msg result = new Msg();
result.setCode(100);
result.setMsg("处理成功");
return result;
}
public static Msg fail(){
Msg result = new Msg();
result.setCode(200);
result.setMsg("处理失败");
return result;
} public Msg add(String key,Object value){
this.getMap().put(key, value);
return this;
}
}
2:ajax中分页条的添加
代码实现:
//显示分页条信息
/*
*<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
*/
function build_page_fenyetiao(result){
var ul=$("<ul></ul>").addClass("pagination");
//1:定义首页
var frist=$("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
//2:定义前一页
var qianYiYe=$("<li></li>").append($("<a></a>").append("«"));
//在ul下添加首页和前一页的信息。
ul.append(frist).append(qianYiYe);
//3:定义分页条
$.each(result.map.pageInfo.navigatepageNums,function(index,item){
var numLi=$("<li></li>").append($("<a></a>").append(item));
ul.append(numLi);
});
//4:定义后一页
var houYiYe=$("<li></li>").append($("<a></a>").append("»"));
//5:定义末页
var last=$("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
//把后一页和末页也添加上。
ul.append(houYiYe).append(last);
//定义nav标签。并添加上ul标签
var nav=$("<nav></nav>").append(ul);
//添加到div中的id属性。
nav.appendTo("#page_fenyetiao");
}
<!-- 分页 -->
<div class="row">
<div class="col-md-6" align="center" id="page_xinxi"></div>
<div class="col-md-6" align="center" id="page_fenyetiao"></div>
</div>
</div>
3:完整的分页,技术点
1):每次构建的时候,都要清空。
2):如果 第一页的话,上一页的框和首页不能被选定。最后一页的话,下一页的框和末页不能被选定。
3):翻页。给翻页的按钮加上一个事件。.click(); 上一页的话,pageInfo中的pageNum-1;下一页pageInfo中的pageNum+1;
//进来后先进入第一页
$(function(){
to_page(1);
});
function to_page(pn){
$.ajax({
url:"${APP_PATH}/emps",
data:"pn="+pn,
type:"GET",
success:function(result){
//1:解析并显示员工数据。
build_emps_table(result);
//分页信息
build_page_nav(result);
//分页条信息。
build_page_fenyetiao(result);
}
});
} //这个方法是显示所有员工数据的。
function build_emps_table(result){
//每次构建的时候都要清空数据。
$("#emps_table tbody").empty();
var emps=result.map.pageInfo.list;
$.each(emps,function(index,item){ var empIdTd=$("<td></td>").append(item.empId);
var empNameTd=$("<td></td>").append(item.empName);
var genderTd=$("<td></td>").append(item.gender=='M'?"男":"女");
var emailTd=$("<td></td>").append(item.email);
var deptNameTd=$("<td></td>").append(item.department.deptName);
/**
<button class="">
<span class="" aria-hidden="true"></span>
编辑
</button>
*/
var editBtn=$("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
.append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
.append("编辑");
var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
.append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
//先在<tbody>下创建<tr>标签。然后创建的<td>标签追加到<tr>的后面。
$("<tr></tr>").append(empIdTd)
.append(empNameTd)
.append(genderTd)
.append(emailTd)
.append(deptNameTd)
.append(btnTd)
.appendTo("#emps_table tbody"); });
}
//这个方法是显示分页信息的。
function build_page_nav(result){
//每次构建前,都要清空。
$("#page_xinxi").empty();
$("#page_xinxi").append("当前"+result.map.pageInfo.pageNum+"页,总"+
result.map.pageInfo.pages+"页,总"+
result.map.pageInfo.total+"条"
);
} //显示分页条信息
/*
*<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
*/
function build_page_fenyetiao(result){
//每次构建的时候都要清空。只显示想要展示的数据。
$("#page_fenyetiao").empty();
var ul=$("<ul></ul>").addClass("pagination"); //1:定义首页
var frist=$("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
//设置跳转到首页 //2:定义前一页
var qianYiYe=$("<li></li>").append($("<a></a>").append("«"));
//去判断是否有前一页,如果有前一页,不可以选定。
if(result.map.pageInfo.hasPreviousPage == false){
frist.addClass("disabled");
qianYiYe.addClass("disabled");
}else{
frist.click(function(){
to_page(1);
});
qianYiYe.click(function(){
to_page(result.map.pageInfo.pageNum-1);
});
}
//在ul下添加首页和前一页的信息。
ul.append(frist).append(qianYiYe);
//3:定义分页条
$.each(result.map.pageInfo.navigatepageNums,function(index,item){ var numLi=$("<li></li>").append($("<a></a>").append(item));
//pageInfo里的pageNum和当前页一样的时候,我们会标记出来。标深。
if(result.map.pageInfo.pageNum == item){
numLi.addClass("active");
}
//为numLi添加一个事件。
numLi.click(function(){
to_page(item);
});
ul.append(numLi);
});
//4:定义后一页
var houYiYe=$("<li></li>").append($("<a></a>").append("»"));
//5:定义末页
var last=$("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
////去判断是否有下一页,如果没有下一页,不可以选定。
if(result.map.pageInfo.hasNextPage == false){
houYiYe.addClass("disabled");
last.addClass("disabled");
}else{
houYiYe.click(function(){
to_page(result.map.pageInfo.pageNum+1);
});
last.click(function(){
to_page(result.map.pageInfo.pages);
});
} //把后一页和末页也添加上。
ul.append(houYiYe).append(last);
//定义nav标签。并添加上ul标签
var nav=$("<nav></nav>").append(ul);
nav.appendTo("#page_fenyetiao");
}
SSM项目用ajax来显示数据的更多相关文章
- Django + JQuery + ajax实时显示数据
1 创建django项目 :Visualization and APP :Demo >>django-admin startproject Visualization >>p ...
- SSM项目中用ajax尝试实现controller请求中重定向不起作用的问题
首先我在controller中有一个添加数据的方法: @RequestMapping(value="/emp",method=RequestMethod.POST) public ...
- dataTables使用ajax请求显示数据
dataTables是一种很好用前端表格显示库.当加载大量数据时,可以用Ajax 获取数据来提高效率,增速网页加载速率.下面以一个例子作示范. 首先,需要下载jQuery以及dataTables库.这 ...
- SSM项目day4 Oracle批量插入数据bug <foreach>标签中collection属性使用的是属性名
- 项目中使用的ajax异步读取数据结构设计
设计稍微复杂了一点,完成ajax读取功能涉及到了很多页面.虽然如此,但感觉比较灵活. 和传统方法唯一的区别在于多了一层数据容器控件,里面提供了显示数据的HTML元素及相应的JS方法. 这样数据控件指生 ...
- web项目通过ajax提交数据太大报错
通过ajax提交大数据 $.ajax({ url:"", data:{xx:xx} }) 这样子大大的字符串四五个一块提交.导致的提交的请求太大 idea报错 浏览器页面报错 解决 ...
- Maven 搭建 SSM 项目 (oracle)
简单谈一下maven搭建 ssm 项目 (使用数据库oracle,比 mysql 难,所以这里谈一下) 在创建maven 的web项目时,常常会缺了main/java , main/test 两个文件 ...
- SSM项目环境快速搭建
SSM项目的环境搭建 环境搭建的目标 工程创建 创建父工程 创建空 maven工程 xxx-parent 作为父工程 修改父工程中的 pom.xml <!--?xml version=" ...
- SpringMvc(五) - 支付宝沙箱和关键字过滤,md5加密,SSM项目重要知识点
1.支付宝沙箱 1.1 jar包 alipay-sdk <!-- alipay-sdk --> <dependency> <groupId>com.alipay.s ...
随机推荐
- Aliyun mysql配置 远程访问 10038
环境 centos7.2 mysql5.7 网上搜了好多的文章,有的说在/etc/my.cnf 注释掉bind-address = 127.0.0.1 ,也开启了3306端口的防火墙,也添加了远 ...
- Vagrant 手册之 Vagrantfile - 概述
原文地址 Vagrantfile 的主要用途是描述用于项目的机器类型,以及如何配置和提供这些机器. Vagrant 的每个项目运行一个 Vagrantfile,并且 Vagrantfile 应该被提交 ...
- SqlServer 索引和视图
Ø 索引 1. 什么是索引 索引就是数据表中数据和相应的存储位置的列表,利用索引可以提高在表或视图中的查找数据的速度. 2. 索引分类 数据库中索引主要分为两类:聚集索引和非聚集索引.SQL Serv ...
- Learn Python the hard way, ex39 列表的操作
#!/usr/bin/python #coding:utf-8 ten_things = "apples oranges crows telephone light sugar" ...
- 【FICO系列】SAP FICO模块-完工入库后的差异凭证处理
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[FICO系列]SAP FICO模块-完工入库后 ...
- 校内模拟赛T5:连续的“包含”子串长度( nekameleoni?) —— 线段树单点修改,区间查询 + 尺取法合并
nekameleoni 区间查询和修改 给定N,K,M(N个整数序列,范围1~K,M次查询或修改) 如果是修改,则输入三个数,第一个数为1代表修改,第二个数为将N个数中第i个数做修改,第三个数为修改成 ...
- fatal error C1047: The object or library file xxx was created with an older compiler than other objects
之前编译Cocos2DX时遇到过一次,这次又遇到了,记下解决方法,以防再来第三次. 这个错误是说链接的库或者文件是老版本编译器生成的,与当前编译器不符,比如这次用的预编译库是2015的,而我当前使用的 ...
- 有用的官方API和官网
1.Bootstrap API:http://www.runoob.com/bootstrap/bootstrap-tutorial.html 2.百度地图API示例:http://lbsyun.ba ...
- 《JAVA设计模式》之访问者模式(Visitor)
在阎宏博士的<JAVA与模式>一书中开头是这样描述访问者(Visitor)模式的: 访问者模式是对象的行为模式.访问者模式的目的是封装一些施加于某种数据结构元素之上的操作.一旦这些操作需要 ...
- Spring学习(三)--高级装配
一.Spring profile 在开发软件的时候,有一个很大的挑战就是将应用程序从一个环境迁 移到另外一个环境.开发阶段中,某些环境相关做法可能并不适合迁 移到生产环境中,甚至即便迁移过去也无法正常 ...