SSM-CRUD入門項目——查詢

時間  2020-04-18
標籤 ssm crud 入門 項目 查詢 欄目 網站開發 简体版
原文   原文鏈接

查詢javascript

　　1.基礎查詢css

　　分析：訪問項目主頁 index.jsp 時應該跳轉到列表頁html

　　　　　咱們能夠在index.jsp發出查詢員工列表請求，來到 list.jspjava

　　　　　　使用插件 pageHelper 完成分頁功能——使用pageHelper，給他須要的參數：我要查詢第幾頁，每頁幾條記錄，我要連續顯示幾條？jquery

　　首先在首頁頁面直接轉發：git

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<<jsp:forward page="/emps"></jsp:forward>
<!-- <!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>Insert title here</title>
<link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 先引入jQuery，再引入js
<script type="text/javascript" src="static/bootstrap/js/jquery.min.js"> </script>
<script src="static/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    
</body>
</html> -->
View Code

　　編寫一下轉發的controller：github

package cn.crud.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;

import cn.crud.bean.Employee;
import cn.crud.service.EmpService;

/**
 * 處理員工的CRUD請求
 * @author Administrator
 *
 */
@Controller
public class EmpController {
    
    @Autowired
    private EmpService empService;
    /**
     * 分頁查詢員工數據
     * @return
     */
    @RequestMapping("/emps")
    public String getEmps(@RequestParam(value="pn",defaultValue="1") Integer pn, Model model){
        //改造爲一個分頁查詢
        //在查詢以前傳入分頁參數：起始頁和每頁記錄數
        PageHelper.startPage(pn, 5);
        //後面緊跟的查詢就是分頁查詢
        List<Employee> empList = empService.getAll();
        //用PageInfo對結果進行包裝，只須要將PageInfo交給頁面便可，這裏面封裝了詳細的信息,第二個參數爲須要連續顯示的記錄數
        PageInfo page = new PageInfo(empList,5);
        model.addAttribute("page", page);
        return "list";
    }
}
View Code

　　//分頁插件pageHelper的使用以及引入等能夠參照官方文檔等，這裏暫時不展開，待另外博客更新web

　　因爲controller中調用service,咱們生成service：ajax

package cn.crud.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import cn.crud.bean.Employee;
import cn.crud.dao.EmployeeMapper;

@Service
public class EmpService {
    
    @Autowired
    private EmployeeMapper employeeMapper;

    public List<Employee> getAll() {
        /**
         * 沒有查詢條件的查詢全部，帶部門信息
         */
        return employeeMapper.selectByExampleWithDept(null);
    }


}
View Code

　　//service中調用dao的mapper:spring

　　在來到頁面以前，咱們先使用spring的單元測試進行測試，測試數據是否正常到達：

package cn.crud.tests;

import java.util.List;

import org.junit.Before;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.test.context.ContextConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
import org.springframework.test.context.web.WebAppConfiguration;
import org.springframework.test.web.servlet.MockMvc;
import org.springframework.test.web.servlet.MvcResult;
import org.springframework.test.web.servlet.request.MockMvcRequestBuilders;
import org.springframework.test.web.servlet.setup.MockMvcBuilders;
import org.springframework.web.context.WebApplicationContext;

import com.github.pagehelper.PageInfo;

import cn.crud.bean.Employee;

/**
 * 使用spring的單元測試來進行模擬發送請求的測試
 * @author Administrator
 *
 */
@RunWith(SpringJUnit4ClassRunner.class)
@WebAppConfiguration
@ContextConfiguration(locations={"classpath:applicationContext.xml",
                                    "file:src/main/webapp/WEB-INF/dispatcherServlet-servlet.xml"})
public class MVCTest {

    //springMVC的IOC容器
    @Autowired
    private WebApplicationContext context;
    //模擬MVC請求
    private MockMvc mockMvc;
    
    @Before
    public void setup(){
        mockMvc = MockMvcBuilders.webAppContextSetup(context).build();
    }
    
    @Test
    public void testPage() throws Exception{
        //模擬請求拿到返回值
         MvcResult result = mockMvc.perform(MockMvcRequestBuilders.get("/emps").param("pn", "2"))
                 .andReturn();
         //請求域中有pageInfo
         PageInfo page = (PageInfo) result.getRequest().getAttribute("page");
         System.out.println(page.getPageNum());
         System.out.println(page.getTotal());
         
         //獲得員工數據
         List<Employee> list = page.getList();
         for (Employee employee : list) {
            System.out.println("ID:"+employee.getdId()+" 性別:"+employee.getGender());
        }
    }
}
View Code

　　//尤爲須要注意的是spring-test4的版本須要servlet3.0以上的版本，咱們去倉庫中第一個java servlet-api找到3.1的版本替換原來2.5的版本！

 　　界面的搭建：

