Spring Data Jpa+SpringMVC+Jquery.pagination.js实现分页

本博客介绍基于Spring Data这款orm框架加上Jquery.pagination插件实现的分页功能。
介绍一下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>

设计好数据库，编写一个实体类：

    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日
     */
    @Service
    public 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")
    @Controller
    public 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://www.cnblogs.com/knowledgesea/archive/2013/01/03/2841554.html

    <%@ 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 %>">
        <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" />
        <!-- jquery.pagination所需CSS -->
        <link type="text/css" rel="stylesheet" href="<%=basePath%>plugins/page/css/pagination.css" />
        <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>
                        | |序号|用户名|描述|手机|邮箱|最近登录|上次登录IP|操作|
| :-----: | :-----: | :-----: | :-----: | :-----: | :-----: | :-----: | :-----: | :-----: | 

                        <div id="Pagination" class="pagination"></div>
                        <!-- demo  -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    </body>
    </html>

前端页面展示：

ok，本博客是基于一款正在开发中的github开源项目的，项目代码地址：https://github.com/u014427391/jeeplatform
欢迎star(收藏)或者可以下载去学习，不过还在开发...

---

来源：https://www.cnblogs.com/mzq123

来源：oschina

链接：https://my.oschina.net/u/4415996/blog/4463323