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

2024-04-04 19:32:31

本博客介绍基于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>

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

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.jb51.net/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>

前端页面展示：

ok，本博客是基于一款正在开发中的github开源项目的，项目代码地址：https://github.com/u014427391/jeeplatform

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

jQuery分页插件jquery.pagination.js使用方法解析
jquery分页插件jquery.pagination.js实现无刷新分页
jquery分页插件jquery.pagination.js使用方法解析
jquery.pagination.js 无刷新分页实现步骤分享

jQuery分页插件jquery.pagination.js使用方法解析

jquery.pagination.js插件,此jQuery插件为Ajax分页插件,一次性加载全部数据,故分页切换时无刷新与延迟,只是重写指定dom元素中的html内容,如果数据量较大不建议用此方法,因为加载会比较慢: jQuery的多数插件使用都比较简单,都能查找出相关api,且含有demo: 使用此插件,首先在页面(jsp.html)中引入其js.css文件 <link href="/自定义路劲/jquery.pagination/pagination.css" rel=&q
jquery.pagination.js 无刷新分页实现步骤分享

1.使用插件为 jquery.pagination.js ,如果没有这个js文件的话,我可以给发个. 首先引用 jquery.pagination.js (分页js),跟pagination.css(分页样式css). 2.页面js代码为复制代码代码如下: <script type="text/javascript"> var pageIndex = 0; //页面索引初始值 var pageSize = 15; //每页显示条数初始化,修改显示条数,修改这里即可 $(
jquery分页插件jquery.pagination.js实现无刷新分页

本文实例为大家分享了jquery分页插件实现无刷新分页的相关代码,供大家参考,具体内容如下 1.使用插件为 jquery.pagination.js ,如果没有这个js文件的话,我可以给发个. 首先引用 jquery.pagination.js (分页js),跟pagination.css(分页样式css). 点击获取查看这两个文件 2.页面js代码为 <script type="text/javascript"> var pageIndex = 0; //页面索引初始值
Spring Data Jpa+SpringMVC+Jquery.pagination.js实现分页示例

本博客介绍基于Spring Data这款orm框架加上 Jquery.pagination插件实现的分页功能. 本博客是基于一款正在开发中的github开源项目的,项目代码地址:https://github.com/u014427391/jeeplatform 欢迎star(收藏)或者可以下载去学习,还在开发- 介绍一下Spring Data框架 spring Data : Spring 的一个子项目.用于简化数据库访问,支持NoSQL 和关系数据存储. 下面给出SpringData 项目所支
Spring MVC结合Spring Data JPA实现按条件查询和分页

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下推荐视频:尚硅谷Spring Data JPA视频教程,一学就会,百度一下就有. 后台代码:在DAO层继承Spring Data JPA的PagingAndSortingRepository接口实现的 (实现方法主要在SbglServiceImpl.java类中) 前台表现:用kkpaper表现出来实现效果: 1.实体类 package com.jinhetech.yogurt.sbgl.entity; im
Spring Data Jpa 自动生成表结构的方法示例

想在部署的时候随应用的启动而初始化数据脚本,这不就是Spring Data Jpa中的自动生成表结构,听起来特别简单,不就是配置Hibernate的ddl-auto嘛,有什么好说的,是个人都知道.当初我也是这样认为,实际操作了一把,虽然表是创建成功了,但是字段注释,字符集以及数据库引擎都不对,没想到在这些细节上翻车了. 毕竟开翻的车还要自己扶起来,于是在这记录一下. 注:本文中使用的Spring Data Jpa版本为2.1.4.RELEASE 以MySQL为例,我这边举个例子: import
Spring Data JPA 实现多表关联查询的示例代码

多表查询在spring data jpa中有两种实现方式,第一种是利用hibernate的级联查询来实现,第二种是创建一个结果集的接口来接收连表查询后的结果,这里介绍第二种方式. 一.一对一映射实体 UserInfo :用户. 实体 Address:家庭住址. 这里通过外键的方式(一个实体通过外键关联到另一个实体的主键)来实现一对一关联. 实体类 1.实体类 UserInfo.java package com.johnfnash.learn.domain; import java.io.Ser
Spring Data JPA 如何使用QueryDsl查询并分页

目录 Spring Data JPA 使用QueryDsl查询并分页使用QueryDSL Spring Data JPA 使用QueryDsl查询并分页 QProblemPoint qProblemPoint = QProblemPoint.problemPoint; Map<String,String> map = getWhere(param); JPAQuery<ProblemPoint> query = jpaQueryFactory .selectFrom(qProbl
Spring Data JPA实现排序与分页查询超详细流程讲解

目录前言 1.创建持久化实体类 2.创建数据访问层 3.创建业务层 4.创建控制器类 5.创建View视图页面 6.运行主类效果如下前言在实际开发场景中,排序与分页查询是必须的,幸运的是Spring Data JPA充分考虑了排序与分页查询的场景,为我们提供Sort类 Page接口 Pageable接口下面通过一个实战来阐明 1.创建持久化实体类创建名为com.ch.ch6_4.entity的包并在该包中创建名为Article和Author的持久化实体类代码如下 Article
Spring Data JPA+kkpager实现分页功能实例

一.spring Data JPA分页分页效果如下: 前台表格用的是: Bootstrap 分页插件用的是: kkpager kkpager是一个js分页展示控件,传入简单参数就能使用的分页效果控件,github地址:https://github.com/pgkk/kkpager 项目结构: FamilyMember实体类: package com.fendo.entity; import java.io.Serializable; import java.util.Date; import
asp.net jquery无刷新分页插件(jquery.pagination.js)

采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果友情提示:本示例Handler中采用StringBuilder的append方法追加HTML,小数据量可以,但是大数据或是布局常变,建议返回JSON格式的数据,性能和灵活性更好! 1.插件参数列表 2.页面内容: 复制代码代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defaul

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

您可能感兴趣的文章:

相关推荐

随机推荐