Spring Data Jpa+SpringMVC+Jquery.pagination.js實現分頁示例

2024-07-13 10:15:27

字體：大中小

來源：轉載

供稿：網友

本博客介紹基于Spring Data這款orm框架加上 Jquery.pagination插件實現的分頁功能。

本博客是基于一款正在開發中的github開源項目的，項目代碼地址：https://github.com/u014427391/jeeplatform

歡迎star(收藏)或者可以下載去學習，還在開發…

介紹一下Spring Data框架

spring Data : Spring 的一個子項目。用于簡化數據庫訪問，支持NoSQL 和關系數據存儲。

下面給出SpringData 項目所支持 NoSQL 存儲：

* MongoDB （文檔數據庫）
* Neo4j（圖形數據庫）
* Redis（鍵/值存儲）
* Hbase（列族數據庫）

SpringData 項目所支持的關系數據存儲技術：

* JDBC
* JPA

JPA Spring Data : 致力于減少數據訪問層 (DAO) 的開發量。開發者只要寫好持久層接口就好，然后其它的框架會幫程序員實現。

開發步驟：

【Spring Data實現數據獲取】

本項目是采用maven的，所以可以參考一下我的maven配置：

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"     xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">  <parent>    <artifactId>muses</artifactId>    <groupId>org.muses</groupId>    <version>1.0-SNAPSHOT</version>  </parent>  <modelVersion>4.0.0</modelVersion>  <artifactId>jeeplatform-admin</artifactId>  <packaging>war</packaging>  <name>jeeplatform-admin Maven Webapp</name>  <url>http://maven.apache.org</url>  <properties>    <spring.version>4.1.5.RELEASE</spring.version>    <spring-data-jpa.version>1.4.2.RELEASE</spring-data-jpa.version>    <spring-data-commons.version>1.6.2.RELEASE</spring-data-commons.version>    <hibernate.version>4.3.8.Final</hibernate.version>    <shiro.version>1.2.3</shiro.version>    <lucene.version>4.7.2</lucene.version>    <druid.version>1.0.9</druid.version>    <poi.version>3.7</poi.version>  </properties>  <dependencies>    <!-- module start -->    <dependency>      <groupId>org.muses</groupId>      <artifactId>jeeplatform-core</artifactId>      <version>${jeeplatform.core.version}</version>    </dependency>    <dependency>      <groupId>org.muses</groupId>      <artifactId>jeeplatform-common</artifactId>      <version>1.0-SNAPSHOT</version>    </dependency>    <dependency>      <groupId>org.muses</groupId>      <artifactId>jeeplatform-oss</artifactId>      <version>${jeeplatform.oss.version}</version>    </dependency>    <dependency>      <groupId>org.muses</groupId>      <artifactId>jeeplatform-upms</artifactId>      <version>1.0-SNAPSHOT</version>    </dependency>    <!-- moudle end-->    <!-- servlet start-->    <dependency>      <groupId>javax.servlet</groupId>      <artifactId>servlet-api</artifactId>      <version>2.5</version>      <scope>provided</scope>    </dependency>    <!-- servlet end -->    <!-- jstl start-->    <dependency>      <groupId>jstl</groupId>      <artifactId>jstl</artifactId>      <version>1.2</version>    </dependency>    <dependency>      <groupId>taglibs</groupId>      <artifactId>standard</artifactId>      <version>1.1.2</version>    </dependency>    <!-- jstl end -->    <!-- log4j start-->    <dependency>      <groupId>log4j</groupId>      <artifactId>log4j</artifactId>      <version>${log4j.version}</version>    </dependency>    <!-- log4j end-->    <!-- json解析需要的jar start-->    <dependency>      <groupId>commons-beanutils</groupId>      <artifactId>commons-beanutils</artifactId>      <version>1.8.3</version>    </dependency>    <dependency>      <groupId>commons-collections</groupId>      <artifactId>commons-collections</artifactId>      <version>3.2.1</version>    </dependency>    <dependency>      <groupId>net.sf.ezmorph</groupId>      <artifactId>ezmorph</artifactId>      <version>1.0.6</version>    </dependency>    <dependency>      <groupId>commons-lang</groupId>      <artifactId>commons-lang</artifactId>      <version>2.5</version>    </dependency>    <dependency>      <groupId>commons-logging</groupId>      <artifactId>commons-logging</artifactId>      <version>1.2</version>    </dependency>    <dependency>      <groupId>net.sf.json-lib</groupId>      <artifactId>json-lib</artifactId>      <version>2.4</version>      <type>jar</type>      <classifier>jdk15</classifier>      <scope>compile</scope>    </dependency>    <!-- json解析需要的jar end -->    <!-- mysql start-->    <dependency>      <groupId>mysql</groupId>      <artifactId>mysql-connector-java</artifactId>      <version>${mysql.version}</version>    </dependency>    <!-- mysql end-->    <!-- commons -->    <dependency>      <groupId>commons-io</groupId>      <artifactId>commons-io</artifactId>      <version>2.0.1</version>    </dependency>    <dependency>      <groupId>commons-fileupload</groupId>      <artifactId>commons-fileupload</artifactId>      <version>1.2.2</version>    </dependency>    <!-- commons -->    <!-- spring framework start-->    <dependency>      <groupId>org.springframework</groupId>      <artifactId>spring-core</artifactId>      <version>${spring.version}</version>    </dependency>    <dependency>      <groupId>org.springframework</groupId>      <artifactId>spring-beans</artifactId>      <version>${spring.version}</version>    </dependency>    <dependency>      <groupId>org.springframework</groupId>      <artifactId>spring-context</artifactId>      <version>${spring.version}</version>    </dependency>    <dependency>      <groupId>org.springframework</groupId>      <artifactId>spring-context-support</artifactId>      <version>${spring.version}</version>    </dependency>    <dependency>      <groupId>org.springframework</groupId>      <artifactId>spring-jdbc</artifactId>      <version>${spring.version}</version>    </dependency>    <dependency>      <groupId>org.springframework</groupId>      <artifactId>spring-tx</artifactId>      <version>${spring.version}</version>    </dependency>    <dependency>      <groupId>org.springframework</groupId>      <artifactId>spring-test</artifactId>      <version>${spring.version}</version>      <scope>test</scope>    </dependency>    <dependency>      <groupId>org.springframework</groupId>      <artifactId>spring-web</artifactId>      <version>${spring.version}</version>    </dependency>    <!-- spring framework end -->    <!-- spring aop start-->    <dependency>      <groupId>org.springframework</groupId>      <artifactId>spring-aop</artifactId>      <version>${spring.version}</version>    </dependency>    <dependency>      <groupId>org.aspectj</groupId>      <artifactId>aspectjweaver</artifactId>      <version>1.6.10</version>    </dependency>    <!-- spring aop end -->    <!-- springMVC start-->    <dependency>      <groupId>org.springframework</groupId>      <artifactId>spring-webmvc</artifactId>      <version>${spring.version}</version>    </dependency>    <!-- springMVC end -->    <!-- spring data start-->    <dependency>      <groupId>org.springframework</groupId>      <artifactId>spring-orm</artifactId>      <version>${spring.version}</version>    </dependency>    <dependency>      <groupId>org.springframework.data</groupId>      <artifactId>spring-data-jpa</artifactId>      <version>${spring-data-jpa.version}</version>    </dependency>    <dependency>      <groupId>org.springframework.data</groupId>      <artifactId>spring-data-commons</artifactId>      <version>${spring-data-commons.version}</version>    </dependency>    <!-- spring data end -->    <!-- hibernate jpa start-->    <dependency>      <groupId>org.hibernate.javax.persistence</groupId>      <artifactId>hibernate-jpa-2.1-api</artifactId>      <version>1.0.0.Final</version>    </dependency>    <dependency>      <groupId>org.hibernate</groupId>      <artifactId>hibernate-core</artifactId>      <version>${hibernate.version}</version>    </dependency>    <dependency>      <groupId>org.hibernate</groupId>      <artifactId>hibernate-entitymanager</artifactId>      <version>${hibernate.version}</version>    </dependency>    <!-- hibernate jpa end -->    <!-- hibernate echache start-->    <dependency>      <groupId>org.slf4j</groupId>      <artifactId>slf4j-api</artifactId>      <version>1.6.1</version>    </dependency>    <dependency>      <groupId>net.sf.ehcache</groupId>      <artifactId>ehcache-core</artifactId>      <version>2.5.0</version>    </dependency>    <dependency>      <groupId>org.hibernate</groupId>      <artifactId>hibernate-ehcache</artifactId>      <version>${hibernate.version}</version>    </dependency>    <!-- hibernate echache end -->    <!-- 阿里的連接池druid start-->    <dependency>      <groupId>com.alibaba</groupId>      <artifactId>druid</artifactId>      <version>${druid.version}</version>    </dependency>    <!-- 阿里的連接池druid end-->    <!--shiro start-->    <dependency>      <groupId>org.apache.shiro</groupId>      <artifactId>shiro-all</artifactId>      <version>${shiro.version}</version>    </dependency>    <!-- shiro end-->    <!-- velocity start-->    <dependency>      <groupId>org.apache.velocity</groupId>      <artifactId>velocity</artifactId>      <version>1.6</version>    </dependency>    <dependency>      <groupId>org.apache.velocity</groupId>      <artifactId>velocity-tools</artifactId>      <version>2.0</version>    </dependency>    <!-- velocity end-->    <!-- lucene全文搜素引擎 start-->    <dependency>      <groupId>org.apache.lucene</groupId>      <artifactId>lucene-core</artifactId>      <version>${lucene.version}</version>    </dependency>    <dependency>      <groupId>org.apache.lucene</groupId>      <artifactId>lucene-analyzers-common</artifactId>      <version>${lucene.version}</version>    </dependency>    <dependency>      <groupId>org.apache.lucene</groupId>      <artifactId>lucene-queryparser</artifactId>      <version>${lucene.version}</version>    </dependency>    <dependency>      <groupId>org.apache.lucene</groupId>      <artifactId>lucene-memory</artifactId>      <version>${lucene.version}</version>    </dependency>    <dependency>      <groupId>org.apache.lucene</groupId>      <artifactId>lucene-highlighter</artifactId>      <version>${lucene.version}</version>    </dependency>    <!-- 注意IKAnalyzer沒有maven坐標,請自行添加到本地倉庫 -->    <dependency>      <groupId>org.wltea.analyzer</groupId>      <artifactId>IKAnalyzer</artifactId>      <version>2012FF_u1</version>      <scope>system</scope>      <systemPath>${basedir}/src/main/webapp/WEB-INF/lib/IKAnalyzer2012FF_u1.jar</systemPath>    </dependency>    <!-- lucene全文搜素引擎 end -->    <!-- log4j start-->    <dependency>      <groupId>log4j</groupId>      <artifactId>log4j</artifactId>      <version>${log4j.version}</version>    </dependency>    <!-- log4j end-->    <!-- json解析需要的jar start-->    <dependency>      <groupId>commons-beanutils</groupId>      <artifactId>commons-beanutils</artifactId>      <version>1.8.3</version>    </dependency>    <dependency>      <groupId>commons-collections</groupId>      <artifactId>commons-collections</artifactId>      <version>3.2.1</version>    </dependency>    <dependency>      <groupId>net.sf.ezmorph</groupId>      <artifactId>ezmorph</artifactId>      <version>1.0.6</version>    </dependency>    <dependency>      <groupId>commons-lang</groupId>      <artifactId>commons-lang</artifactId>      <version>2.5</version>    </dependency>    <dependency>      <groupId>commons-logging</groupId>      <artifactId>commons-logging</artifactId>      <version>1.2</version>    </dependency>    <dependency>      <groupId>net.sf.json-lib</groupId>      <artifactId>json-lib</artifactId>      <version>2.4</version>      <type>jar</type>      <classifier>jdk15</classifier>      <scope>compile</scope>    </dependency>    <!-- json解析需要的jar end -->    <!-- poi start-->    <dependency>      <groupId>org.apache.poi</groupId>      <artifactId>poi</artifactId>      <version>${poi.version}</version>    </dependency>    <!-- poi end-->    <!-- email start-->    <dependency>      <groupId>com.sun.mail</groupId>      <artifactId>javax.mail</artifactId>      <version>1.5.6</version>    </dependency>    <!-- email end-->  </dependencies>  <build>    <finalName>jeeplatform-admin</finalName>  </build></project>

