Maven+ajax+SSM實現查詢

時間 2020-04-18

標籤 maven+ajax+ssm maven ajax ssm 實現查詢欄目 Maven 简体版

原文原文鏈接

二、尚硅谷_SSM高級整合_使用ajax操做實現頁面的查詢功能

1六、尚硅谷_SSM高級整合_查詢_返回分頁的json數據.avijavascript

在上一章節的操做中咱們是將PageInfo對象存儲在request域中，而後list頁面解析request域中的對象實現信息的顯示。可是上面的操做只適合客戶端是瀏覽器的狀況。若是客戶端是android，也要查詢人員列表信息，這個時候服務器返回的數據應該是json數據，因此咱們須要對後臺的控制層進行改造。返回的數據應該是json數據，json數據瀏覽器能夠解析，android客戶端也能夠解析css

控制層要返回json數據須要使用到@reponsebody，須要用到jack jar包html

<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.8.8</version>
</dependency>java

這裏咱們返回的json數據：應該包括返回狀態、業務處理結果等，咱們封裝這樣一個返回json數據的通用類jquery

package com.atguigu.crud.bean;

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

public class Msg {
    
    //狀態碼 100表示狀態成功 200表示狀態異常
    private int code;
    
    //返回的提示信息
    private String msg;
    
    //返回的業務數據，封裝到hashmap中
    
    private Map<String,Object> extend = new HashMap<String, Object>();

    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> getExtend() {
        return extend;
    }

    public void setExtend(Map<String, Object> extend) {
        this.extend = extend;
    }

    
    
    
    

}

EmployeeController.javaandroid

package com.atguigu.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 org.springframework.web.bind.annotation.ResponseBody;

import com.atguigu.crud.bean.Employee;
import com.atguigu.crud.bean.Msg;
import com.atguigu.crud.dao.EmployeeMapper;
import com.atguigu.crud.service.EmployeeService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;

/**
 * 
 * 處理員工的增刪改查操做
 * */
@Controller
public class EmployeeController {
   
    @Autowired
    private EmployeeService employeeService;

    
    /**
     * 負責將PageInfo對象轉化成json對象
     * */
    @RequestMapping("/emps")
    @ResponseBody
    public Msg getEmpsWithJson(@RequestParam(value="pn",defaultValue ="1") Integer pn,Model model) {        
        //使用mybatis分頁插件 pn表示當前查詢的頁數，5表示每頁顯示第幾條
        System.out.println("EmployeeController is called");
        PageHelper.startPage(pn, 5);
        //在PageHelper.startPage(pn, 5);後面的查詢語句就能夠實現分頁查詢
        List<Employee> list = employeeService.getAll();
        //咱們將查詢的結果封裝到PageInfo對象之中,5表示右下角導航欄的數目是5
        PageInfo info = new PageInfo(list,5);
         Msg msg = new Msg();
         msg.setCode(100);
         msg.setMsg("業務操做成功");
         msg.getExtend().put("pageInfo", info);
        return msg;
    }
}

對應的json數據以下：git