　　　　使用bootstrap的柵格系統快速搭建簡單的界面框架

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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("path",request.getContextPath());
%>
<!-- 推薦以 / 開始的相對路徑（以服務器的根路徑爲相對路徑） -->
<link href="${path}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 <!-- 先引入jQuery，再引入js -->
<script type="text/javascript" src="${path}/static/bootstrap/js/jquery.min.js"> </script>
<script src="${path}/static/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <!-- 分爲四大行 -->
        <!-- 標題 -->
        <div class="row">
             <div class="col-md-12">
                <font size="20">SSM-CRUD</font>
             </div>
        </div>
        <!-- 按鈕 -->
        <div class="row">
            <!-- 偏移4列 -->
            <div class="col-md-4 col-md-offset-8">
                <button type="button" class="btn btn-primary ">新增</button>
                <button type="button" class="btn btn-danger ">刪除</button>
            </div>
        </div>
        <!-- 表格 -->
        <div class="row">
            <div class="col-md-12">
                <table class="table table-hover">
                    <tr>
                        <th>#</th>
                        <th>empName</th>
                        <th>empEmail</th>
                        <th>gender</th>
                        <th>deptName</th>
                        <th>操做</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>aa</td>
                        <td>123@163.com</td>
                        <td>M</td>
                        <td>開發部</td>
                        <td>
                            <button type="button" class="btn btn-info btn-sm">
                            <span class="glyphicon glyphicon-penci" aria-hidden="true"></span>
                                編輯</button>
                            <button type="button" class="btn btn-danger btn-sm">
                            <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                                刪除</button>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <!-- 分頁信息 -->
        <div class="row">
            <!-- 分頁文字信息 -->
            <div class="col-md-6">
                當前記錄數：xxx
            </div>
            <!-- 分頁條 -->
            <div class="col-md-6">
                <nav aria-label="Page navigation">
                  <ul class="pagination">
                      <li><a href="#">首頁</a></li>
                    <li>
                      <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</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">&raquo;</span>
                      </a>
                    </li>
                    <li><a href="#">末頁</a></li>
                  </ul>
                </nav>
            </div>
        </div>
    </div>
</body>
</html>
View Code

　　　　//注意不要使用不帶 / 的相對路徑，而是使用帶 / 的路徑

　　　　使用maven分類博客中使用插件運行Maven項目：訪問主頁，成功！

 　　接下來利用分頁插件完成分頁信息的查詢，因爲咱們將分頁信息都封裝在pageInfo中，咱們利用這個完成分頁頁面的搭建：

<%@ 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("path",request.getContextPath());
%>
<!-- 推薦以 / 開始的相對路徑（以服務器的根路徑爲相對路徑） -->
<link href="${path}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 <!-- 先引入jQuery，再引入js -->
<script type="text/javascript" src="${path}/static/bootstrap/js/jquery.min.js"> </script>
<script src="${path}/static/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <!-- 分爲四大行 -->
        <!-- 標題 -->
        <div class="row">
             <div class="col-md-12">
                <font size="20">SSM-CRUD</font>
             </div>
        </div>
        <!-- 按鈕 -->
        <div class="row">
            <!-- 偏移4列 -->
            <div class="col-md-4 col-md-offset-8">
                <button type="button" class="btn btn-primary ">新增</button>
                <button type="button" class="btn btn-danger ">刪除</button>
            </div>
        </div>
        <!-- 表格 -->
        <div class="row">
            <div class="col-md-12">
                <table class="table table-hover">
                    <tr>
                        <th>#</th>
                        <th>empName</th>
                        <th>empEmail</th>
                        <th>gender</th>
                        <th>deptName</th>
                        <th>操做</th>
                    </tr>
                    <c:forEach items="${pageInfo.list }" var="emp">
                        <tr>
                            <td>${emp.empId}</td>
                            <td>${emp.empName}</td>
                            <td>${emp.email}</td>
                            <!-- 三元運算符展現性別信息 -->
                            <td>${emp.gender=="M"?"男":"女"}</td>
                            <td>${emp.department.deptName}</td>
                            <td>
                                <button type="button" class="btn btn-info btn-sm">
                                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                                    編輯</button>
                                <button type="button" class="btn btn-danger btn-sm">
                                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                                    刪除</button>
                            </td>
                        </tr>
                    </c:forEach>
                </table>
            </div>
        </div>
        <!-- 分頁信息 -->
        <div class="row">
            <!-- 分頁文字信息，其中分頁信息都封裝在pageInfo中 -->
            <div class="col-md-6">
                當前第：${pageInfo.pageNum}頁，總共：${pageInfo.pages}頁，總共：${pageInfo.total}條記錄
            </div>
            <!-- 分頁條 -->
            <div class="col-md-6">
                <nav aria-label="Page navigation">
                  <ul class="pagination">
                      <li><a href="${path}/emps?pn=1">首頁</a></li>
                      <c:if test="${pageInfo.hasPreviousPage }">
                           <li>
                          <a href="${path}/emps?pn=${pageInfo.pageNum-1}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                          </a>
                        </li>
                      </c:if>

                    <c:forEach items="${pageInfo.navigatepageNums }" var="page_Num">
                        <c:if test="${page_Num == pageInfo.pageNum }">
                            <li class="active"><a href="#">${page_Num}</a></li>
                        </c:if>
                        <c:if test="${page_Num != pageInfo.pageNum }">
                            <li><a href="${path}/emps?pn=${page_Num}">${page_Num}</a></li>
                        </c:if>
                    </c:forEach> 
                    <c:if test="${pageInfo.hasNextPage }">
                        <li>
                          <a href="${path}/emps?pn=${pageInfo.pageNum+1}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                          </a>
                        </li>
                    </c:if>   
                    <li><a href="${path}/emps?pn=${pageInfo.pages}">末頁</a></li>
                  </ul>
                </nav>
            </div>
        </div>
    </div>