設計好數據庫，編寫一個實體類：

SpringMVC,Jquery.pagination.js,分頁

package org.muses.jeeplatform.model.entity;import java.util.Date;import java.util.Set;import javax.persistence.CascadeType;import javax.persistence.Column;import javax.persistence.Entity;import javax.persistence.FetchType;import javax.persistence.GeneratedValue;import javax.persistence.GenerationType;import javax.persistence.Id;import javax.persistence.JoinColumn;import javax.persistence.JoinTable;import javax.persistence.ManyToMany;import javax.persistence.Table;import javax.persistence.Temporal;import javax.persistence.TemporalType;/** * 用戶信息的實體類 * @author Nicky */@Entity@Table(name="sys_user")public class User {  /** 用戶Id**/  private int id;  /** 用戶名**/  private String username;  /** 用戶密碼**/  private String password;  /** 手機號**/  private int phone;  /** 性別**/  private String sex;  /** 郵件**/  private String email;  /** 備注**/  private String mark;  /** 用戶級別**/  private String rank;  /** 最后一次時間**/  private Date lastLogin;  /** 登錄ip**/  private String loginIp;  /** 圖片路徑**/  private String imageUrl;  /** 注冊時間**/  private Date regTime;  /** 賬號是否被鎖定**/  private Boolean locked = Boolean.FALSE;  private Set<Role> roles;      @GeneratedValue(strategy=GenerationType.IDENTITY)  @Id  public int getId() {    return id;  }  public void setId(int id) {    this.id = id;  }  @Column(unique=true,length=100,nullable=false)  public String getUsername() {    return username;  }  public void setUsername(String username) {    this.username = username;  }  @Column(length=100,nullable=false)  public String getPassword() {    return password;  }  public void setPassword(String password) {    this.password = password;  }  public int getPhone() {    return phone;  }  public void setPhone(int phone) {    this.phone = phone;  }  @Column(length=6)  public String getSex() {    return sex;  }  public void setSex(String sex) {    this.sex = sex;  }  @Column(length=100)  public String getEmail() {    return email;  }  public void setEmail(String email) {    this.email = email;  }  @Column(length=30)  public String getMark() {    return mark;  }  public void setMark(String mark) {    this.mark = mark;  }  @Column(length=10)  public String getRank() {    return rank;  }  public void setRank(String rank) {    this.rank = rank;  }  @Temporal(TemporalType.DATE)  public Date getLastLogin() {    return lastLogin;  }  public void setLastLogin(Date lastLogin) {    this.lastLogin = lastLogin;  }  @Column(length=100)  public String getLoginIp() {    return loginIp;  }  public void setLoginIp(String loginIp) {    this.loginIp = loginIp;  }  @Column(length=100)  public String getImageUrl() {    return imageUrl;  }  public void setImageUrl(String imageUrl) {    this.imageUrl = imageUrl;  }  @Temporal(TemporalType.DATE)  @Column(nullable=false)  public Date getRegTime() {    return regTime;  }  public void setRegTime(Date regTime) {    this.regTime = regTime;  }   public Boolean getLocked() {    return locked;  }  public void setLocked(Boolean locked) {    this.locked = locked;  }}

