このブログでは、Spring DataのORMフレームワークとjQuery.paginationプラグインに基づいて、ページネーション機能を紹介します。
このブログは、開発中のGitHubオープンソースプロジェクトに基づいています。プロジェクトコードアドレスは、https://github.com/u014427391/jeepatformです
Star(Collection)へようこそまたはLearnをダウンロードしてください、そしてそれはまだ開発中です...
Spring Data Frameworkを紹介します
春のデータ:春のサブプロジェクト。データベースアクセスを簡素化し、NOSQLとリレーショナルデータストレージをサポートするために使用されます。
以下は、SpringDataプロジェクトでサポートされているNOSQLストレージです。
* mongodb(ドキュメントデータベース)
* neo4j(グラフィックデータベース)
* Redis(キー/バリューストア)
* hbase(列ファミリデータベース)
SpringDataプロジェクトでサポートされるリレーショナルデータストレージテクノロジー:
* JDBC
* JPA
JPAスプリングデータ:データアクセスレイヤー(DAO)の開発量を減らすことに専念しています。開発者は、Persistenceレイヤーインターフェイスを作成するだけで、他のフレームワークはプログラマーがそれらを実装するのに役立ちます。
開発手順:
spring Springデータを実装してデータの収集
このプロジェクトでは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.apach/4.0. http://maven.apache.org/maven-v4_0_0.xsd "> <parent> <parent> <artifactid> Muses </artifactid> org.muses </groupid> <バージョン<artifactid> jeepartform-admin </artifactid> <packaging> war </packaging> <name> jeepartform-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> <lucene.version> 4.7.2 </lucene.version> <druid.version> 1.0.9 </druid.version> <poi.version> 3.7 </poi.version> </properties> <dependencies> <redencies> <バージョン> $ {jeepatform.core.version} </version> </dependency> <dependency> <shipid> org.muses </groupid> <artifactid> jeepatform-common </artifactid> <バージョン<artifactid> jeepatform-oss </artifactid> <version> $ {jeepatform.oss.version} </version> </dependency> <dependency> org.muses </groupid> <artifactid> jeepatform-upms </artifactid> <バージョン> start-> <dependency> groupid> javax.servlet </groupid> <artifactid> servet-api </artifactid> <version> 2.5 </version> <scope> revide </scope> </dependency> <! - > < <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> <バージョン> $ {log4j.version} </version> </dependency> <! - log4j end-> <! - json parsing required jar start-> <dependency> <groupid> commons-beanutils </groupid> <artifactid> commons-beanutils </artifactid> <バージョン<groupId> commons-collections </groupid> <artifactid> commons-collections </artifactid> <version> 3.2.1 </version> </dependency> <dependency> <groupid> net.sf.ezmorph </groupId> <artifactid> ezmorph </artifactid> <groupid> commons-lang </groupid> <artifactid> commons-lang </artifactid> <version> 2.5 </version> </dependency> <seprency> <groupid> commons-logging </groupid> <artifactid> commons-logging </artifactid> <バージョン> <artifactid> json-lib </artifactid> <バージョン> 2.4 </version> <type> jar </type> <分類子> jdk15 </scope> <scope> compile </scope> </dependency> <! - JSON Parsingに必要なJARエンド - > <! <artifactid> mysql-connector-java </artifactid> <version> $ {mysql.version} </version> </dependency> <! - mysql end-> <! - commons-> <seplency> <deplency> <dependency> commons-io </groupid> <artifactid> <Dependency> GroupId> Commons-Fileupload </groupid> <artifactid> commons-fileupload </artifactid> <version> 1.2.2 </version> </dependency> <! - commons-> <! - spring framework start-> <expendency> <expendency> org.springframework </artifid> </groupid> <artifactid> </groupid> </groupid> <バージョン> $ {spring.version} </version> </dependency> <dependency> <groupid> org.springframework </groupid> <artifactid> spring-beans </artifactid> <bersion> $ {spring.version} </version> </dependency> <redency> <group. org.springframework </groupid> <artifactid> spring-context </artifactid> <version> $ {spring.version} </version> </dependency> <dependency> <shipidence> org.springframework </groupid> <artifactid> spring-context-support </artifactid> <バージョン> $ {spring.version} </varions> </desopency> <groupid> org.springframework </groupid> <artifactid> spring-jdbc </artifactid> <bersion> $ {spring.version} </version> </dependency> <dependency> <groupid> org.springframework </groupid> <artifactid> sprinc. <Dependency> groupId> org.springframework </groupid> <artifactid> spring-test </artifactid> <version> $ {spring.version} </version> <scope> test </scope> </dependency> <依存関係> <groupid> org.spramework </groupid> <artifactid> artifactid> artifactid> artifactid> artifactid> artifactid> artifactid> <バージョン> $ {spring.version} </version> </dependency> <! - spring framework end-> <! - spring aop start-> <dependency> <groupid> org.springframework </groupid> <artifactid> spring-aop </artifactid> <バージョン> $ {spring.version} <Artifactid> astifactid> </artifactid> <バージョン> 1.6.10 </version> </dependency> < <! - springmvc end-> <! - spring data start-> <dependency> groupid> org.springframework </groupid> <artifactid> spring-version </artifactid> <version> $ {spring.version} </version> </dependency> <redenced> org.springframework.data </groupid>> groupid> <artifactid> spring-data-jpa </artifactid> <version> $ {spring-data-jpa.version} </version> </dependency> <dependency> springframework.data </groupid> <artifactid> spring-data-commons </dependency> <! - spring data end-> <! - hibernate jpa start-> <dependency> org.hibernate.javax.persistence </groupid> <artifactid> hibernate-2.1-api </artifactid> <バージョン> 0.0.fina <groupid> org.hibernate </groupid> <artifactid> hibernate-core </artifactid> <bersion> $ {hibernate.version} </version> </dependency> <redency> <shiplency> <groupid> org.hibernate </groupid> <artifactid> hibernate- entificid> <バージョン> $ {hibernate.version} </version> </dependency> <! - hibernate jpa end-> <! - hibernate echache start-> <dependency> groupid> org.slf4j </groupid> <artifactid> slf4j-api </artifactid> <バージョン> <GroupId> net.sf.ehcache </groupid> <artifactid> ehcache-core </artifactid> <version> 2.5.0 </version> </dependency> <dependency> groupid> org.hibernate </groupid> <artifactid> hibernate-ehcache </artifactid> <> </hibernation <! - Hibernate Echache End-> <! - Alibaba's Connection Pool Druid Start-> <Dependency> GroupId> com.alibaba </groupid> <artifactid> druid </artifactid> <バージョン> $ {druid.version} </version> </depence> <! <! - Hibernate Echache End-> <! - Hibernate Echache End-> <! - Alibabaの接続プールDruid End-> <! - shiro Start-> <依存関係> groupid> apache.shiro </groupId> <artifactid> shiro-all </artifactid> </</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</</< shiro end-> <! - velocity start-> <依存関係> groupid> org.apache.velocity </groupid> <artifactid> velocity </artifactid> <version> 1.6 </version> </dependency> <dependency> epriging> org.apache.velocity </groupid> verocitid> velocetools </> </>> </dependency> <! - velocity end-> <! - ルーセンフルテキスト検索エンジンの開始 - > <依存> <依存性> <groupid> org.apache.lucene </groupid> <artifactid> lucifactid> $ {lucene.version} </version> </dependency <Artifactid> lucene-analyzers-common </artifactid> <version> $ {lucene.version} </version} </dependency> <dependency> <groupid> org.apache.lucene </groupid> <artifactid> lucene-queryparser </artifactid> </seprency <groupid> org.apache.lucene </groupid> <artifactid> lucene-memory </artifactid> <version> $ {lucene.version} </version> </dependency> <dependency> <groupid> org.lucene </groupid> <artifapid> rucene-hignight </artifactid> </version> </dependency> <!-IkanalyzerにはMaven Coordinatesがないことに注意してください。ローカルリポジトリに自分で追加してください - > <依存関係> groupid> org.wltea.analyzer </groupid> <artifactid> ikanalyzer </artifactid> <バージョン<SystemPath> $ {Beadir} /Src/main/webapp/web-inf/lib/ikanalyzer2012ff_u1.jar </systempath> </dependency> <! - luceneフルテキスト検索エンジンエンド - > < <バージョン> $ {log4j.version} </version> </dependency> <! - log4j end-> <! - json parsing required jar start-> <dependency> <groupid> commons-beanutils </groupid> <artifactid> commons-beanutils </artifactid> <バージョン<groupId> commons-collections </groupid> <artifactid> commons-collections </artifactid> <version> 3.2.1 </version> </dependency> <dependency> <groupid> net.sf.ezmorph </groupId> <artifactid> ezmorph </artifactid> <groupid> commons-lang </groupid> <artifactid> commons-lang </artifactid> <version> 2.5 </version> </dependency> <seprency> <groupid> commons-logging </groupid> <artifactid> commons-logging </artifactid> <バージョン> <artifactid> json-lib </artifactid> <バージョン> 2.4 </version> <type> jar </type> <分類子> jdk15 </compier> <scope>コンパイル</scope> </dependency> <! <artifactid> poi </artifactid> <bersion> $ {poi.version} </version> </dependency> <! - email start-> <dependency> com.sun.mail </groupid> <artifactid> javax.mail </artifactid> </</</> </> </> </> < </dependencies> <build> <finalName> jeepatform-admin </finalName> </build> </project>データベースを設計し、エンティティクラスを作成します。
Package org.muses.jeepatform.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; javax.persistence.generatedValue; import javax.persistence.generationType; import javax.persistence.id; import javax.persistence.joincolumn; import javax.persistencable; jointable; import javax.persistence.manytomany; javax.persistence.temporal; import javax.persistence.temporaltype;/***ユーザー情報のクラス*@author nicky*/@entity@table(name = "sys_user")public class user {/** user id **/private int id; / **ユーザー名**/プライベート文字列ユーザー名; / **ユーザーパスワード**/プライベート文字列パスワード。 / **携帯電話番号**/ private int電話。 / **性別**/プライベートストリングセックス; / **メール**/プライベート文字列メール。 / **注**/プライベート文字列マーク。 / **ユーザーレベル**/プライベート文字列ランク。 / **前回**/プライベートデートLastLogin; / **ログインIP **/プライベート文字列loginip; / **画像パス**/プライベート文字列ImageUrl; / **登録時間**/プライベートデート登録時間; / **アカウントがロックされているかどうか**/ private boolean locked = boolean.false;プライベートセット<ロール>ロール。 @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電話){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(themeporaltype.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; } @tempolal(themeporaltype.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; }}スプリングデータフレームワークのPagingandSortingRepositoryインターフェイスを実装するインターフェイスを書き込む
Package org.muses.jeepartform.repository; Import org.muses.jeepartform.model.entity.user; Import org.springframework.data.domain.page; import org.springframework.data.domain.pageable; import org.springframework.data.data.data.data.data.data.data.data.data.data.data.data.data.data.data.data.data.data.data.data.datawork.data.data.data.data.data.data.data org.springframework.jpa.repository.jparepository; Import org.springframework.data.repository.query; import org.springframework.data.repository.pagingandsortingrepository; import org.springframework.data.data.data.repository.datory.data.data.data.data.data.data.data.data.data.datawork.datawork.datawork.springframework.data. java.util.date; public interface userrepositoryはpagingandsortingRepository <user、integer> { /*user findbyusername(string username); @query( "user u where ususername =:username and u.password =:password")ユーザーfindbyusernameandpassword(@param( "username")string username、@param( "password")string password); @query( "user u where u.id =:id")ユーザーfindbyid(@param( "id")int id); @Query( "user uからdate_format(u.lastlogin、 'yyyy-mm-dd')date_format((:startdate)、 'yyyy-mm-dd')、 'yyyymm-dd')、 'yyyymm-dd')ページ可能なページ可能);*/}ビジネスクラスの実装:
Package org.muses.jeepatform.service; Import java.util。*; import org.muses.jeepatform.model.entity.user; Import org.muses.jeepatform.repository.userrepository; import org.springframework.beans.beans.Annotation.Autowired; org.springframework.data.domain.page; Import org.springframework.data.domain.pagerequest; Import org.springframework.data.domain.sort; Import org.springframework.data.jpa.domain.domicification; Import.springframework.servework org.springframework.transaction.annotation.transactional; import javax.persistence.criteria.criteriabuilder; import javax.persistence.criteriaquery;/*** @descriptionビジネスクラスユーザー情報管理* @authorid 6、2017*/ @servidepublic class editidy USERREREPOSITORY; / ** * build 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); } /** * Get all menu information and display it on pages* @param pageNo * Current number of pages* @param pageSize * Number of pages per page* @return */ @Transactional public Page<User> findAll(int pageNo, int pageSize, Sort.Direction dir, String str){ PageRequest request = buildPageRequest(pageNo, pageSize, dir, str);ページ<ユーザー> users = userrepository.findall(request);ユーザーを返します。 }}コントロールクラスはSpringMVCフレームワークを採用し、最初にいくつかの一般的な機能を実装するためのBasecontrollerを書き込みます。
package org.muses.jeepatform.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; / *** get log object* @return*/ public logger getInstance(){if(log == null){log = loggerfactory.getLogger(basecontroller.class); } return log; } / *** get request object* / public httpservletrequest getRequest(){httpservletrequest request =((servletRequestattributes)requestContextholder.getRequestattributes())。getRequest();返品リクエスト。 } / ** * get modelandview * / public modelandview getModelandView(){return new ModelandView(); }}制御クラスの実装:
Package org.muses.jeepatform.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.muses.muses.museseberbr.core.corestants; org.muses.jeepatform.core.excelviewwrite; Import org.muses.jeepatform.core.javaemailsender; Import org.muses.jeepatform.model.entity.user; Import org.muses.jeepatform.service.userservice; Import; org.muses.jeepatform.utils.datejsonvalueprocessor; Import org.muses.jeepatform.utils.dateutils; Import org.springframework.beans.factory.annotation.autowired; Import org.springframework.data.data.dat.dat.data.dat.dat.dat.data.data.data.data.data.data.data.data.data.data.data.data.data.data.data.data.data.data.data.data.data.data.data.data.data.data.data.data.data.data.dat org.springframework.steretype.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。*;/*** 2017/7/29にNickyが作成。 */@requestMapping( "/user")@controlonPublic class usercontroller extends BaseController {@autowired userservice userservice; /** *すべての管理者情報をクエリしてページに表示 * @param request * @param Response * @param Model * @return */@RequestMapping(value = "/queryall"、生成= "Application/json; charset = utf-8") pageindexstr = request.getParameter( "pageindex"); //ページごとのページ数int pagesize = constants.page_size; ModelAndView MV = this.getModelandView();ページ<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"); MVを返します。 }} 【フロントエンドページの実装】
ページビュー実装、jquery.pagination.js(pagination js)、およびpagination.css(pagination style css)を参照してください。
ここからダウンロードできます://www.vevb.com/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 = "fmt" "fmt" "fmt" uri = "http://java.sun.com/jsp/jstl/fmt"%> <%string path = request.getContextPath(); string basepath = request.getscheme()+"://"+request.getServername()+":"+request.getServerport()+path+"/"; /> <meta http-equiv = "x-ua-compatible" content = "ie = edge"> <meta name = "viewport" content = "width =" width = "width =" width = "> <title>挿入</title> <! - bootstrapスタイル - > <link type =" text/css href = "<%= basepath%>プラグイン/page/css/bootstrap-3.3.3.5.min.css" rel = "external nofollow"/> <! - jquery.pagination.pagination-> <link type = "text/css" rel = "styleSheet" href = " nofollow "/> <script type =" text/javascript "src =" <%= basepath%>プラグイン/page/js/jquery.min.js "> </script> <! - jsが要求するjquery.jsの後ろに配置する必要があることに注意してください - > <> <> <text/javascript" "" "" src = "<%= basepath%>プラグイン/page/js/jquery.pagination.js"> </script> <script> <script type = "text/javascript">/**ページング操作には、jquery.paginationプラグインを使用します。 //データ数量var totalcount = number($ {totalcount}); $(document).ready(function(){//ページングへのバインディング$( "#pagination")。pagination(totalcount、{callback:pageselectcallback、prev_text: '<pregial page'、next_text: 'next page>'、iteme_per_page:6、num_display_entries:6、current_page:1、num_tex、 「ユーザー/QueryAll?__ Id__」//「__id__」は現在のhtml = ")を自動的に置き換えます。 obj.email = obj.lastlogin = obj.loginip; "<td>"+mark+"</td>"+"<td>"+phone+"</td>"+"<td>"+email+"</td>"+"<td>"+lastlogin+"</td>"+"<td>"+loginip+"</td>" <td> <a href = 'javascript:openeditdialog( "+id+");'> bouncein '> configure </a> "+" </tr> ";}); $("#content ")。 //このイベントはfunction pageselectcallback(index、jq){}/** jquery.paginationプラグインを使用して、Nicky 20170729 end **///チェックボックスのAll/anti-lect var ischeckall = false; function docheck(){if(ischeckall){$( "input [type = 'checkbox']")。各(function(){this.checked = false;}); ischeckall = false; } else {$( "input [type = 'checkbox']")。各(function(){this.checked = true;}); ischeckall = true; }} </script> </head> <body> <br> <div> <div> <div> <div> <form <input type = "button" value = "send mail" onclick = "sendemail();" /> <入力型= "button" value = "sendsms();" /> <入力タイプ= "ボタン" value = "exportexcel table" onclick = "exportexcel();" /> <BR> < 、、maxdate: '#f {$ dp。$ d(/' enddate/')}'} '} 、マインド: '#f {$ dp。$ d(/' startdate/')}'}); " /> <入力型= "button" value = "" onclick = "dosearch();"/> - > </form> <table id = "mtable"> <thead> <tr> <th thead = "checkbox" onclick = "docheck();" />> </th> <>シリアル番号</th> <th>ユーザー名</th> <th>説明</th> <th> mobile </th> <th> email </th> <th> email </th> <th>最新のログイン</th> <th>最終ログインIP </th> <th> operation </th> </tr> </head> <tody " <! - demo-> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>フロントエンドページ表示:
OK、このブログは、開発中のGitHubオープンソースプロジェクトに基づいています。プロジェクトコードアドレスは、https://github.com/u014427391/jeepatformです
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。