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

最新推荐文章于 2021-03-07 07:18:12 发布

weixin_30322405

最新推荐文章于 2021-03-07 07:18:12 发布

阅读量222

点赞数

文章标签： json java 前端 ViewUI

原文链接：http://www.cnblogs.com/noaman/p/6972574.html

版权

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

初步显示的代码：

<%@ 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练手项目-CRUD</h1>
            </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>empName</th>
                            <th>email</th>
                            <th>gender</th>
                            <th>deptName</th>
                            <th>Option</th>
                        </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 = $("<td></td>").append(item.empId);
                var empNameTd = $("<td></td>").append(item.empName);
                var emailTd = $("<td></td>").append(item.eamil);
                var genderId = $("<td></td>").append(item.gender=="M"?"男":"女");
                var deptNameTd = $("<td></td>").append(item.department.deptName);
                var editBtn = $("<button></button>").addClass("btn btn-info btn-sm")
                                                    .append( $("<span></span>").addClass("glyphicon glyphicon-pencil")
                                                            .append("编辑"));
                var deleteBtn = $("<button></button>").addClass("btn btn-danger btn-sm")
                    .append( $("<span></span>").addClass("glyphicon glyphicon-trash")
                        .append("删除"));

                 $("<tr></tr>").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 = $("<nav></nav>");
            var ul = $("<tr></tr>").addClass("pagination");
            //首页、上一页
            var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
            var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
            //末页、下一页
            var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "#"));
            var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));

            ul.append(firstPageLi).append(prePageLi);

            //1,2,3,4,5页码显示
            $.each(result.extendInfo.pageInfo.navigatepageNums, function (index, item) {
                var numLi = $("<li></li>").append($("<a></a>").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

weixin_30322405

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SSM练手-增删改查-4-返回JSON数据_前端页面

使用JS DOM树完成显示操作：初步显示的代码：<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%...
复制链接

扫一扫