編寫接口實現Spring Data框架的PagingAndSortingRepository接口

package org.muses.jeeplatform.repository;import org.muses.jeeplatform.model.entity.User;import org.springframework.data.domain.Page;import org.springframework.data.domain.Pageable;import org.springframework.data.jpa.repository.JpaRepository;import org.springframework.data.jpa.repository.Query;import org.springframework.data.repository.PagingAndSortingRepository;import org.springframework.data.repository.query.Param;import java.util.Date;public interface UserRepository extends PagingAndSortingRepository<User, Integer> {  /*User findByUsername(String username);  @Query("from User u where u.username=:username and u.password=:password")  User findByUsernameAndPassword(@Param("username") String username, @Param("password") String password);  @Query("from User u where u.id=:id")  User findById(@Param("id") int id);  @Query("from User u where date_format(u.lastLogin,'yyyy-MM-dd') between date_format((:startDate),'yyyy-MM-dd') and date_format((:endDate),'yyyy-MM-dd')")  Page<User> searchU(@Param("startDate")Date startDate,@Param("endDate")Date endDate, Pageable pageable);*/}

業務類實現：

package org.muses.jeeplatform.service;import java.util.*;import org.muses.jeeplatform.model.entity.User;import org.muses.jeeplatform.repository.UserRepository;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.data.domain.Page;import org.springframework.data.domain.PageRequest;import org.springframework.data.domain.Sort;import org.springframework.data.jpa.domain.Specification;import org.springframework.stereotype.Service;import org.springframework.transaction.annotation.Transactional;import javax.persistence.criteria.CriteriaBuilder;import javax.persistence.criteria.CriteriaQuery;/** * @description 用戶信息管理的業務類 * @author Nicky  * @date 2017年3月6日 */@Servicepublic class UserService {  @Autowired  UserRepository userRepository;  /**   * 構建PageRequest對象   * @param num   * @param size   * @param asc   * @param string   * @return   */  private PageRequest buildPageRequest(int num, int size, Sort.Direction asc,                     String string) {    return new PageRequest(num-1, size,null,string);  }  /**   * 獲取所有的菜單信息并分頁顯示   * @param pageNo   *     當前頁面數   * @param pageSize   *     每一頁面的頁數   * @return   */  @Transactional  public Page<User> findAll(int pageNo, int pageSize, Sort.Direction dir, String str){    PageRequest request = buildPageRequest(pageNo, pageSize, dir, str);    Page<User> users = userRepository.findAll(request);    return users;  }}

