ssm后台管理系统-02

1.分页页面显示数据

方式一：

正常jsp语言

<c:forEach items="${pageInfo.list}" var="employee">
   <tr>
      <td><input name="ids" type="checkbox" value="${employee.uId}"></td>
      <td>${employee.uId}</td>
      <td>${employee.uName}</td>
      <td>${employee.uPassword}</td>
      <td>${employee.uMoney}</td>
      <td>${employee.uBirday}</td>
      <td>${employee.dept.dName}</td>
      <td class="text-center">
         ${employee.role.rName}
      </td>
      <td class="text-center">
         <a href="${root}/emp/getEmployeeById?uId=${employee.uId}" class="btn bg-olive btn-xs">编辑</a>&nbsp;
         <a href="${root}/emp/deleteById?uId=${employee.uId}" class="btn bg-olive btn-xs">删除</a>
      </td>
   </tr>

</c:forEach>

 缺点：只能在pc端，使用范围受限

方式二：

json格式写:

传入页面

@RequestMapping("/getEmpsWithDeptAndRole")
@ResponseBody//json格式必备
public PageInfo getEmpsWithDeptAndRole(@RequestParam(value = "pn",required = false,defaultValue = "1") Integer pn, Map<String,PageInfo> map){
    System.out.println("11111111111111");
    //查询所有用户 携带者部门和角色信息
    PageHelper.startPage(pn,2);
    List<Employee> employees=service.getAll();
    PageInfo pageInfo=new PageInfo(employees,5);
    System.out.println(employees);
    map.put("pageInfo",pageInfo);
    return pageInfo;
}

 不同之处：多了@ResponseBody注解，返回类型 PageInfo，直接返回结果到页面

页面显示：

整个页面在head标签上里

<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>

	<script>
		$(function (){

			//页面加载发送ajax请求  动态发送请求 也叫异步发送请求
			$.ajax({
				url:"${root}/emp/getEmpsWithDeptAndRole",
				data:"pn=1",
				type:"post",
				success:function (result){
					console.log(result);
					buildeEMployee(result);//调用下面方法
				}



			});//$();都在这个方法里面

		});


		//动态的构建页面 和迭代数据了
		function  buildeEMployee(result){
				var list=result.list;
				var tbody=$("#dataList tbody");
			$.each(list,function (index,employee){
				var tr=$("<tr></tr>");
			//	<td><input name="ids" type="checkbox"></td>
				var td1=$("<td></td>");
				var input=$("<input name='ids' type='checkbox' class='icheckbox_square-blue'/>");
				td1.append(input);
				tr.append(td1);
				var tdId=$("<td></td>");
				tdId.append(employee.uId);
				var tduName=$("<td></td>");
				tduName.append(employee.uName);
				var tduPassword=$("<td></td>");
				tduPassword.append(employee.uPassword);
				var tduMoney=$("<td></td>");
				tduMoney.append(employee.uMoney);
				var tduBirday=$("<td></td>");
				tduBirday.append(employee.uBirday);
				var tddName=$("<td></td>");
					tddName.append(employee.dName);
					tr.append(tdId).append(tduName).append(tduPassword)
					.append(tduMoney).append(tduBirday).append(tddName);


     tbody.append(tr);


			});
		}
	</script>

 <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>是使用script语言必须要导入的

append，说白了，主要通过它，套内容，一个套一个

var list=result.list;获取集合
 var tbody=$("#dataList tbody")；//调用dataList  table模板和tbody标签

tbody.append(tr);//最后套tr标签
            $.each(list,function (index,employee){//循环，index是list的指数，emloyee是元素

页导航栏（只用jsp，json的不咋会）

<!--数据列表/-->
							<div class="row">
								<div class="col-md-8">当前第${pageInfo.pageNum}页，一共${pageInfo.pages}页，一共${pageInfo.total}条记录</div>
								<div class="col-md-4">
									<nav aria-label="Page navigation">
										<ul class="pagination">
											<c:if test="${pageInfo.hasPreviousPage}">
												<li>
													<a href="${root}/emp/getEmpsWithDeptAndRole?pn=${pageInfo.pageNum-1}" aria-label="Previous">
														<span aria-hidden="true">&laquo;</span>
													</a>
												</li>
											</c:if>
											<c:if test="${!pageInfo.hasPreviousPage}">
												<li class="disabled">
													<a href="#" aria-label="Previous">
														<span aria-hidden="true">&laquo;</span>
													</a>
												</li>
											</c:if>
											<c:forEach items="${pageInfo.navigatepageNums}" var="num">
												<c:if test="${pageInfo.pageNum==num}">
<%--													//不会跳转，当前页--%>
													<li class="active"><a href="#">${num}</a></li>
												</c:if>
												<c:if test="${pageInfo.pageNum!=num}">
													<li><a href="${root}/emp/getEmpsWithDeptAndRole?pn=${num}">${num}</a></li>
												</c:if>
											</c:forEach>
												<c:if test="${pageInfo.hasNextPage}">
													<li>
														<a href="${root}/emp/getEmpsWithDeptAndRole?pn=${pageInfo.pageNum+1}" aria-label="Next">
															<span aria-hidden="true">&raquo;</span>
														</a>
													</li>
												</c:if>
											<c:if test="${!pageInfo.hasNextPage}">
												<li class="disabled">
													<a href="#" aria-label="Next">
														<span aria-hidden="true">&raquo;</span>
													</a>
												</li>
											</c:if>

										</ul>
									</nav>

								</div>
							</div>

						</div>
						<!-- 数据表格 /-->