</body>
</html>
View Code

//注意：
//使用PageHelper.startPage只是針對接下來的一條查詢語句，
//若是又查詢了一次數據，則還須要使用一次PageHelper.startPage

　　2.AJAX請求

　　瀏覽器的請求是能夠正確完成相關的功能的，可是若是是安卓IOS等移動客戶端，服務器再發送一個頁面給移動設備解析的話，是比較費力的，交互體驗也不是很好，因而，咱們將請求更改成前臺發AJAX請求，後臺返回JSON數據

　　分析：首頁index.jsp直接發送ajax請求進行員工分頁信息的查詢

　　　　　服務器將查詢的數據以JSON格式返回

　　　　　前臺使用js完成JSON的解析，經過DOM操做完成增刪改查的操做。

　　回憶springMVC與JSON的交互，須要jackson的包，咱們去中央倉庫找到maven的座標：

　　　　咱們找到第一個數據綁定的包：

<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.8.8</version>
</dependency>

 

　　　　以後咱們將分頁信息使用通用的信息類 Msg 進行包裝，方便咱們進行一些返回JSON的操做：

package cn.crud.bean;

import java.util.HashMap;
import java.util.Map;

/**
 * 通用的返回信息的類
 *
 */
public class Msg {

    //狀態碼，自定義一些狀態碼對應的狀態
    private int code;
    //提示信息
    private String msg;
    
    //用戶給瀏覽器的數據，好比說返回的PageInfo信息
    private Map<String,Object> map = new HashMap<String,Object>();

    /**
     * 操做成功的靜態方法
     * @return
     */
    public static Msg success(){
        Msg result = new Msg();
        //這裏100表示成功
        result.setCode(100);
        result.setMsg("操做成功");
        return result;
    }
    
    /**
     * 操做失敗的靜態方法
     * @return
     */
    public static Msg fail(){
        Msg result = new Msg();
        //這裏100表示成功
        result.setCode(200);
        result.setMsg("操做失敗");
        return result;
    }
    /**
     * 快捷添加信息的方法
     * @return
     */
    public Msg add(String key,Object value){
        this.getMap().put(key, value);
        return this;
    }
    
    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;
    }
    
    
}
View Code

//Msg信息類中包含一些必要的屬性與咱們須要的靜態方法

 

 　　　將controller中的返回分頁信息方法進行改寫，讓他返回msg方便進行ajax的改造：

/**
     * 分頁信息的AJAX請求
     * @ResponseBody能夠將返回的對象轉爲JSON字符串
     * 此註解須要引入jackson的包（以及註解驅動的配置等，這裏已經進行配置）
     * 將返回信息包裝在msg裏
     */
    @RequestMapping("/emps")
    @ResponseBody
    public Msg getEmpsWithJson(@RequestParam(value="pn",defaultValue="1") Integer pn, Model model){
        //改造爲一個分頁查詢
        //在查詢以前傳入分頁參數：起始頁和每頁記錄數
        PageHelper.startPage(pn, 5);
        //後面緊跟的查詢就是分頁查詢
        List<Employee> empList = empService.getAll();
        //用PageInfo對結果進行包裝，只須要將PageInfo交給頁面便可，這裏面封裝了詳細的信息,第二個參數爲須要連續顯示的記錄數
        PageInfo page = new PageInfo(empList,5);
        //直接將pageInfo對象進行返回
        //將pageInfo放在msg裏進行返回，鏈式操做返回對象自己
        return Msg.success().add("pageInfo", page);
    }
View Code

　　　而後，咱們先將index.jsp重命名爲index-old.jsp先放一邊，new 一個index.jsp進行改造：

 　　　　咱們先用ajax改造表格的生成部分：

