Comment implémenter une requête de pagination dans Bootstrap4 + Vue2-js tutoriel-php.cn

Comment implémenter une requête de pagination dans Bootstrap4 + Vue2

亚连

Libérer： 2018-06-19 14:55:40

original

2606 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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);
   }
  }
 });

Copier après la connexion

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);
  }
 });
 }

Copier après la connexion

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:&quot;/user/&quot;+pageNow,
  success:function (datas) {
  vueApp.userList = datas.content;
  vueApp.totalPages = datas.totalPages;
  vueApp.pageNow = pageNow;
  },
  error:function (res) {
  console.log(res);
  }
 });
 }
</script>

Copier après la connexion

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);
 }
}

Copier après la connexion

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);
 }
}

Copier après la connexion

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 implémenter la validation de formulaire à l'aide de JQuery, que faut-il faire spécifiquement ?

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!