Spring Data Jpa+SpringMVC+Jquery.pagination.js實(shí)現(xiàn)分頁(yè)

本博客介紹基于Spring Data這款orm框架加上Jquery.pagination插件實(shí)現(xiàn)的分頁(yè)功能稚失。
介紹一下Spring Data框架
spring Data : Spring 的一個(gè)子項(xiàng)目佑菩。用于簡(jiǎn)化數(shù)據(jù)庫(kù)訪問(wèn)椰于，支持NoSQL 和關(guān)系數(shù)據(jù)存儲(chǔ)。
下面給出SpringData 項(xiàng)目所支持 NoSQL 存儲(chǔ)：

MongoDB （文檔數(shù)據(jù)庫(kù)）
Neo4j（圖形數(shù)據(jù)庫(kù)）
Redis（鍵/值存儲(chǔ)）
Hbase（列族數(shù)據(jù)庫(kù)）

SpringData 項(xiàng)目所支持的關(guān)系數(shù)據(jù)存儲(chǔ)技術(shù)：

JDBC
JPA

JPA Spring Data : 致力于減少數(shù)據(jù)訪問(wèn)層 (DAO) 的開(kāi)發(fā)量。開(kāi)發(fā)者只要寫(xiě)好持久層接口就好，然后其它的框架會(huì)幫程序員實(shí)現(xiàn)。

開(kāi)發(fā)步驟：
【Spring Data實(shí)現(xiàn)數(shù)據(jù)獲取】
本項(xiàng)目是采用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沒(méi)有maven坐標(biāo),請(qǐng)自行添加到本地倉(cāng)庫(kù) -->
        <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>

設(shè)計(jì)好數(shù)據(jù)庫(kù)，編寫(xiě)一個(gè)實(shí)體類：

這里寫(xiě)圖片描述

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;

/**
 * 用戶信息的實(shí)體類
 * @author Nicky
 */
@Entity
@Table(name="sys_user")
public class User {

    /** 用戶Id**/
    private int id;
    
    /** 用戶名**/
    private String username;
    
    /** 用戶密碼**/
    private String password;
    
    /** 手機(jī)號(hào)**/
    private int phone;
    
    /** 性別**/
    private String sex;
    
    /** 郵件**/
    private String email;
    
    /** 備注**/
    private String mark;
    
    /** 用戶級(jí)別**/
    private String rank;
    
    /** 最后一次時(shí)間**/
    private Date lastLogin;
    
    /** 登錄ip**/
    private String loginIp;
    
    /** 圖片路徑**/
    private String imageUrl;
    
    /** 注冊(cè)時(shí)間**/
    private Date regTime;
    
    /** 賬號(hào)是否被鎖定**/
    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;
    }
    
}

編寫(xiě)接口實(shí)現(xiàn)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);
*/
}

業(yè)務(wù)類實(shí)現(xiàn)：

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 用戶信息管理的業(yè)務(wù)類
 * @author Nicky 
 * @date 2017年3月6日
 */
@Service
public class UserService {

    @Autowired
    UserRepository userRepository;
    
    /**
     * 構(gòu)建PageRequest對(duì)象
     * @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);
    }

    /**
     * 獲取所有的菜單信息并分頁(yè)顯示
     * @param pageNo
     *          當(dāng)前頁(yè)面數(shù)
     * @param pageSize
     *          每一頁(yè)面的頁(yè)數(shù)
     * @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框架仓坞，先編寫(xiě)一個(gè)baseController，實(shí)現(xiàn)一些通用功能的封裝：

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;

    /**
     * 獲取日志對(duì)象
     * @return
     */
    public Logger getInstance(){
        if(log == null){
            log = LoggerFactory.getLogger(BaseController.class);
        }
        return log;
    }

    /**
     * 得到request對(duì)象
     */
    public HttpServletRequest getRequest() {
        HttpServletRequest request = ((ServletRequestAttributes)RequestContextHolder.getRequestAttributes()).getRequest();
        return request;
    }
    
    /**
     * 得到ModelAndView
     */
    public ModelAndView getModelAndView(){
        return new ModelAndView();
    }

}

