Maison > Article > interface Web > Comment implémenter une requête de pagination dans Bootstrap4 + Vue2
Cet article présente principalement l'exemple de code d'utilisation de Bootstrap4 + Vue2 pour implémenter la requête de pagination. Maintenant, je le partage avec vous et le donne comme référence.
Écrit à l'avant
Le projet est conçu pour séparer le front-end et le back-end, en utilisant Nginx comme serveur de ressources front-end, et en même temps en réalisant le proxy inverse du service back-end. L'arrière-plan est un projet Web Java, utilisant Tomcat pour déployer des services.
Framefront-end : Bootstrap4, Vue.js2
Framework back-end : Spring Boot, Spring Data JPA
Outils de développement : IntelliJ IDEA, Maven
Effet de réalisation :
Informations sur les membres
Comment utiliser Bootstrap + Vue pour implémenter une table dynamique, ajouter et supprimer des données et d'autres opérations, veuillez consulter Utilisation de Bootstrap + Vue.js pour implémenter l'affichage dynamique, l'ajout et la suppression de tables. Une fois l’explication terminée, le sujet de cet article commence.
1. Utilisez Bootstrap pour créer un tableau
Zone de tableau
<p class="row"> <table class="table table-hover table-striped table-bordered table-sm"> <thead class=""> <tr> <th><input type="checkbox"></th> <th>序号</th> <th>会员号</th> <th>姓名</th> <th>手机号</th> <th>办公电话</th> <th>邮箱地址</th> <th>状态</th> </tr> </thead> <tbody> <tr v-for="(user,index) in userList"> <td><input type="checkbox" :value="index" v-model="checkedRows"></td> <td>{{pageNow*10 + index+1}}</td> <td>{{user.id}}</td> <td>{{user.username}}</td> <td>{{user.mobile}}</td> <td>{{user.officetel}}</td> <td>{{user.email}}</td> <td v-if="user.disenable == 0">正常</td> <td v-else>注销</td> </tr> </tbody> </table> </p>
Zone de pagination
<p class="row mx-auto"> <ul class="nav justify-content-center pagination-sm"> <li class="page-item"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link"><i class="fa fa-fast-backward" @click="switchToPage(0)"> </i></a> </li> <li class="page-item"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link"><i class="fa fa-backward" @click="switchToPage(pageNow-1)"></i></a> </li> <li class="page-item" v-for="n in totalPages" :class="{active:n==pageNow+1}"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="switchToPage(n-1)" class="page-link">{{n}}</a> </li> <li class="page-item"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link"><i class="fa fa-forward" @click="switchToPage(pageNow+1)"></i></a> </li> <li class="page-item"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link"><i class="fa fa-fast-forward" @click="switchToPage(totalPages-1)"></i></a> </li> </ul> </p>
2, initialiser les objets et les données Vue
Créer des objets Vue
var vueApp = new Vue({ el:"#vueApp", data:{ userList:[], perPage:10, pageNow:0, totalPages:0, checkedRows:[] }, methods:{ switchToPage:function (pageNo) { if (pageNo < 0 || pageNo >= this.totalPages){ return false; } getUserByPage(pageNo); } } });
Initialiser les données
function getUserByPage(pageNow) { $.ajax({ url:"/user/"+pageNow, success:function (datas) { vueApp.userList = datas.content; vueApp.totalPages = datas.totalPages; vueApp.pageNow = pageNow; }, error:function (res) { console.log(res); } }); }
Code js complet :
<script> var vueApp = new Vue({ el:"#vueApp", data:{ userList:[], perPage:10, pageNow:0, totalPages:0, checkedRows:[] }, methods:{ switchToPage:function (pageNo) { if (pageNo < 0 || pageNo >= this.totalPages){ return false; } getUserByPage(pageNo); } } }); getUserByPage(0); function getUserByPage(pageNow) { $.ajax({ url:"/user/"+pageNow, success:function (datas) { vueApp.userList = datas.content; vueApp.totalPages = datas.totalPages; vueApp.pageNow = pageNow; }, error:function (res) { console.log(res); } }); } </script>
3. Utilisez JPA pour implémenter la requête de pagination
le contrôleur reçoit la demande
/** * 用户相关请求控制器 * @author louie * @date 2017-12-19 */ @RestController @RequestMapping("/user") public class UserController { @Autowired private UserService userService; /** * 分页获取用户 * @param pageNow 当前页码 * @return 分页用户数据 */ @RequestMapping("/{pageNow}") public Page<User> findByPage(@PathVariable Integer pageNow){ return userService.findUserPaging(pageNow); } }
Requête de pagination JPA
@Service public class UserServiceImpl implements UserService { @Value("${self.louie.per-page}") private Integer perPage; @Autowired private UserRepository userRepository; @Override public Page<User> findUserPaging(Integer pageNow) { Pageable pageable = new PageRequest(pageNow,perPage,Sort.Direction.DESC,"id"); return userRepository.findAll(pageable); } }
D'accord, maintenant la fonction est terminée, le code d'ingénierie a été partagé dans GitHub, vous pouvez cliquer pour afficher ou télécharger, adopter l'open source et partager pour rendre le monde meilleur.
Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.
Articles associés :
Comment implémenter une table à l'aide de jQuery+CSS
Utilisez le module http pour envoyer des requêtes via nodejs (détail tutoriel)
Comment implémenter l'internationalisation à l'aide d'Angular (tutoriel détaillé)
Comment configurer plusieurs classes à l'aide de Vue
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!