Données de printemps JPA + Springmvc + jQuery.pagination.js Exemple de pagination d'implémentation

Ce blog présente la fonction de pagination basée sur le framework ORM de Spring Data plus le plug-in jQuery.Pagination.

Ce blog est basé sur un projet open source GitHub en cours de développement. L'adresse du code du projet est: https://github.com/u014427391/jeepatform

Bienvenue à Star (Collection) ou téléchargez pour apprendre, et il se développe toujours ...

Introduire le cadre de données de printemps

Données de printemps: un sous-projet de printemps. Utilisé pour simplifier l'accès à la base de données et prendre en charge le stockage de données NOSQL et relationnel.

Ce qui suit est le stockage NoSQL pris en charge par le projet SpringData:

* MongoDB (base de données de documents)
* NEO4J (base de données graphique)
* Redis (Key / Value Store)
* HBASE (Colonne Family Database)

Technologies de stockage de données relationnelles soutenues par les projets SpringData:

* JDBC
* JPA

Données de printemps JPA: dédiée à la réduction du volume de développement de la couche d'accès aux données (DAO). Les développeurs ont juste besoin d'écrire l'interface de couche de persistance, puis d'autres cadres aideront les programmeurs à les implémenter.

Étapes de développement:

【Les données de ressort implémentent l'acquisition de données】

