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

2021-10-23 15:38:46

本博客介绍基于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="请输入关键词">

                        &nbsp;&nbsp;&nbsp;&nbsp;

                        日期从<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\')}'});" />&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>序号</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

欢迎star(收藏)或者可以下载去学习，不过还在开发...

码农公寓

相关文章