<%@ 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("path",request.getContextPath());
%>
<!-- 推薦以 / 開始的相對路徑（以服務器的根路徑爲相對路徑） -->
<link href="${path}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 <!-- 先引入jQuery，再引入js -->
<script type="text/javascript" src="${path}/static/bootstrap/js/jquery.min.js"> </script>
<script src="${path}/static/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <!-- 分爲四大行 -->
        <!-- 標題 -->
        <div class="row">
             <div class="col-md-12">
                <font size="20">SSM-CRUD</font>
             </div>
        </div>
        <!-- 按鈕 -->
        <div class="row">
            <!-- 偏移4列 -->
            <div class="col-md-4 col-md-offset-8">
                <button type="button" class="btn btn-primary ">新增</button>
                <button type="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>empEmail</th>
                            <th>gender</th>
                            <th>deptName</th>
                            <th>操做</th>
                        </tr>
                    </thead>
                    <tbody>
                    
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 分頁信息 -->
        <div class="row">
            <!-- 分頁文字信息，其中分頁信息都封裝在pageInfo中 -->
            <div class="col-md-6">
                當前第：頁，總共：頁，總共：條記錄
            </div>
            <!-- 分頁條 -->
            <div class="col-md-6">
                
            </div>
        </div>
    </div>
    <script type="text/javascript">
        //頁面加載完成後直接發送ajax請求，取得分頁數據
        $(function(){
            $.ajax({
                //請求方式
                type : "GET", 
                //請求url
                url : "${path}/emps",
                //請求要帶的數據
                data :"pn=1",
                //請求成功的回調函數
                success : function(result) {
                    //1.解析JSON返回員工數據
                    build_emps_table(result)
                    //2.解析生成分頁信息
                    
                }
            });
        });
        //解析員工數據
        function build_emps_table(result){
            //員工數據
            var emps = result.map.pageInfo.list;
            //使用jQuery遍歷數組，遍歷的是取出來的json數組，能夠經過開發工具查看JSON結構
            $.each(emps,function(idx,item){
                //使用jQuery生成各列
                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);
                //添加操做按鈕，經過jQuery的一些操做（例如CSS的追加CSS操做），完成按鈕的構建
                var editBtn = $("<button></button>").addClass("btn btn-info btn-sm")
                                .append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
                                .append("編輯");
                var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm")
                .append($("<span></span>").addClass("glyphicon glyphicon-trash"))
                .append("刪除");
                var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
                //鏈式操做完成列的添加（鏈式操做因爲jQuery返回的是原元素）
                $("<tr></tr>").append(empIdTd)
                    .append(empNameTd)
                    .append(genderTd)
                    .append(emailTd)
                    .append(deptNameTd)
                    .append(deptNameTd)
                    .append(btnTd)
                    .appendTo($("#emps_table tbody"));
            });
        }
        //生成分頁導航信息
        function build_pages_nav(result){
            
        }
    </script>
</body>
</html>
View Code

//這裏須要適當複習一下jQuery

　　　　咱們再解析分頁信息和分頁條部分：

<%@ 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("path",request.getContextPath());
%>
<!-- 推薦以 / 開始的相對路徑（以服務器的根路徑爲相對路徑） -->
<link href="${path}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 <!-- 先引入jQuery，再引入js -->
<script type="text/javascript" src="${path}/static/bootstrap/js/jquery.min.js"> </script>
<script src="${path}/static/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <!-- 分爲四大行 -->
        <!-- 標題 -->
        <div class="row">
             <div class="col-md-12">
                <font size="20">SSM-CRUD</font>
             </div>
        </div>
        <!-- 按鈕 -->
        <div class="row">
            <!-- 偏移4列 -->
            <div class="col-md-4 col-md-offset-8">
                <button type="button" class="btn btn-primary ">新增</button>
                <button type="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>empEmail</th>
                            <th>gender</th>
                            <th>deptName</th>
                            <th>操做</th>
                        </tr>
                    </thead>
                    <tbody>
                    
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 分頁信息 -->
        <div class="row">
            <!-- 分頁文字信息，其中分頁信息都封裝在pageInfo中 -->
            <div class="col-md-6" id="page_info">
                
            </div>
            <!-- 分頁條 -->
            <div class="col-md-6" id="page_nav">
                
            </div>
        </div>
    </div>
    <script type="text/javascript">
        //頁面加載完成後直接發送ajax請求，取得分頁數據
        $(function(){
            $.ajax({
                //請求方式
                type : "GET", 
                //請求url
                url : "${path}/emps",
                //請求要帶的數據
                data :"pn=1",
                //請求成功的回調函數
                success : function(result) {
                    //1.解析JSON返回員工數據
                    build_emps_table(result);
                    //2.解析生成分頁信息(分頁條與分頁導航)
                    build_pages_info(result);
                    build_pages_nav(result);
                }
            });
        });
        //解析員工數據
        function build_emps_table(result){
            //員工數據
            var emps = result.map.pageInfo.list;
            //使用jQuery遍歷數組，遍歷的是取出來的json數組，能夠經過開發工具查看JSON結構
            $.each(emps,function(idx,item){
                //使用jQuery生成各列
                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);
                //添加操做按鈕，經過jQuery的一些操做（例如CSS的追加CSS操做），完成按鈕的構建
                var editBtn = $("<button></button>").addClass("btn btn-info btn-sm")
                                .append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
                                .append("編輯");
                var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm")
                .append($("<span></span>").addClass("glyphicon glyphicon-trash"))
                .append("刪除");
                var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
                //鏈式操做完成列的添加（鏈式操做因爲jQuery返回的是原元素）
                $("<tr></tr>").append(empIdTd)
                    .append(empNameTd)
                    .append(genderTd)
                    .append(emailTd)
                    .append(deptNameTd)
                    .append(deptNameTd)
                    .append(btnTd)
                    .appendTo($("#emps_table tbody"));
            });
        }
        //生成分頁信息
        function build_pages_info(result){
            //當前頁
            var currentPage = result.map.pageInfo.pageNum;
            //總頁數
            var totalPage = result.map.pageInfo.pages;
            //總記錄數
            var totalCount = result.map.pageInfo.total;
            $("#page_info").append("當前第："+currentPage+"頁，"+"總共："+totalPage+"頁，"+"總共："+totalCount+"條記錄");
        }
        //生成分頁導航信息
        function build_pages_nav(result){
            //導航條外層的Ul
            var navUl = $("<ul></ul>").addClass("pagination");
            //首頁
            var firstPageLi = $("<li></li>").append($("<a></a>").append("首頁").attr("href","#"));
            //前一頁
            var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
            //判斷是否有首頁
            if(result.map.pageInfo.hasPreviousPage == false){
                firstPageLi.addClass("disabled");
                prePageLi.addClass("disabled");
            }
            //後一頁
            var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
            //末頁
            var lastPageLi = $("<li></li>").append($("<a></a>").append("末頁").attr("href","#"));
            //判斷是否有末頁
            if(result.map.pageInfo.hasNextPage == false){
                lastPageLi.addClass("disabled");
                nextPageLi.addClass("disabled");
            }
            
            //添加到ul
            navUl.append(firstPageLi).append(prePageLi);
            
            //遍歷頁碼數
            $.each(result.map.pageInfo.navigatepageNums,function(idx,item){
                var numLi = $("<li></li>").append($("<a></a>").append(item));
                //若是爲當前頁，則高亮顯示，採用增長類的方法完成
                if(result.map.pageInfo.pageNum == item){
                    numLi.addClass("active");
                }
                navUl.append(numLi);
            });
            navUl.append(nextPageLi).append(lastPageLi);
            var navEle = $("<nav></nav>").append(navUl);
            $("#page_nav").append(navEle);
        }
    </script>