Ce projet utilise Maven, vous pouvez donc vous référer à ma configuration Maven:

 <project xmlns = "http://maven.apache.org/pom/4.0.0" xmlns: xsi = "http://www.w3.org/2001/xmlschema-instance" xsi: schemalation = "http://maven.apache.org/pom/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd "> <parent> <artifactive> muses </ artifactId> <proupId> org.muses </rompuprid> <version> 1.0-snapshot </-version> <ArtefactId> JeepartForm-admin </ artifactid> <packaging> war </packaging> <name> jeepartform-admin maven webapp </name> <url> http://maven.apache.org </url> <preperties> <printemps. <printemps-data-jpa.version> 1.4.2.release </spring-data-jpa.version> <printemps-data-commons.version> 1.6.2.release </spring-data-commons.version> <Hibernate.version> 4.3.8.final </shibernate.version> <shiro.version> 1.2.3 </hiro. <CuCene.Version> 4.7.2 </luCenene.Version> <Druid.version> 1.0.9 </druid.version> <poi.Version> 3.7 </poi.version> </properties> <dépendances> <! - Module start -> <dependency> <proupId> org.muses </prounid> <ArtifActid> JeepraForD> </rg.muses </pruisid> <ArtifActid> JeepaRformDe </rg.muses </prolisid> <ArtifActid> JEEPAPEFORD> ORG.MUSES </roulid> <ArtifActid> JEEPAFARFID> <version> $ {jeepatform.core.version} </-version> </pependency> <dependency> <proupId> org.mus </rom grouped> <ArtefactId> JeepAtForm-Common </ Artifactid> <Version> 1.0-SNAPSHOT </ Version> </Dependency> <Dedency> <ProupId> ORG.MUSES </ GroupID> <ArtefactId> JeepAtForm-Oss </letefactive> <Sease> $ {jeepatform.oss.version} </-version> </dependency> <dependency> <proupId> org.mus </rom grouped> <ArtifActid> JeepAtForm-upms </ artifactid> <version> 1.0-snapshot </DERNIFTRATION> </Dedency> <! - MOUDE> <! - Start -> <Dedency> <GroupId> javax.servlet </prôdId> <Ertifactid> Servlet-API </ artifactid> <version> 2.5 </ version> <! - JSTL start -> <dependency> <prousid> jStl </proncId> <artifActid> JSTLAD </ artId> JSTL </proupId> <ArtifActid> JSTLI <version> 1.2 </ version> </ Dependency> <Dedency> <ProupId> Taglibs </rom grouped> <ArtifActid> Standard </ ArfactId> <Dersion> 1.1.2 </ Version> </ Dependency> <! - JSTL End -> <! - LOG4J START -> <DENSECTY> <PROUPACTID> LOGIDED> <version> $ {log4j.version} </ version> </ dépendance> <! - Log4j end -> <! - JSON Analyse de mise en forme obligatoire -> <dependency> <proupId> Commons Beanutils </proupId> <ArtifActid> Commons Beanutils </distifactid> <version> 1.8.3 </DERNIFROITION> </Dependency> <Dependance> <GroupId> Commons-Collections </rom grouped> <Artifactid> Commons-Collections </ ArtifactId> <Dersion> 3.2.1 </ Version> </Dependency> <Dedency> <ProupId> Net.Sf.EZMORPH </ GroupId> <ArtefactId> Ezmorph </ Artifactid> <version> 1.0.6 </DERVIERSE> </Dedency> <GroupId> Commons-Lang </ GroupId> <Artifactid> Commons-Lang </ ArtifactId> <Dersion> 2.5 </Se version> </Dependency> <Dependency> <ProupId> Comons-Logging </proupId> <ArtifActid> Commons-Logging </ Artifactive> <Derson> 1.2 </DERNIFRENCE> </Dedency> <predency> <proupId> Net.SF.jon </pedency> </pedidency> <poulid> net.swon <ArtefactId> json-lib </ artifactId> <Dersion> 2.4 </ version> <ype> jar </pype> <scope> </ Dependency> <! - Jar end requis pour JSON PARSING -> <! - MySQL Start -> <pedency> <ProupId> MySQL </ GroupID> <ArtefactId> MySQL-Connector-Java </ Artifactid> <Dersion> $ {mysql.version} </ version> </ Dependency> <! - Mysql end -> <! - Commons -> <Dedency> <proupatid> comons-io </proupId> <eRtifactid> Comons-io </letifactid> <in version>> 2.0. <Dedency> <ProupId> Commons-fileupload </proupId> <Ertifactid> Commons-fileupload </lefactive> <version> 1.2.2 </preffen> </peedency> <! - Commons -> <! - Spring Framework start -> <pedidency> <proupId> org.springframework </proudId> <ArtifActid> Spring-core </tifactId> <version> $ {printemps.version} </ version> </ dépendance> <dependency> <proupId> org.springFramework </proncId> <ArtifActid> Spring-Beans </ Artifactid> <Dero version> $ {Spring.Version} </DERNIERSE> </ Dependency> <Dedidency> <proupId> ORG.SPRINGFRAMEWROWNWORK </prouprid> <ArtefactId> Spring-Context </ ArtifactId> <DersonDe> $ {Spring.version} </ Version> </Dependency> <Dependance> <GroupId> Org.SpringFramework </proupId> <ArtefactId> Spring-Context-Support </Detency> <Dedency> <GroupId> org.springframework </rom grouped> <Artifactid> printemps-jdbc </ artifactid> <version> $ {printemps.sversion} </ version> </dependency> <pedidency> <proupId> org.springframework </prouvend> <artifactid> Spring-Tx </retifActid> <DERNÉE> $ {Spring.version} <dependency> <proupId> org.springframework </proncId> <ErtifactId> printemps-test </ artifactid> <in version> $ {printemps.fursion} </-version> <cope> test </cope> </dEpendency> <Dependency> <proupId> org.springframework </proupId> <ArtifActid> Spring-web </tifactID> <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> <ArtefactId> AspectJwweaver </ artifactId> <Derson> 1.6.10 </ version> </Dependency> <! - Spring Aop End -> <! - Springmvc Start -> <Dedency> <ProupID> org.springFramework </proncID> <Artifactid> Spring-webmvc </ptefactId> <version> $ {Spring.version} <! - Springmvc end -> <! - Spring Data Start -> <Dedency> <ProupId> org.springFramework </proupId> <ArtifActid> Spring-Lorm </Retifactid> <Dersion> $ {Spring.Version} </-version> </Dependency> <Dedency> <ProupId> org.SpringFramework.data </prouprid> <ArtefactId> printemps-data-jpa </ artifactid> <in version> $ {printemps-data-jpa.version} </-version> </dependency> <dependency> <proupId> org.springframework.data </prouprid> <Artifactid> Spring-data-commons. </Dependency> <! - Spring Data End -> <! - Hibernate JPA start -> <dependency> <proupId> org.hibernate.javax.persistence </proupId> <Artifactid> hibernate-jpa-2.1-api </ artifactid> <version> 1.0.final </Degelow <GroupId> org.hibernate </proupId> <Ertifactid> hibernate-core </artifactid> <in version> $ {hibernate.hibernate} </prewing> </pedigency> <dependency> <proupId> org.hibernate </pr grouped> <ptifactid> hibernet-sentitymanageger </ artifactid> <version> $ {hibernate.version} </ version> </ dépendance> <! - Hibernate JPA end -> <! - Hibernate Echache start -> <dependency> <proupId> org.slf4j </prouvenid> <eRtifactid> slf4j-api </ artifactid> <version> 1.6.1 </ version> </ dépendance> <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 -> <! - Alibaba's Connection Pool Druid start -> <dependency> <proupId> com.alibaba </proupId> <ArtefactId> Druid </letefactid> <version> $ {druid.version} </ version> </Dependance> <! - End - Alibaba's Connection Pool Duid End -> <! <! - Hibernate Echache end -> <! - Hibernate Echache end -> <! - Alibaba's Connection Pool Druid End -> <! - Shiro start -> <pependency> <proupId> org.apache.shiro </prouvenid> <artifactid> shiro-all </ artifactid> <version> $ {shiro.version} </ version> <! - Shiro end -> <! - Velocity start -> <dependency> <proupId> org.apache.velocity </proncId> <ArtefactId> Velocity </ artifactid> <version> 1.6 </ version> </ Dependency> <Dedency> <ProupId> org.apache.vecity </proupId> <ArtifActid> Velocity-Tools </ ArtifactID> 2.0 <ArtifActid> Velocity-Tools </ Dependency> <! - Velocity end -> <! - Lucene Text de recherche de texte de recherche Moteur Démarrer -> <dependency> <proupId> org.apache.lucene </pruipId> <Artifactid> Lucene-core </letefactid> <version> $ {lunene.apache} </ version> </Dependency> <fedency> <proupId> Org.apache.lucène </ groupid> <ArtefactId> Lucene-Analyzers-Common </ Artifactid> <Dersion> $ {lunene.Version} </DERNIFRIENT> </DENDENCENCE> <Dependance> <ProupId> org.apache.lucene </proupId> <Artefactid> Lucene-QueryParser </ Artifactid> <version> $ {Lucène.Version} </ version> <GroupId> org.apache.lucene </rom grouped> <Artifactid> Lucene-Memory </ ArtifactId> <De version> $ {lunene.Pache.Lucene </preendency> <pedigency> <proupId> org.apache.lucene </prouventid> <Artifactid> Lucene-Highlighter> Artifactid> </Dependency> <! - Notez qu'Ikanalyzer n'a pas de coordonnées Maven, veuillez les ajouter au référentiel local vous-même -> <dependency> <proupId> org.wltea.analyzer </proupId> <ArtifActid> ikanalyzer </ artifactid> <version> 2012FF_U1 </DERNIFROITION> <SystemPath> $ {basasedir} /src/main/webapp/web-inf/lib/ikanalyzer2012ff_u1.jar </ systemPath> </Dependency> <! - Lucene Text Search Engine End -> <! - LOG4J START -> <Dendency> <proufactID> LOXE </proupId> <ArtifActid> Log4j </ ArtiFact> <version> $ {log4j.version} </ version> </ dépendance> <! - Log4j end -> <! - JSON Analyse de mise en forme obligatoire -> <dependency> <proupId> Commons Beanutils </proupId> <ArtifActid> Commons Beanutils </distifactid> <version> 1.8.3 </DERNIFROITION> </Dependency> <Dependance> <GroupId> Commons-Collections </rom grouped> <Artifactid> Commons-Collections </ ArtifactId> <Dersion> 3.2.1 </ Version> </Dependency> <Dedency> <ProupId> Net.Sf.EZMORPH </ GroupId> <ArtefactId> Ezmorph </ Artifactid> <version> 1.0.6 </DERVIERSE> </Dedency> <GroupId> Commons-Lang </ GroupId> <Artifactid> Commons-Lang </ ArtifactId> <Dersion> 2.5 </Se version> </Dependency> <Dependency> <ProupId> Comons-Logging </proupId> <ArtifActid> Commons-Logging </ Artifactive> <Derson> 1.2 </DERNIFRENCE> </Dedency> <predency> <proupId> Net.SF.jon </pedency> </pedidency> <poulid> net.swon <ArtefactId> Json-lib </ artifactId> <DERSION> 2.4 </ Version> <Type> JAR </TYPE> <CASSIFIER> JDK15 </CASSIFIER> <COPE> COMPILE </ SCOPE> </ Dependency> <! - JSON PARSING JAR END -> <! - POI Start -> <Dedency> <GroupID> ORG.APACHE.POI </ GroupID> <ArtefactId> POI </ artifactid> <DERSE> $ {poi.version} </ version> </ dépendance> <! - POI end -> <! - Email start -> <dependency> <proupId> com.sun.mail </prouprid> <aRtifactid> javax.mail </ artifactid> <version> 1.5 <fuild> <stalName> JeepAtForm-Admin </ FinalName> </ Build> </ Project>