{"code":100,"msg":"業務操做成功","extend":{"pageInfo":{"pageNum":1,"pageSize":5,"size":5,"startRow":1,"endRow":5,"total":1000,"pages":200,"list":[{"empId":1,"empName":"0d9a40","gender":"M","email":"0d9a40@qq.com","dId":1,"department":{"deptId":1,"deptName":"研發部"}},{"empId":2,"empName":"cea4a1","gender":"M","email":"cea4a1@qq.com","dId":1,"department":{"deptId":1,"deptName":"研發部"}},{"empId":3,"empName":"8f5ee2","gender":"M","email":"8f5ee2@qq.com","dId":1,"department":{"deptId":1,"deptName":"研發部"}},{"empId":4,"empName":"9c96c3","gender":"M","email":"9c96c3@qq.com","dId":1,"department":{"deptId":1,"deptName":"研發部"}},{"empId":5,"empName":"3f2c14","gender":"M","email":"3f2c14@qq.com","dId":1,"department":{"deptId":1,"deptName":"研發部"}}],"prePage":0,"nextPage":2,"isFirstPage":true,"isLastPage":false,"hasPreviousPage":false,"hasNextPage":true,"navigatePages":5,"navigatepageNums":[1,2,3,4,5],"navigateFirstPage":1,"navigateLastPage":5,"lastPage":5,"firstPage":1}}}

     
{
    "code":100,
    "msg":"業務操做成功",
    "extend":{
        "pageInfo":{
            "pageNum":1,
            "pageSize":5,
            "size":5,
            "startRow":1,
            "endRow":5,
            "total":1000,
            "pages":200,
            "list":[
                {
                    "empId":1,
                    "empName":"0d9a40",
                    "gender":"M",
                    "email":"0d9a40@qq.com",
                    "dId":1,
                    "department":{
                        "deptId":1,
                        "deptName":"研發部"
                    }
                },
                {
                    "empId":2,
                    "empName":"cea4a1",
                    "gender":"M",
                    "email":"cea4a1@qq.com",
                    "dId":1,
                    "department":{
                        "deptId":1,
                        "deptName":"研發部"
                    }
                },
                {
                    "empId":3,
                    "empName":"8f5ee2",
                    "gender":"M",
                    "email":"8f5ee2@qq.com",
                    "dId":1,
                    "department":{
                        "deptId":1,
                        "deptName":"研發部"
                    }
                },
                {
                    "empId":4,
                    "empName":"9c96c3",
                    "gender":"M",
                    "email":"9c96c3@qq.com",
                    "dId":1,
                    "department":{
                        "deptId":1,
                        "deptName":"研發部"
                    }
                },
                {
                    "empId":5,
                    "empName":"3f2c14",
                    "gender":"M",
                    "email":"3f2c14@qq.com",
                    "dId":1,
                    "department":{
                        "deptId":1,
                        "deptName":"研發部"
                    }
                }
            ],
            "prePage":0,
            "nextPage":2,
            "isFirstPage":true,
            "isLastPage":false,
            "hasPreviousPage":false,
            "hasNextPage":true,
            "navigatePages":5,
            "navigatepageNums":[
                1,
                2,
                3,
                4,
                5
            ],
            "navigateFirstPage":1,
            "navigateLastPage":5,
            "lastPage":5,
            "firstPage":1
        }
    }
}

©2014 JSON.cn All

1七、尚硅谷_SSM高級整合_查詢_構建員工列表.avigithub

接下來咱們就要對index.jsp頁面進行修改，進入到該頁面發起ajax請求得到數據，而後解析該數據在頁面上顯示出來web

咱們修改咱們的index.jspajax

<%@ 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>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
    pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- web路徑：