控制類實(shí)現(xiàn)：

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;

    /**
     * 查詢所有管理員信息并分頁(yè)顯示
     * @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){
        //當(dāng)前頁(yè)
        String pageIndexStr = request.getParameter("pageIndex");

        //每一頁(yè)的頁(yè)數(shù)
        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;
    }

   
}

【前端頁(yè)面實(shí)現(xiàn)】
頁(yè)面View實(shí)現(xiàn)腰吟，引用 jquery.pagination.js （分頁(yè)js）扯躺，跟pagination.css（分頁(yè)樣式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">

        /** 分頁(yè)操作，使用jquery.pagination插件 add by nicky 20170729 start **/
        //當(dāng)前頁(yè)
        var pageIndex = Number(${pageIndex});

        //數(shù)據(jù)量
        var totalCount = Number(${totalCount});

        $(document).ready(function () {
            //加入分頁(yè)的綁定
            $("#Pagination").pagination(totalCount, {
                callback : pageselectCallback,
                prev_text : '< 上一頁(yè)',
                next_text: '下一頁(yè) >',
                items_per_page : 6,
                num_display_entries : 6,
                current_page : pageIndex,
                num_edge_entries : 1,
                link_to: "user/queryAll?pageIndex=__id__"  //分頁(yè)的js中會(huì)自動(dòng)把"__id__"替換為當(dāng)前的數(shù)录语。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);


        });

        //這個(gè)事件是在翻頁(yè)時(shí)候用的
        function pageselectCallback(index, jq) {

        }
        /** 分頁(yè)操作倍啥，使用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="發(fā)送郵件" onclick="sendEmail();" />
                        <input type="button" class="btn btn-default" value="發(fā)送短信" onclick="sendSms();" />
                        <input type="button" class="btn btn-default" value="導(dǎo)出Excel表" onclick="exportExcel();" />
                        <br><br><!--
                        <input type="text" class="form-control" id="keyword" placeholder="請(qǐng)輸入關(guān)鍵詞">
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        日期從<input type="text" class="form-control" placeholder="請(qǐng)輸入開(kāi)始日期" value="${startdate }" id="startDate" name="startdate" onclick="WdatePicker({dateFmt:'yyyy-MM-dd' ,maxDate:'#F{$dp.$D(\'endDate\')}'});"/>
                        到<input type="text" class="form-control" placeholder="請(qǐng)輸入結(jié)束日期" value="${enddate }" id="endDate" name="enddate" onclick="WdatePicker({dateFmt:'yyyy-MM-dd' ,minDate:'#F{$dp.$D(\'startDate\')}'});" />&nbsp;&nbsp;&nbsp;&nbsp;
                        <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>序號(hào)</th>
                            <th>用戶名</th>
                            <th>描述</th>
                            <th>手機(jī)</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>

前端頁(yè)面展示：

這里寫(xiě)圖片描述

ok，本博客是基于一款正在開(kāi)發(fā)中的github開(kāi)源項(xiàng)目的澎埠，項(xiàng)目代碼地址：https://github.com/u014427391/jeeplatform
歡迎star(收藏)或者可以下載去學(xué)習(xí)虽缕，不過(guò)還在開(kāi)發(fā)...

最后編輯于：2017.12.10 02:51:05

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市蒲稳，隨后出現(xiàn)的幾起案子氮趋，更是在濱河造成了極大的恐慌，老刑警劉巖江耀，帶你破解...
沈念sama閱讀 222,252評(píng)論 6贊 516
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件剩胁，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡祥国，警方通過(guò)查閱死者的電腦和手機(jī)昵观，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 94,886評(píng)論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)舌稀，“玉大人啊犬，你說(shuō)我怎么就攤上這事”诓椋” “怎么了觉至？”我有些...
開(kāi)封第一講書(shū)人閱讀 168,814評(píng)論 0贊 361
道士緝兇錄：失蹤的賣(mài)姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)睡腿。經(jīng)常有香客問(wèn)我语御，道長(zhǎng)，這世上最難降的妖魔是什么席怪？我笑而不...
開(kāi)封第一講書(shū)人閱讀 59,869評(píng)論 1贊 299
?港島之戀（遺憾婚禮）
正文為了忘掉前任应闯，我火速辦了婚禮，結(jié)果婚禮上何恶，老公的妹妹穿的比我還像新娘。我一直安慰自己嚼黔，他們只是感情好细层，可當(dāng)我...
茶點(diǎn)故事閱讀 68,888評(píng)論 6贊 398
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布。她就那樣靜靜地躺著唬涧，像睡著了一般疫赎。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上碎节，一...
開(kāi)封第一講書(shū)人閱讀 52,475評(píng)論 1贊 312
城市分裂傳說(shuō)
那天捧搞，我揣著相機(jī)與錄音，去河邊找鬼。笑死胎撇，一個(gè)胖子當(dāng)著我的面吹牛介粘，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播晚树，決...
沈念sama閱讀 41,010評(píng)論 3贊 422
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼姻采，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了爵憎？” 一聲冷哼從身側(cè)響起慨亲，我...
開(kāi)封第一講書(shū)人閱讀 39,924評(píng)論 0贊 277
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎宝鼓，沒(méi)想到半個(gè)月后刑棵，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 46,469評(píng)論 1贊 319
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡愚铡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,552評(píng)論 3贊 342
?白月光啟示錄
正文我和宋清朗相戀三年蛉签，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片茂附。...
茶點(diǎn)故事閱讀 40,680評(píng)論 1贊 353
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡正蛙，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出营曼，到底是詐尸還是另有隱情乒验，我是刑警寧澤，帶...
沈念sama閱讀 36,362評(píng)論 5贊 351
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布蒂阱，位于F島的核電站锻全，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏录煤。R本人自食惡果不足惜鳄厌，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 42,037評(píng)論 3贊 335
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望妈踊。院中可真熱鬧了嚎，春花似錦、人聲如沸廊营。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 32,519評(píng)論 0贊 25
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)露筒。三九已至呐伞，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間慎式，已是汗流浹背伶氢。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 33,621評(píng)論 1贊 274
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工趟径，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人癣防。一個(gè)月前我還...
沈念sama閱讀 49,099評(píng)論 3贊 378
代替公主和親
正文我出身青樓蜗巧，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親劣砍。傳聞我的和親對(duì)象是個(gè)殘疾皇子惧蛹，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,691評(píng)論 2贊 361

Spring Data Jpa+SpringMVC+Jquery.pagination.js實(shí)現(xiàn)分頁(yè)

推薦閱讀更多精彩內(nèi)容