Concevez la base de données et écrivez une classe d'entité:

 package org.ruses.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; import javax.persetence.Generradence. javax.persistence.generationType; import javax.persistence.id; import javax.persistence.joincumn; import javax.persistence.jointable; import javax.persistence.manytomany; import javax.persistence.Table; importer javax.persistence.temporal; importation. javax.persistence.TemporalType; / ** * Classe d'entité d'informations utilisateur * @author nicky * / @ entité @ table (name = "SYS_USER") Classe publique User {/ ** User ID ** / private int id; / ** Nom d'utilisateur ** / Nom d'utilisateur de chaîne privée; / ** Mot de passe utilisateur ** / mot de passe de chaîne privée; / ** Numéro de téléphone mobile ** / Téléphone int privé; / ** Sexe ** / Sexe à chaîne privée; / ** e-mail ** / Email de la chaîne privée; / ** Remarque ** / Marque de chaîne privée; / ** Niveau utilisateur ** / rang privé String Rank; / ** La dernière fois ** / Date privée Lastlogin; / ** Login ip ** / private String Loginip; / ** Path d'image ** / String privé ImageUrl; / ** Temps d'enregistrement ** / Date privée Regime; / ** si le compte est verrouillé ** / private booléen verrouillé = boolean.false; rôles privés <rôle>; @GeneratedValue (Strategy = GenerationType.Identity) @id public int getID () {return id; } public void setid (int id) {this.id = id; } @Column (unique = true, longueur = 100, nullable = false) public String getUserName () {return username; } public void setUsername (String username) {this.userName = username; } @Column (longueur = 100, nullable = false) public String getPassword () {return mot de passe; } public void setPassword (String Motword) {this.password = mot de passe; } public int gephone () {return téléphone; } public void SetPhone (int téléphone) {this.phone = téléphone; } @Column (longueur = 6) String public getSEX () {return sexe; } public void setSex (String Sex) {this.sex = sexe; } @Column (longueur = 100) String public getemail () {return e-mail; } public void setEmail (chaîne e-mail) {this.email = e-mail; } @Column (longueur = 30) public String getmark () {return mark; } public void setmark (String Mark) {this.mark = mark; } @Column (longueur = 10) String public getRank () {Retour Rank; } public void setRank (String Rank) {this.Rank = rank; } @Temporal (temporaltype.date) Date publique getlastlogin () {return lastlogin; } public void setlastlogin (date lastlogin) {this.lastlogin = lastlogin; } @Column (longueur = 100) String public getLoginip () {return Loginip; } public void setLoginip (String Loginip) {this.loginip = loginip; } @Column (longueur = 100) String public getImageUrl () {return ImageUrl; } public void setimageUrl (String imageUrl) {this.imageUrl = imageUrl; } @Temporal (temporaltype.date) @Column (nullable = false) public date getRegTime () {return regain; } public void setRegTime (date RegTime) {this.regtime = regain; } public boolean getlocked () {return verrouillé; } public void setLocked (boolean verrouillé) {this.locked = verrouillé; }}