不以/開始的相對路徑，找資源，以當前資源的路徑爲基準，常常容易出問題。
以/開始的相對路徑，找資源，以服務器的路徑爲標準(http://localhost:3306)；須要加上項目名
        http://localhost:3306/crud
 -->
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-2.1.1.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-12">
                <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>gender</th>
                        <th>email</th>
                        <th>deptName</th>
                        <th>操做</th>
                    </tr>
                </thead>
                <tbody>
                   
                
                </tbody>
                    
                </table>
            </div>
        </div>

        <!-- 顯示分頁信息 -->
        <div class="row">
            <!--分頁文字信息  -->
            <div class="col-md-6">當前頁,總
                頁,總 條記錄</div>
     
     <!-- 當頁面加載完成以後發起ajax請求得到數據 ，不清楚的看鋒利jquery教程至關的經典-->
     <script type="text/javascript">
     
     $(function(){
         
         $.ajax({
             url:"${APP_PATH}/emps",
             data:"pn=1",
             type:"GET",
             dataType:"json",
             success:function(result){
                 //console.log(result);
                 //解析數據在表格中將員工數據顯示出來
                 build_emps_table(result);
                 //解析數據在右下角將導航信息顯示出來
             }
         });
      
         
         //解析服務器返回的json數據，並在員工表中顯示出來
         function build_emps_table(result){
             //第一步：得到全部的員工數據
             var emps = result.extend.pageInfo.list;
             //第二步：對員工數據進行遍歷顯示出來
             $.each(emps,function(index,item){
                 var empIdTd = $("<td></td>").append(item.empId);
                 var empNameTd = $("<td></td>").append(item.empName);
                 var gender = item.gender == 'M'?"男":"女";
                 var genderTd = $("<td></td>").append(gender);
                 var emailTd = $("<td></td>").append(item.email);
                 var departmentNameTd = $("<td></td>").append(item.department.deptName);
                 //添加編輯按鈕
                     var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                                .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("編輯");
                     var delBtn =  $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("刪除");

                    var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
                 //將上面的table表td數據添加到tr中，這裏是一個鏈式操做
                 $("<tr></tr>").append(empIdTd)
                 .append(empNameTd)
                 .append(genderTd)
                 .append(emailTd)
                 .append(departmentNameTd)
                 .append(btnTd)
                 .appendTo("#emps_table tbody");
                 //"#emps_table tbody"表示選取id爲emps_table下的全部的<tbody>的元素，不清楚的看鋒利的jquery書籍至關的經典
                 
                 
             });
             
         }
         
     });
     
    
     </script>
        
    </div>
</body>
</html>

數據的顯示效果以下：

至關的經典

1八、尚硅谷_SSM高級整合_查詢_構建分頁條.avi

上面咱們在表格中將員工的數據顯示出來了，接下面咱們要構建右下角導航欄的顯示

導航欄咱們要參考bootstrap框架下的來進行封裝

具體的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>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
    pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- web路徑：
不以/開始的相對路徑，找資源，以當前資源的路徑爲基準，常常容易出問題。
以/開始的相對路徑，找資源，以服務器的路徑爲標準(http://localhost:3306)；須要加上項目名
        http://localhost:3306/crud
 -->
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-2.1.1.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-12">
                <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>gender</th>
                        <th>email</th>
                        <th>deptName</th>
                        <th>操做</th>
                    </tr>
                </thead>
                <tbody>
                   
                
                </tbody>
                    
                </table>
            </div>
        </div>

        <!-- 顯示分頁信息 -->
        <div class="row">
            <!--分頁文字信息  -->
            <div class="col-md-6" id="page_info_area"></div>
            <!-- 分頁條信息 -->
            <div class="col-md-6" id="page_nav_area"></div>
                

        </div>
</div>
     
     <!-- 當頁面加載完成以後發起ajax請求得到數據 ，不清楚的看鋒利jquery教程至關的經典-->
     <script type="text/javascript">
     
     $(function(){
         
         $.ajax({
             url:"${APP_PATH}/emps",
             data:"pn=1",
             type:"GET",
             dataType:"json",
             success:function(result){
                 //console.log(result);
                 //解析數據在表格中將員工數據顯示出來
                 build_emps_table(result);
                 //將左下角的分頁信息顯示出來
                  build_page_info(result);
                 //解析數據在右下角將導航信息顯示出來
                 build_page_nav(result);
             }
         });
      
         
         //解析服務器返回的json數據，並在員工表中顯示出來
         function build_emps_table(result){
             //第一步：得到全部的員工數據
             var emps = result.extend.pageInfo.list;
             //第二步：對員工數據進行遍歷顯示出來
             $.each(emps,function(index,item){
                 var empIdTd = $("<td></td>").append(item.empId);
                 var empNameTd = $("<td></td>").append(item.empName);
                 var gender = item.gender == 'M'?"男":"女";
                 var genderTd = $("<td></td>").append(gender);
                 var emailTd = $("<td></td>").append(item.email);
                 var departmentNameTd = $("<td></td>").append(item.department.deptName);
                 //添加編輯按鈕
                     var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                                .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("編輯");
                     var delBtn =  $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("刪除");

                    var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
                 //將上面的table表td數據添加到tr中，這裏是一個鏈式操做
                 $("<tr></tr>").append(empIdTd)
                 .append(empNameTd)
                 .append(genderTd)
                 .append(emailTd)
                 .append(departmentNameTd)
                 .append(btnTd)
                 .appendTo("#emps_table tbody");
                 //"#emps_table tbody"表示選取id爲emps_table下的全部的<tbody>的元素，不清楚的看鋒利的jquery書籍至關的經典
                 
                 
             });
             
         }
         
         //解析顯示分頁信息
         function build_page_info(result){
             $("#page_info_area").append("當前第"+result.extend.pageInfo.pageNum+"頁,"+"總共"+result.extend.pageInfo.pages+"頁,"+"總共"+
                     result.extend.pageInfo.total+"條記錄");
             
         }
         //解析右下角的導航欄
         function build_page_nav(result){
                //page_nav_area
             $("#page_nav_area").empty();
             var ul = $("<ul></ul>").addClass("pagination");            
             //構建元素
             var firstPageLi = $("<li></li>").append($("<a></a>").append("首頁").attr("href","#"));
             var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));                                     
             var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
             var lastPageLi = $("<li></li>").append($("<a></a>").append("末頁").attr("href","#"));                                                
             //添加首頁和前一頁 的提示
             ul.append(firstPageLi).append(prePageLi);
             //1,2，3遍歷給ul中添加頁碼提示
             $.each(result.extend.pageInfo.navigatepageNums,function(index,item){
                 var numLi = $("<li></li>").append($("<a></a>").append(item));
                 ul.append(numLi);
             });
             //添加下一頁和末頁 的提示
             ul.append(nextPageLi).append(lastPageLi);        
             //把ul加入到nav
             var navEle = $("<nav></nav>").append(ul);
             navEle.appendTo("#page_nav_area");
         }
         
     });
     
    
     </script>
        
    </div>