</body>
</html>
View Code

 

//這樣，加上一些頁面的處理後，整個頁面框架就搭建出來了

　　　　接下來咱們進行一些事件的處理，例如導航條的頁碼，是點擊後再發送ajax請求進行查詢顯示的，咱們對頁面再次進行改造：

　　　　　　咱們對頁碼進行單擊事件綁定與相關函數的抽取，完成後的index.jsp頁面以下

<%@ 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("path",request.getContextPath());
%>
<!-- 推薦以 / 開始的相對路徑（以服務器的根路徑爲相對路徑） -->
<link href="${path}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 <!-- 先引入jQuery，再引入js -->
<script type="text/javascript" src="${path}/static/bootstrap/js/jquery.min.js"> </script>
<script src="${path}/static/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <!-- 分爲四大行 -->
        <!-- 標題 -->
        <div class="row">
             <div class="col-md-12">
                <font size="20">SSM-CRUD</font>
             </div>
        </div>
        <!-- 按鈕 -->
        <div class="row">
            <!-- 偏移4列 -->
            <div class="col-md-4 col-md-offset-8">
                <button type="button" class="btn btn-primary ">新增</button>
                <button type="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>empEmail</th>
                            <th>gender</th>
                            <th>deptName</th>
                            <th>操做</th>
                        </tr>
                    </thead>
                    <tbody>
                    
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 分頁信息 -->
        <div class="row">
            <!-- 分頁文字信息，其中分頁信息都封裝在pageInfo中 -->
            <div class="col-md-6" id="page_info">
                
            </div>
            <!-- 分頁條 -->
            <div class="col-md-6" id="page_nav">
                
            </div>
        </div>
    </div>
    <script type="text/javascript">
        //頁面加載完成後直接發送ajax請求，取得分頁數據
        $(function(){
            //加載完頁面就經過這個函數發ajax請求
            toPage(1);
        });
        //跳轉到某頁的函數
        function toPage(pn){
            $.ajax({
                //請求方式
                type : "GET", 
                //請求url
                url : "${path}/emps",
                //請求要帶的數據
                data :"pn="+pn,
                //請求成功的回調函數
                success : function(result) {
                    //1.解析JSON返回員工數據
                    build_emps_table(result);
                    //2.解析生成分頁信息(分頁條與分頁導航)
                    build_pages_info(result);
                    build_pages_nav(result);
                }
            });
        }
        //解析員工數據
        function build_emps_table(result){
            //員工數據
            var emps = result.map.pageInfo.list;
            //使用jQuery遍歷數組，遍歷的是取出來的json數組，能夠經過開發工具查看JSON結構
            $.each(emps,function(idx,item){
                //使用jQuery生成各列
                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);
                //添加操做按鈕，經過jQuery的一些操做（例如CSS的追加CSS操做），完成按鈕的構建
                var editBtn = $("<button></button>").addClass("btn btn-info btn-sm")
                                .append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
                                .append("編輯");
                var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm")
                .append($("<span></span>").addClass("glyphicon glyphicon-trash"))
                .append("刪除");
                var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
                //鏈式操做完成列的添加（鏈式操做因爲jQuery返回的是原元素）
                $("<tr></tr>").append(empIdTd)
                    .append(empNameTd)
                    .append(genderTd)
                    .append(emailTd)
                    .append(deptNameTd)
                    .append(deptNameTd)
                    .append(btnTd)
                    .appendTo($("#emps_table tbody"));
            });
        }
        //生成分頁信息
        function build_pages_info(result){
            //當前頁
            var currentPage = result.map.pageInfo.pageNum;
            //總頁數
            var totalPage = result.map.pageInfo.pages;
            //總記錄數
            var totalCount = result.map.pageInfo.total;
            $("#page_info").append("當前第："+currentPage+"頁，"+"總共："+totalPage+"頁，"+"總共："+totalCount+"條記錄");
        }
        //生成分頁導航信息
        function build_pages_nav(result){
            //導航條外層的Ul
            var navUl = $("<ul></ul>").addClass("pagination");
            //首頁
            var firstPageLi = $("<li></li>").append($("<a></a>").append("首頁").attr("href","#"));
            //前一頁
            var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
            //判斷是否有首頁
            if(result.map.pageInfo.hasPreviousPage == false){
                firstPageLi.addClass("disabled");
                prePageLi.addClass("disabled");
            }
            //後一頁
            var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
            //末頁
            var lastPageLi = $("<li></li>").append($("<a></a>").append("末頁").attr("href","#"));
            //判斷是否有末頁
            if(result.map.pageInfo.hasNextPage == false){
                lastPageLi.addClass("disabled");
                nextPageLi.addClass("disabled");
            }
            
            //添加到ul
            navUl.append(firstPageLi).append(prePageLi);
            
            //遍歷頁碼數
            $.each(result.map.pageInfo.navigatepageNums,function(idx,item){
                var numLi = $("<li></li>").append($("<a></a>").append(item));
                //若是當前頁爲正在遍歷的頁，則高亮顯示，採用增長類的方法完成
                if(result.map.pageInfo.pageNum == item){
                    numLi.addClass("active");
                }
                //給每一個頁碼添加單擊綁定事件
                numLi.click(function(){
                    toPage(item);
                });
                navUl.append(numLi);
            });
            navUl.append(nextPageLi).append(lastPageLi);
            var navEle = $("<nav></nav>").append(navUl);
            $("#page_nav").append(navEle);
        }
    </script>