Écrivez une interface pour implémenter l'interface PAGINGETORTINGREPOSITORY de Spring Data Framework

 package org.muses.jeepartform.Repository; import org.muses.jeepartform.model.entity.user; import org.springframework.data.domain.page; import org.springframework.data.domain.pagable; import org.springframework.data.data.domain.pagable; import; org.springframework.data.jpa.repository.jParepository; import org.springframework.data.repository.query; import org.springframework.data.repository.pagingandsortingRepository; import org.springframework.data.repository.Query.Pames; java.util.date; Interface publique UserRepository étend PAGINYAndSortingRepository <utilisateur, Integer> {/ * utilisateur findByUserName (String Username); @Query ("de l'utilisateur u où u.Username =: username et u.password =: mot de passe") utilisateur findByUserNameandAdpassword (@param ("username") String username, @param ("mot de passe") mot de passe de chaîne); @Query ("de l'utilisateur u où u.id =: id") utilisateur findbyid (@param ("id") int id); @Query ("From User U Where Date_format (U.LastLogin, 'Yyyy-mm-dd') entre date_format ((: startDate), 'Yyyy-mm-dd')") page <User> search (@param ("startdate") date startdate, @ param (")") Pagable pagable); * /}

Implémentation de classe affaires:

 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.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.pecification; import org.springframework.sterletype. org.springframework.transaction.annotation.transactional; importer javax.persistence.criteria.criteriaBuilder; importation javax.persistence.criteria.criteriaQuery; / ** * @description Class for User Information Management * @Author Nicky * @Adate MARCHE MARCH userRepository; / ** * Build PageRequest objet * @param num * @param size * @param asc * @param string * @return * / private pagerequest buildPageRequest (int num, int size, tri, null, string); } / ** * Obtenez toutes les informations du menu et affichez-les sur les pages * @param pageno * Nombre actuel de pages * @param pagesize * Nombre de pages par page * @return * / @Transactional Public Page <Serser> findall (int pageno, int pagesize, sort.direction dir, string str) {pageRequest request = buildpagest; Page <ser user> users = userRepository.Findall (request); retourner les utilisateurs; }}

