SSM練手-增刪改查-4-返回JSON數據_前端頁面

時間 2019-11-17

標籤 ssm 增刪返回 json 數據前端頁面欄目 JavaScript 简体版

原文原文鏈接

使用JS DOM樹完成顯示操做：javascript

初步顯示的代碼：css

<%@ 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);
                    //一、解析並顯示員工數據
                    build_emps_table(result);
                    //二、解析並顯示分頁信息
                    build_page_info(result);
                    //三、解析顯示分頁條數據
                    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>

完善之後的代碼：html

1 當前頁激活；java

2 首頁的話，首頁》》》禁止點擊，而且不顯示數據；jquery

3 末頁的話，末頁《《《禁止點擊，而且不顯示數據；；git

4 默認顯示首頁數據；github

5 首頁，上一頁，末頁，下一頁添加事件，顯示對應頁碼數據web

6 中間頁每一頁，爲其添加點擊事件，並跳轉到對應頁面；ajax

7 清空spring

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";
    }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。