本博客介紹基于Spring Data這款orm框架加上 Jquery.pagination插件實(shí)現(xiàn)的分頁(yè)功能。
本博客是基于一款正在開(kāi)發(fā)中的github開(kāi)源項(xiàng)目的，項(xiàng)目代碼地址：https://github.com/u014427391/jeeplatform
歡迎star(收藏)或者可以下載去學(xué)習(xí)，還在開(kāi)發(fā)…
介紹一下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配置：
|
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沒(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í)體類：
|
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;/** * 用戶信息的實(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接口
|
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);*/} |
業(yè)務(wù)類實(shí)現(xiàn)：
|
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 用戶信息管理的業(yè)務(wù)類 * @author Nicky * @date 2017年3月6日 */@Servicepublic 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)一些通用功能的封裝：
|
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; /** * 獲取日志對(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)：
|
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; /** * 查詢所有管理員信息并分頁(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）。
|
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"> /** 分頁(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)鍵詞"> 日期從<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\')}'});" /> <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è)面展示：
ok，本博客是基于一款正在開(kāi)發(fā)中的github開(kāi)源項(xiàng)目的，項(xiàng)目代碼地址：https://github.com/u014427391/jeeplatform
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：http://blog.csdn.net/u014427391/article/details/77434664