控制類，采用SpringMVC框架，先編寫一個baseController，實現一些通用功能的封裝：

package org.muses.jeeplatform.web.controller;import javax.servlet.http.HttpServletRequest;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.web.context.request.RequestContextHolder;import org.springframework.web.context.request.ServletRequestAttributes;import org.springframework.web.servlet.ModelAndView;public class BaseController {  Logger log = null;  /**   * 獲取日志對象   * @return   */  public Logger getInstance(){    if(log == null){      log = LoggerFactory.getLogger(BaseController.class);    }    return log;  }  /**   * 得到request對象   */  public HttpServletRequest getRequest() {    HttpServletRequest request = ((ServletRequestAttributes)RequestContextHolder.getRequestAttributes()).getRequest();    return request;  }  /**   * 得到ModelAndView   */  public ModelAndView getModelAndView(){    return new ModelAndView();  }}

控制類實現：

package org.muses.jeeplatform.web.controller;import net.sf.json.JSONArray;import net.sf.json.JSONObject;import net.sf.json.JsonConfig;import org.apache.commons.collections.map.HashedMap;import org.muses.jeeplatform.core.Constants;import org.muses.jeeplatform.core.ExcelViewWrite;import org.muses.jeeplatform.core.JavaEmailSender;import org.muses.jeeplatform.model.entity.User;import org.muses.jeeplatform.service.UserService;import org.muses.jeeplatform.utils.DateJsonValueProcessor;import org.muses.jeeplatform.utils.DateUtils;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.data.domain.Page;import org.springframework.data.domain.Sort;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 org.springframework.web.servlet.ModelAndView;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.PrintWriter;import java.util.*;/** * Created by Nicky on 2017/7/29. */@RequestMapping("/user")@Controllerpublic class UserController extends BaseController{  @Autowired  UserService userService;  /**   * 查詢所有管理員信息并分頁顯示   * @param request   * @param response   * @param model   * @return   */  @RequestMapping(value = "/queryAll",produces = "application/json;charset=UTF-8")  @ResponseBody  public ModelAndView findAll(HttpServletRequest request, HttpServletResponse response, Model model){    //當前頁    String pageIndexStr = request.getParameter("pageIndex");    //每一頁的頁數    int pageSize = Constants.PAGE_SIZE;    ModelAndView mv = this.getModelAndView();    Page<User> userPage;    if(pageIndexStr==null||"".equals(pageIndexStr)){      pageIndexStr = "0";    }    int pageIndex = Integer.parseInt(pageIndexStr);    userPage = userService.findAll(pageIndex+1, pageSize, Sort.Direction.ASC,"id");    mv.addObject("totalCount",userPage.getTotalElements());    mv.addObject("pageIndex",pageIndex);//    JsonConfig cfg = new JsonConfig();//    cfg.setExcludes(new String[]{"handler","hibernateLazyInitializer"});    JsonConfig jcg = new JsonConfig();    jcg.registerJsonValueProcessor(Date.class,        new DateJsonValueProcessor("yyyy-mm-dd"));    JSONArray jsonArray = JSONArray.fromObject(userPage.getContent(),jcg);    //System.out.println(jsonArray.toString());    mv.addObject("users",jsonArray.toString());    mv.setViewName("admin/user/sys_user_list");    return mv;  }}

【前端頁面實現】

頁面View實現，引用 jquery.pagination.js （分頁js），跟pagination.css（分頁樣式css）。

可以去這里下載：http://m.survivalescaperooms.com/article/105013.htm

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%><%  String path = request.getContextPath();  String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE html><html lang="zh-CN"><head>  <base href="<%=basePath %>" rel="external nofollow" >  <meta charset="UTF-8" />  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width,initial-scale=1">  <title>Insert title here</title>  <!-- bootstrap樣式-->  <link type="text/css" rel="stylesheet"     href="<%=basePath%>plugins/page/css/bootstrap-3.3.5.min.css" rel="external nofollow" />  <!-- jquery.pagination所需CSS -->  <link type="text/css" rel="stylesheet" href="<%=basePath%>plugins/page/css/pagination.css" rel="external nofollow" />  <script type="text/javascript" src="<%=basePath%>plugins/page/js/jquery.min.js"></script>  <!-- jquery.pagination所需JS 注意必須放在jquery.js后面 -->  <script type="text/javascript" src="<%=basePath%>plugins/page/js/jquery.pagination.js"></script>  <script type="text/javascript">    /** 分頁操作，使用jquery.pagination插件 add by nicky 20170729 start **/    //當前頁    var pageIndex = Number(${pageIndex});    //數據量    var totalCount = Number(${totalCount});    $(document).ready(function () {      //加入分頁的綁定      $("#Pagination").pagination(totalCount, {        callback : pageselectCallback,        prev_text : '< 上一頁',        next_text: '下一頁 >',        items_per_page : 6,        num_display_entries : 6,        current_page : pageIndex,        num_edge_entries : 1,        link_to: "user/queryAll?pageIndex=__id__" //分頁的js中會自動把"__id__"替換為當前的數。0      });      var html = "";      var data = ${users};      $.each(data,function(idx,obj){        var id = obj.id;        var username = obj.username;        var mark = obj.mark;        var phone = obj.phone;        var email = obj.email;        var lastLogin = obj.lastLogin;        var loginIp = obj.loginIp;        html += "<tr><td><input type='checkbox' name='id' id='id' value=" + id + " /></td>" +          "<td>"+id+"</td>"+          "<td>"+username+"</td>"+          "<td>"+mark+"</td>"+          "<td>"+phone+"</td>"+          "<td>"+email+"</td>"+          "<td>"+lastLogin+"</td>"+          "<td>"+loginIp+"</td>"+          "<td><a href='javascript:openEditDialog("+id+");' class='bounceIn'>配置角色</a>"+          "</tr>";      });      $("#content").append(html);    });    //這個事件是在翻頁時候用的    function pageselectCallback(index, jq) {    }    /** 分頁操作，使用jquery.pagination插件 add by nicky 20170729 end **/    //checkbox的全選/反選    var isCheckAll = false;    function doCheck(){      if(isCheckAll){        $("input[type='checkbox']").each(function(){          this.checked = false;        });        isCheckAll = false;      }else{        $("input[type='checkbox']").each(function(){          this.checked = true;        });        isCheckAll = true;      }    }  </script></head><body><br><div class="container-fluid">  <div class="row">    <div class="col-xs-12 col-md-12">      <div class="panel panel-default">        <div class="panel-body">          <form class="form-inline">            <input type="button" class="btn btn-default" value="發送郵件" onclick="sendEmail();" />            <input type="button" class="btn btn-default" value="發送短信" onclick="sendSms();" />            <input type="button" class="btn btn-default" value="導出Excel表" onclick="exportExcel();" />            <br><br><!--            <input type="text" class="form-control" id="keyword" placeholder="請輸入關鍵詞">                            日期從<input type="text" class="form-control" placeholder="請輸入開始日期" value="${startdate }" id="startDate" name="startdate" onclick="WdatePicker({dateFmt:'yyyy-MM-dd' ,maxDate:'#F{$dp.$D(/'endDate/')}'});"/>            到<input type="text" class="form-control" placeholder="請輸入結束日期" value="${enddate }" id="endDate" name="enddate" onclick="WdatePicker({dateFmt:'yyyy-MM-dd' ,minDate:'#F{$dp.$D(/'startDate/')}'});" />                <input type="button" class="btn btn-default" value="Search" onclick="doSearch();"/>-->          </form>          <table class="table" id="mTable">            <thead>            <tr>              <th><input type="checkbox" onclick="doCheck();" /></th>              <th>序號</th>              <th>用戶名</th>              <th>描述</th>              <th>手機</th>              <th>郵箱</th>              <th>最近登錄</th>              <th>上次登錄IP</th>              <th>操作</th>            </tr>            </thead>            <tbody id="content">            </tbody>          </table>          <div id="Pagination" class="pagination"></div>          <!-- demo -->        </div>      </div>    </div>  </div></div></body></html>

前端頁面展示：

SpringMVC,Jquery.pagination.js,分頁