</body>
</html>

具體的頁面顯示效果以下：

1九、尚硅谷_SSM高級整合_查詢_分頁顯示完整細節.avi

主要實現下面的功能：

一、當前頁面高亮顯示

二、當點擊頁面的時候使用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>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
    pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- web路徑：
不以/開始的相對路徑，找資源，以當前資源的路徑爲基準，常常容易出問題。
以/開始的相對路徑，找資源，以服務器的路徑爲標準(http://localhost:3306)；須要加上項目名
        http://localhost:3306/crud
 -->
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-2.1.1.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-12">
                <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>gender</th>
                        <th>email</th>
                        <th>deptName</th>
                        <th>操做</th>
                    </tr>
                </thead>
                <tbody>
                   
                
                </tbody>
                    
                </table>
            </div>
        </div>

        <!-- 顯示分頁信息 -->
        <div class="row">
            <!--分頁文字信息  -->
            <div class="col-md-6" id="page_info_area"></div>
            <!-- 分頁條信息 -->
            <div class="col-md-6" id="page_nav_area"></div>
                

        </div>
</div>
     
     <!-- 當頁面加載完成以後發起ajax請求得到數據 ，不清楚的看鋒利jquery教程至關的經典-->
     <script type="text/javascript">
     
     $(function(){
         //頁面加載完畢，去首頁得到對應的數據
         to_page(1);
        
         });
      
     
     //使用ajax到後臺服務器查詢數據
     function to_page(pn){
        $.ajax({
            url:"${APP_PATH}/emps",
            data:"pn="+pn,
            type:"GET",
            success:function(result){
                //console.log(result);
                //一、解析並顯示員工數據
                build_emps_table(result);
                //二、解析並顯示分頁信息
                build_page_info(result);
                //三、解析顯示分頁條數據
                build_page_nav(result);
            }
        });
    }
              
     
         
         //解析服務器返回的json數據，並在員工表中顯示出來
         function build_emps_table(result){
             //在構建以前先清空全部的數據
             $("#emps_table tbody").empty();
             //第一步：得到全部的員工數據
             var emps = result.extend.pageInfo.list;
             //第二步：對員工數據進行遍歷顯示出來
             $.each(emps,function(index,item){
                 var empIdTd = $("<td></td>").append(item.empId);
                 var empNameTd = $("<td></td>").append(item.empName);
                 var gender = item.gender == 'M'?"男":"女";
                 var genderTd = $("<td></td>").append(gender);
                 var emailTd = $("<td></td>").append(item.email);
                 var departmentNameTd = $("<td></td>").append(item.department.deptName);
                 //添加編輯按鈕
                     var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                                .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("編輯");
                     var delBtn =  $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("刪除");

                    var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
                 //將上面的table表td數據添加到tr中，這裏是一個鏈式操做
                 $("<tr></tr>").append(empIdTd)
                 .append(empNameTd)
                 .append(genderTd)
                 .append(emailTd)
                 .append(departmentNameTd)
                 .append(btnTd)
                 .appendTo("#emps_table tbody");
                 //"#emps_table tbody"表示選取id爲emps_table下的全部的<tbody>的元素，不清楚的看鋒利的jquery書籍至關的經典
                 
                 
             });
             
         }
         
         //解析顯示分頁信息
         function build_page_info(result){
             $("#page_info_area").empty();
             $("#page_info_area").append("當前第"+result.extend.pageInfo.pageNum+"頁,"+"總共"+result.extend.pageInfo.pages+"頁,"+"總共"+
                     result.extend.pageInfo.total+"條記錄");
             
         }
         //解析右下角的導航欄
         function build_page_nav(result){
                //page_nav_area
             $("#page_nav_area").empty();
             var ul = $("<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.extend.pageInfo.hasPreviousPage == false){
                 firstPageLi.addClass("disabled");
                 prePageLi.addClass("disabled");
             }
             //給前一頁和首頁添加按鈕點擊事件
             firstPageLi.click(function(){
                 to_page(1);
                 
             });
             
             prePageLi.click(function(){
                 //跳轉到當前頁的前一頁
                 to_page(result.extend.pageInfo.pageNum-1);
                 
             });
             
             var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
             var lastPageLi = $("<li></li>").append($("<a></a>").append("末頁").attr("href","#"));
             
             //若是沒有下一頁不能被點擊
             if(result.extend.pageInfo.hasNextPage == false){
                 nextPageLi.addClass("disabled");
                 lastPageLi.addClass("disabled");
             }
             
             //給下一頁和尾頁添加點擊事件
             nextPageLi.click(function(){
                 to_page(result.extend.pageInfo.pageNum+1);
             });
             
             lastPageLi.click(function(){
                 to_page(result.extend.pageInfo.pages);
             });
             
             //添加首頁和前一頁 的提示
             ul.append(firstPageLi).append(prePageLi);
             //1,2，3遍歷給ul中添加頁碼提示
             $.each(result.extend.pageInfo.navigatepageNums,function(index,item){
                 var numLi = $("<li></li>").append($("<a></a>").append(item));
                 //判斷當前遍歷的若是是當前正在顯示的頁面，應該高亮顯示
                 if(result.extend.pageInfo.pageNum == item){
                     numLi.addClass("active");
                 }
                 //添加點擊事件
                 numLi.click(function(){
                     //點擊的時候從新使用ajax到服務器查詢數據
                     to_page(item);
                 });
                 ul.append(numLi);
             });
             //添加下一頁和末頁 的提示
             ul.append(nextPageLi).append(lastPageLi);        
             //把ul加入到nav
             var navEle = $("<nav></nav>").append(ul);
             navEle.appendTo("#page_nav_area");
         }
         

     
    
     </script>
        
    </div>
</body>
</html>

代碼顯示的效果以下所示：

項目代碼的下載地址爲：

連接：https://pan.baidu.com/s/1O3TMKCeNS9-MMMg_KYF51w 密碼：mh6l

轉載自：https://www.cnblogs.com/kebibuluan/p/9011765.html