</body>
</html>
View Code

　　　　咱們測試一下，很容易發現問題：

　　頁面雖然數據正常返回，但因爲是無刷新的返回數據，形成數據的追加而不是替換！咱們再次進行改造：

 　　　　在全部操做以前進行數據的清空，因而，改造頁面以下：

<%@ 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("path",request.getContextPath());
%>
<!-- 推薦以 / 開始的相對路徑（以服務器的根路徑爲相對路徑） -->
<link href="${path}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 <!-- 先引入jQuery，再引入js -->
<script type="text/javascript" src="${path}/static/bootstrap/js/jquery.min.js"> </script>
<script src="${path}/static/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <!-- 分爲四大行 -->
        <!-- 標題 -->
        <div class="row">
             <div class="col-md-12">
                <font size="20">SSM-CRUD</font>
             </div>
        </div>
        <!-- 按鈕 -->
        <div class="row">
            <!-- 偏移4列 -->
            <div class="col-md-4 col-md-offset-8">
                <button type="button" class="btn btn-primary ">新增</button>
                <button type="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>empEmail</th>
                            <th>gender</th>
                            <th>deptName</th>
                            <th>操做</th>
                        </tr>
                    </thead>
                    <tbody>
                    
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 分頁信息 -->
        <div class="row">
            <!-- 分頁文字信息，其中分頁信息都封裝在pageInfo中 -->
            <div class="col-md-6" id="page_info">
                
            </div>
            <!-- 分頁條 -->
            <div class="col-md-6" id="page_nav">
                
            </div>
        </div>
    </div>
    <script type="text/javascript">
        //頁面加載完成後直接發送ajax請求，取得分頁數據
        $(function(){
            //加載完頁面就經過這個函數發ajax請求
            toPage(1);
        });
        //跳轉到某頁的函數
        function toPage(pn){
            $.ajax({
                //請求方式
                type : "GET", 
                //請求url
                url : "${path}/emps",
                //請求要帶的數據
                data :"pn="+pn,
                //請求成功的回調函數
                success : function(result) {
                    //1.解析JSON返回員工數據
                    build_emps_table(result);
                    //2.解析生成分頁信息(分頁條與分頁導航)
                    build_pages_info(result);
                    build_pages_nav(result);
                }
            });
        }
        //解析員工數據
        function build_emps_table(result){
            //清空表格數據
            $("#emps_table tbody").empty();
            //員工數據
            var emps = result.map.pageInfo.list;
            //使用jQuery遍歷數組，遍歷的是取出來的json數組，能夠經過開發工具查看JSON結構
            $.each(emps,function(idx,item){
                //使用jQuery生成各列
                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);
                //添加操做按鈕，經過jQuery的一些操做（例如CSS的追加CSS操做），完成按鈕的構建
                var editBtn = $("<button></button>").addClass("btn btn-info btn-sm")
                                .append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
                                .append("編輯");
                var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm")
                .append($("<span></span>").addClass("glyphicon glyphicon-trash"))
                .append("刪除");
                var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
                //鏈式操做完成列的添加（鏈式操做因爲jQuery返回的是原元素）
                $("<tr></tr>").append(empIdTd)
                    .append(empNameTd)
                    .append(genderTd)
                    .append(emailTd)
                    .append(deptNameTd)
                    .append(deptNameTd)
                    .append(btnTd)
                    .appendTo($("#emps_table tbody"));
            });
        }
        //生成分頁信息
        function build_pages_info(result){
            //清空分頁數據
            $("#page_info").empty();
            //當前頁
            var currentPage = result.map.pageInfo.pageNum;
            //總頁數
            var totalPage = result.map.pageInfo.pages;
            //總記錄數
            var totalCount = result.map.pageInfo.total;
            $("#page_info").append("當前第："+currentPage+"頁，"+"總共："+totalPage+"頁，"+"總共："+totalCount+"條記錄");
        }
        //生成分頁導航信息
        function build_pages_nav(result){
            //清空分頁導航信息
            $("#page_nav").empty();
            //導航條外層的Ul
            var navUl = $("<ul></ul>").addClass("pagination");
            //首頁
            var firstPageLi = $("<li></li>").append($("<a></a>").append("首頁").attr("href","#"));
            //前一頁
            var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
            //判斷是否有首頁
            if(result.map.pageInfo.hasPreviousPage == false){
                firstPageLi.addClass("disabled");
                prePageLi.addClass("disabled");
            }
            //添加首頁和前一頁翻頁的單機事件
            firstPageLi.click(function(){
                toPage(1);
            });
            prePageLi.click(function(){
                toPage(result.map.pageInfo.pageNum-1);
            });
            //後一頁
            var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
            //末頁
            var lastPageLi = $("<li></li>").append($("<a></a>").append("末頁").attr("href","#"));
            //判斷是否有末頁
            if(result.map.pageInfo.hasNextPage == false){
                lastPageLi.addClass("disabled");
                nextPageLi.addClass("disabled");
            }
            //添加末頁和後一頁翻頁的單機事件
            lastPageLi.click(function(){
                toPage(result.map.pageInfo.pages);
            });
            nextPageLi.click(function(){
                toPage(result.map.pageInfo.pageNum+1);
            });
            //添加到ul
            navUl.append(firstPageLi).append(prePageLi);
            
            //遍歷頁碼數
            $.each(result.map.pageInfo.navigatepageNums,function(idx,item){
                var numLi = $("<li></li>").append($("<a></a>").append(item));
                //若是當前頁爲正在遍歷的頁，則高亮顯示，採用增長類的方法完成
                if(result.map.pageInfo.pageNum == item){
                    numLi.addClass("active");
                }
                //給每一個頁碼添加單擊綁定事件
                numLi.click(function(){
                    toPage(item);
                });
                navUl.append(numLi);
            });
            navUl.append(nextPageLi).append(lastPageLi);
            var navEle = $("<nav></nav>").append(navUl);
            $("#page_nav").append(navEle);
        }
    </script>
