本博客介紹基于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配置：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
|
<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> |
設計好數據庫，編寫一個實體類：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
|
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接口
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
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);*/} |
業務類實現：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
package org.muses.jeeplatform.service;import java.util.*;import org.muses.jeeplatform.model.entity.User;import org.muses.jeeplatform.repository.UserRepository;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.data.domain.Page;import org.springframework.data.domain.PageRequest;import org.springframework.data.domain.Sort;import org.springframework.data.jpa.domain.Specification;import org.springframework.stereotype.Service;import org.springframework.transaction.annotation.Transactional;import javax.persistence.criteria.CriteriaBuilder;import javax.persistence.criteria.CriteriaQuery;/** * @description 用戶信息管理的業務類 * @author Nicky * @date 2017年3月6日 */@Servicepublic class UserService { @Autowired UserRepository userRepository; /** * 構建PageRequest對象 * @param num * @param size * @param asc * @param string * @return */ private PageRequest buildPageRequest(int num, int size, Sort.Direction asc, String string) { return new PageRequest(num-1, size,null,string); } /** * 獲取所有的菜單信息并分頁顯示 * @param pageNo * 當前頁面數 * @param pageSize * 每一頁面的頁數 * @return */ @Transactional public Page<User> findAll(int pageNo, int pageSize, Sort.Direction dir, String str){ PageRequest request = buildPageRequest(pageNo, pageSize, dir, str); Page<User> users = userRepository.findAll(request); return users; }} |
控制類，采用SpringMVC框架，先編寫一個baseController，實現一些通用功能的封裝：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
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(); }} |
控制類實現：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
package org.muses.jeeplatform.web.controller;import net.sf.json.JSONArray;import net.sf.json.JSONObject;import net.sf.json.JsonConfig;import org.apache.commons.collections.map.HashedMap;import org.muses.jeeplatform.core.Constants;import org.muses.jeeplatform.core.ExcelViewWrite;import org.muses.jeeplatform.core.JavaEmailSender;import org.muses.jeeplatform.model.entity.User;import org.muses.jeeplatform.service.UserService;import org.muses.jeeplatform.utils.DateJsonValueProcessor;import org.muses.jeeplatform.utils.DateUtils;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.data.domain.Page;import org.springframework.data.domain.Sort;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.servlet.ModelAndView;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.PrintWriter;import java.util.*;/** * Created by Nicky on 2017/7/29. */@RequestMapping("/user")@Controllerpublic class UserController extends BaseController{ @Autowired UserService userService; /** * 查詢所有管理員信息并分頁顯示 * @param request * @param response * @param model * @return */ @RequestMapping(value = "/queryAll",produces = "application/json;charset=UTF-8") @ResponseBody public ModelAndView findAll(HttpServletRequest request, HttpServletResponse response, Model model){ //當前頁 String pageIndexStr = request.getParameter("pageIndex"); //每一頁的頁數 int pageSize = Constants.PAGE_SIZE; ModelAndView mv = this.getModelAndView(); Page<User> userPage; if(pageIndexStr==null||"".equals(pageIndexStr)){ pageIndexStr = "0"; } int pageIndex = Integer.parseInt(pageIndexStr); userPage = userService.findAll(pageIndex+1, pageSize, Sort.Direction.ASC,"id"); mv.addObject("totalCount",userPage.getTotalElements()); mv.addObject("pageIndex",pageIndex);// JsonConfig cfg = new JsonConfig();// cfg.setExcludes(new String[]{"handler","hibernateLazyInitializer"}); JsonConfig jcg = new JsonConfig(); jcg.registerJsonValueProcessor(Date.class, new DateJsonValueProcessor("yyyy-mm-dd")); JSONArray jsonArray = JSONArray.fromObject(userPage.getContent(),jcg); //System.out.println(jsonArray.toString()); mv.addObject("users",jsonArray.toString()); mv.setViewName("admin/user/sys_user_list"); return mv; }} |
【前端頁面實現】
頁面View實現，引用 jquery.pagination.js （分頁js），跟pagination.css（分頁樣式css）。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
<%@ 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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：http://blog.csdn.net/u014427391/article/details/77434664