La classe de contrôle adopte le framework SpringMVC, écrivez d'abord une base de base pour implémenter certaines fonctions générales:

 package org.muses.jeepatform.web.controller; import javax.servlet.http.httpservletRequest; import org.slf4j.logger; import org.slf4j.loggerfactory; import org.springframework.web.contex org.springframework.web.context.request.servletRequestAttributes; import org.springframework.web.servlet.modelandView; classe publique BasEController {logger log = null; / ** * Get Log Object * @return * / public Logger getInstance () {if (log == null) {log = loggerfactory.getLogger (BasEController.class); } Retour log; } / ** * GET OBJET DE PROBLÈME * / PUBLIC HttpServletRequest getRequest () {httpServLetRequest request = ((servLetRequestAttributes) requestContexTholder.getRequestAttributes ()). GetRequest (); demande de retour; } / ** * Obtenez ModelandView * / public ModelAndView GetModelandView () {return new ModelAndView (); }}

Contrôle Implémentation de la classe:

 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.constants; org.muses.jeepatform.core.excelviewwrite; import org.mus.jeepatform.core.javaemailsender; import org.mus.jeepatform.model.entity.user; import org.muses.jeepatform.service.uservice; import; org.ruses.jeepatform.utils.datejsonvalueprocess org.springframework.data.domain.sort; import org.springframework.steretype.controller; import org.springframework.ui.model; import org.springframework.web.bind.annotation.requestmapping; importation org.springframework.web.bind.annotation. org.springframework.web.bind.annotation.responsebody; import org.springframework.web.servlet.modelandView; import javax.servlet.http.httpservletRequest; import javax.servlet.http.httpservletRequest; import java Java.util. *; / ** * Créé par Nicky le 2017/7/29. * / @ Requestmapping ("/ user") @ ControllerPublic Class UserController étend BasEController {@Autowired UserService UserService; / ** * interroger toutes les informations de l'administrateur et l'afficher sur les pages * @param demande * @param réponse * @param modèle * @return * / @requestmapping (value = "/ queryall", produit = "application / json; charset = utf-8") @ResponseBody Public ModelAwView Findall (HTTPServLETERS pageIndexstr = request.getParameter ("pageIndex"); // Nombre de pages par page 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, tri.direction.asc, "id"); mv.addObject ("totalCount", userpage.getTotAlements ()); mv.addObject ("pageIndex", pageIndex); // jsonconfig cfg = new JSONConfig (); // cfg.setExCluds (new String [] {"handler", "hibernatelazyInitializer"}); JSONConfig jcg = new JSONConfig (); jcg.registerjsonvalueprocesseur (date.class, new DateJsonValueprocessor ("yyyy-mm-dd")); JSONArray JSONArray = JSONArray.FromObject (UserPage.getContent (), JCG); //System.out.println (jsonArray.ToString ()); mv.addObject ("utilisateurs", jsonArray.toString ()); mv.setViewName ("admin / user / sys_user_list"); retour MV; }}

【Implémentation de page frontale】

Affichage de la page Implémentation, reportez-vous à jQuery.pagination.js (Pagination JS) et à Pagination.css (style de pagination CSS).

Vous pouvez le télécharger ici: //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 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"> <adread> <base href = "<% = basepath %>" rel = "external nofollow"> <aafol charset = "utf-8" /> <meta http-equiv = "x-ua-compatible" contenu = "ie = edge"> <meta name = "Viewport" contenu = "width = device-width, initial-scale = 1"> <ititle> insert title ici </ title> <! - boootstrap style -> <link type = "text / css" rel = "stylesheet" href = "<% = baspath%> plugins / page / css / bootstrap-3.3.5 rel = "external nofollow" /> <script type = "text / javascript" src = "<% = basepath%> plugins / page / js / jquery.min.js"> </ script> <! - js requis par jQuery.pagination Remarque qu'il doit être placé derrière jQuery.js -> <script type = "text / javascript" src = "<% = baspath%> plugins / page / js / jquery.pagination.js"> </ script> <script type = "text / javascript"> / ** Pour les opérations de pagination, utilisez le plugin jQuery.pagination ajouté par Nicky 20170729 start ** / // page actuelle varIndex = nombre ($ {pageIndex}); // Quantité de données var totalCount = nombre ($ {totalCount}); $ (document) .ready (function () {// liant à la pagination $ ("# pagination"). Pagination (totalCount, {rappel: pagesElectCallback, prev_text: '<Page précédente', next_tex "User / Queryall? PageIndex = __ id__" // Le JS PAGE remplace automatiquement "__id__" par le nombre actuel. obj.email; var lastlogin = obj.lastlogin; "<Td>" + Mark + "</td>" + "<Td>" + Phone + "</td>" + "<Td>" + Email + "</td>" + "<Td>" + Lastlogin + "</td>" + "<Td>" + Loginip + "</td>" + "<Td> <A href = 'javaScript: openEditDialog ("+ id +");' class = 'Bouncein'> Configurer le rôle </a> "+" </ tr> ";}); $ (" # contenu "). APPEND (html);}); // Cet événement est Function PageSelectCallback (index, jq) {} / ** Opération de pagination, en utilisant le plugin jQuery.Pagination Ajouter par Nicky 20170729 end ** / // checkbox's All / Anti-Select var isCheckall = false; function docheck () {if (isCheckall) {$ ("input [type = 'checkbox']"). Chaque (fonction () {this.checked = false;}); ischeckall = false; } else {$ ("input [type = 'checkbox']"). Chaque (fonction () {this.checked = true;}); isCheckall = true; }} </ script> </ head> <body> <br> <div> <div> <div> <div> <form> <input type = "Button" value = "Send Mail" onClick = "SendEmail ();" /> <input type = "Button" value = "Sendsms ();" /> <input type = "Button" value = "Exportexcel Table" onClick = "Exportexcel ();" /> <br> <br> <! - <input type = "text" id = "keyword" placeholder = "s'il vous plaît entrez le mot-clé"> date de <entrée type = "text" placeholder = "s'il vous plaît entrez la date de démarrage" value = "$ {startDate}" id = "startDate" name = "startDate" onclick = "wdatePick , maxdate: '# f {$ dp. $ d (/' enddate / ')}'}); "/> à <input type =" text "placeholder =" s'il vous plaît entrez la date fin , MinDate: '# f {$ dp. $ d (/' startDate / ')}'}); " /> <input type = "Button" value = "search" onClick = "DoSearch ();" /> -> </ form> <table id = "mTable"> <Thead> <tr> <th> <input type = "checkbox" onClick = "doCkeck ();" /> </ th> <th> numéro de série </ th> <th> nom d'utilisateur </ th> <th> Description </th> <th> mobile </th> <th> e-mail </ th> <th> la dernière connexion </th> <th> Last Login ip </th> <th> Operation </ Th> </tr> </-head> <tbody id = "contenu"> </tbody> <! - Demo -> </ div> </div> </div> </div> </div> </div> </div> </div> </ody> </html>

Affichage de la page frontale:

OK, ce blog est basé sur un projet open source GitHub en cours de développement. L'adresse du code du projet est: https://github.com/u014427391/jeepatform

Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.