SSM练手-增删改查-4-返回JSON数据_前端页面

使用JS DOM树完成显示操作:

SSM练手-增删改查-4-返回JSON数据_前端页面_第1张图片

初步显示的代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
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>员工信息显示title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <script type="text/javascript"
            src="${APP_PATH }/static/js/jquery-1.12.4.min.js">script>
    <link
            href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
            rel="stylesheet">
    <script
            src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js">script>
head>
<body>
    <div class="container">
        
        <div class="row">
            <div class="col-md-4">
                <h1>SSM练手项目-CRUDh1>
            div>
        div>
        
        <div class="row">
            <div class="col-md-4 col-md-offset-8">
                <button class="btn btn-primary">新增button>
                <button class="btn btn-danger">删除button>
            div>
        div>
        
        <div class="row">
            <div class="col-md-12">
                <table class="table table-hover" id="emps_table">
                    <thead>
                        <tr>
                            <th>#th>
                            <th>empNameth>
                            <th>emailth>
                            <th>genderth>
                            <th>deptNameth>
                            <th>Optionth>
                        tr>
                    thead>
                    <tbody>

                    tbody>
                table>
            div>
        div>

        
        <div class="row">
            <div class="col-md-6" id="page_info">

            div>

            <div class="col-md-6" id="nav_pagination_info">

            div>
        div>

    div>

    <script type="text/javascript">

        $(function(){
            $.ajax({
                url:"${APP_PATH}/emp/list2",
                data:"pageNo=5",
                type:"get",
                success:function (result) {
                    console.log(result);
                    //1、解析并显示员工数据
                    build_emps_table(result);
                    //2、解析并显示分页信息
                    build_page_info(result);
                    //3、解析显示分页条数据
                    build_page_nav(result);
                }
            });
        })
        
        function build_emps_table(result) {
            var emps = result.extendInfo.pageInfo.list;
            $.each(emps, function (index, item) {
                var empIdTd = $("").append(item.empId);
                var empNameTd = $("").append(item.empName);
                var emailTd = $("").append(item.eamil);
                var genderId = $("").append(item.gender=="M"?"":"");
                var deptNameTd = $("").append(item.department.deptName);
                var editBtn = $("").addClass("btn btn-info btn-sm")
                                                    .append( $("").addClass("glyphicon glyphicon-pencil")
                                                            .append("编辑"));
                var deleteBtn = $("").addClass("btn btn-danger btn-sm")
                    .append( $("").addClass("glyphicon glyphicon-trash")
                        .append("删除"));

                 $("").append(empIdTd)
                     .append(empNameTd)
                     .append(emailTd)
                     .append(genderId)
                     .append(deptNameTd)
                     .append(editBtn)
                     .append(" ")
                     .append(deleteBtn)
                     .appendTo("#emps_table tbody");
            })
        }
        function build_page_info(result) {
            var pageInfo = result.extendInfo.pageInfo;
            var curPage = pageInfo.pageNum;
            var pages = pageInfo.pages;
            var totalPages = pageInfo.total;
            $("#page_info").append(" 当前第"+curPage+"页,")
                            .append("共有"+ pages +"页,")
                            .append("总共"+ totalPages + "条记录数");
        }
        function build_page_nav(result) {
            var nav = $("");
            var ul = $("").addClass("pagination");
            //首页、上一页
            var firstPageLi = $("
  • ").append($("").append("首页").attr("href", "#")); var prePageLi = $("
  • ").append($("").append("«")); //末页、下一页 var lastPageLi = $("
  • ").append($("").append("末页").attr("href", "#")); var nextPageLi = $("
  • ").append($("").append("»")); ul.append(firstPageLi).append(prePageLi); //1,2,3,4,5页码显示 $.each(result.extendInfo.pageInfo.navigatepageNums, function (index, item) { var numLi = $("
  • ").append($("").append(item)); ul.append(numLi); }) ul.append(nextPageLi).append(lastPageLi); nav.append(ul); $("#nav_pagination_info").append(nav); } script> body> html>

    完善以后的代码:

    1 当前页激活;

    2 首页的话,首页》》》禁止点击,并且不显示数据;

    3 末页的话,末页《《《禁止点击,并且不显示数据;;

    4 默认显示首页数据;

    5 首页,上一页,末页,下一页添加事件,显示对应页码数据

    6 中间页每一页,为其添加点击事件,并跳转到对应页面;

    7 清空

    package com.wgs.controller;
    
    import com.github.pagehelper.PageHelper;
    import com.github.pagehelper.PageInfo;
    import com.wgs.domain.Employee;
    import com.wgs.domain.Msg;
    import com.wgs.service.EmployeeService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.ResponseBody;
    import org.springframework.web.servlet.ModelAndView;
    
    import java.util.List;
    
    /**
     * Created by GenshenWang.nomico on 2017/6/8.
     */
    @Controller
    public class EmployeeController {
    
        @Autowired
        EmployeeService employeeService;
    
        /**
         * 分页查询
         * @param pageNo 页码
         * @return
         */
        //返回JSON
        @RequestMapping(value = {"/emp/list2"}, method = {RequestMethod.GET})
        @ResponseBody
        public Msg getEmpListWithJson(@RequestParam(value = "pageNo", defaultValue = "1") Integer pageNo){
    
            PageHelper.startPage(pageNo, 5);
            List<Employee> employeeList = employeeService.getAll();
            PageInfo pageInfo = new PageInfo(employeeList, 5);
            return Msg.success().add("pageInfo", pageInfo);
        }
    
        @RequestMapping(value = {"/emp/list"}, method = {RequestMethod.GET})
        public ModelAndView getEmpList(@RequestParam(value = "pageNo", defaultValue = "1") Integer pageNo){
    
            ModelAndView mv = new ModelAndView("empList");
            //获取第1页,10条内容
            PageHelper.startPage(pageNo, 10);
            List<Employee> emps = employeeService.getAll();
    
            // 使用pageInfo包装查询后的结果,只需要将pageInfo交给页面就行了。
            // 封装了详细的分页信息,包括有我们查询出来的数据,传入连续显示的页数
            PageInfo<Employee> pageInfo = new PageInfo(emps, 5);
            mv.addObject("pageInfo", pageInfo);
            return mv;
        }
    
        @RequestMapping("/emp/index")
        public String index(){
            return "empList2";
        }
    }

     

    转载于:https://www.cnblogs.com/noaman/p/6972574.html

    你可能感兴趣的:(json,java,前端)