</body>
</html>
View Code

 

　　　　爲了頁碼的正常顯示，咱們在插件中配置一個合理化的參數，參數的具體做用請參見文檔：

<!-- 分頁插件的使用 -->
    <plugins>
        <plugin interceptor="com.github.pagehelper.PageInterceptor">
            <!-- 配置合理化參數 -->
            <property name="reasonable" value="true"/>
        </plugin>
    </plugins>

 

　　　　咱們把前面的代碼稍微優化一下，若是按鈕禁用了，就不綁定事件了，可用時才綁定事件：

<%@ 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("path",request.getContextPath());
%>
<!-- 推薦以 / 開始的相對路徑（以服務器的根路徑爲相對路徑） -->
<link href="${path}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 <!-- 先引入jQuery，再引入js -->
<script type="text/javascript" src="${path}/static/bootstrap/js/jquery.min.js"> </script>
<script src="${path}/static/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <!-- 分爲四大行 -->
        <!-- 標題 -->
        <div class="row">
             <div class="col-md-12">
                <font size="20">SSM-CRUD</font>
             </div>
        </div>
        <!-- 按鈕 -->
        <div class="row">
            <!-- 偏移4列 -->
            <div class="col-md-4 col-md-offset-8">
                <button type="button" class="btn btn-primary ">新增</button>
                <button type="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>empEmail</th>
                            <th>gender</th>
                            <th>deptName</th>
                            <th>操做</th>
                        </tr>
                    </thead>
                    <tbody>
                    
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 分頁信息 -->
        <div class="row">
            <!-- 分頁文字信息，其中分頁信息都封裝在pageInfo中 -->
            <div class="col-md-6" id="page_info">
                
            </div>
            <!-- 分頁條 -->
            <div class="col-md-6" id="page_nav">
                
            </div>
        </div>
    </div>
    <script type="text/javascript">
        //頁面加載完成後直接發送ajax請求，取得分頁數據
        $(function(){
            //加載完頁面就經過這個函數發ajax請求
            toPage(1);
        });
        //跳轉到某頁的函數
        function toPage(pn){
            $.ajax({
                //請求方式
                type : "GET", 
                //請求url
                url : "${path}/emps",
                //請求要帶的數據
                data :"pn="+pn,
                //請求成功的回調函數
                success : function(result) {
                    //1.解析JSON返回員工數據
                    build_emps_table(result);
                    //2.解析生成分頁信息(分頁條與分頁導航)
                    build_pages_info(result);
                    build_pages_nav(result);
                }
            });
        }
        //解析員工數據
        function build_emps_table(result){
            //清空表格數據
            $("#emps_table tbody").empty();
            //員工數據
            var emps = result.map.pageInfo.list;
            //使用jQuery遍歷數組，遍歷的是取出來的json數組，能夠經過開發工具查看JSON結構
            $.each(emps,function(idx,item){
                //使用jQuery生成各列
                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);
                //添加操做按鈕，經過jQuery的一些操做（例如CSS的追加CSS操做），完成按鈕的構建
                var editBtn = $("<button></button>").addClass("btn btn-info btn-sm")
                                .append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
                                .append("編輯");
                var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm")
                .append($("<span></span>").addClass("glyphicon glyphicon-trash"))
                .append("刪除");
                var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
                //鏈式操做完成列的添加（鏈式操做因爲jQuery返回的是原元素）
                $("<tr></tr>").append(empIdTd)
                    .append(empNameTd)
                    .append(genderTd)
                    .append(emailTd)
                    .append(deptNameTd)
                    .append(deptNameTd)
                    .append(btnTd)
                    .appendTo($("#emps_table tbody"));
            });
        }
        //生成分頁信息
        function build_pages_info(result){
            //清空分頁數據
            $("#page_info").empty();
            //當前頁
            var currentPage = result.map.pageInfo.pageNum;
            //總頁數
            var totalPage = result.map.pageInfo.pages;
            //總記錄數
            var totalCount = result.map.pageInfo.total;
            $("#page_info").append("當前第："+currentPage+"頁，"+"總共："+totalPage+"頁，"+"總共："+totalCount+"條記錄");
        }
        //生成分頁導航信息
        function build_pages_nav(result){
            //清空分頁導航信息
            $("#page_nav").empty();
            //導航條外層的Ul
            var navUl = $("<ul></ul>").addClass("pagination");
            //首頁
            var firstPageLi = $("<li></li>").append($("<a></a>").append("首頁").attr("href","#"));
            //前一頁
            var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
            //判斷是否有首頁
            if(result.map.pageInfo.hasPreviousPage == false){
                firstPageLi.addClass("disabled");
                prePageLi.addClass("disabled");
            }else{
                //添加首頁和前一頁翻頁的單機事件
                firstPageLi.click(function(){
                    toPage(1);
                });
                prePageLi.click(function(){
                    toPage(result.map.pageInfo.pageNum-1);
                });
            }
            
            //後一頁
            var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
            //末頁
            var lastPageLi = $("<li></li>").append($("<a></a>").append("末頁").attr("href","#"));
            //判斷是否有末頁
            if(result.map.pageInfo.hasNextPage == false){
                lastPageLi.addClass("disabled");
                nextPageLi.addClass("disabled");
            }else{
                //添加末頁和後一頁翻頁的單機事件
                lastPageLi.click(function(){
                    toPage(result.map.pageInfo.pages);
                });
                nextPageLi.click(function(){
                    toPage(result.map.pageInfo.pageNum+1);
                });
            }
            
            //添加到ul
            navUl.append(firstPageLi).append(prePageLi);
            
            //遍歷頁碼數
            $.each(result.map.pageInfo.navigatepageNums,function(idx,item){
                var numLi = $("<li></li>").append($("<a></a>").append(item));
                //若是當前頁爲正在遍歷的頁，則高亮顯示，採用增長類的方法完成
                if(result.map.pageInfo.pageNum == item){
                    numLi.addClass("active");
                }
                //給每一個頁碼添加單擊綁定事件
                numLi.click(function(){
                    toPage(item);
                });
                navUl.append(numLi);
            });
            navUl.append(nextPageLi).append(lastPageLi);
            var navEle = $("<nav></nav>").append(navUl);
            $("#page_nav").append(navEle);
        }
    </script>
</body>
</html>
View Code

 

 　　　　至此，查詢完成！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程