使用Bootstrap4 + Vue2實(shí)現(xiàn)分頁查詢的示例代碼

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:23:23

使用Bootstrap4 + Vue2實(shí)現(xiàn)分頁查詢的示例代碼

使用Bootstrap4 + Vue2實(shí)現(xiàn)分頁查詢的示例代碼:寫在前面工程為前后端分離設(shè)計(jì)，使用Nginx為前端資源服務(wù)器，同時(shí)實(shí)現(xiàn)后臺(tái)服務(wù)的反向代理。后臺(tái)為Java Web工程，使用Tomcat部署服務(wù)。前端框架：Bootstrap4，Vue.js2 后臺(tái)框架：spring boot，spring data JPA 開發(fā)工具：IntelliJ I

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀使用Bootstrap4 + Vue2實(shí)現(xiàn)分頁查詢的示例代碼:寫在前面工程為前后端分離設(shè)計(jì)，使用Nginx為前端資源服務(wù)器，同時(shí)實(shí)現(xiàn)后臺(tái)服務(wù)的反向代理。后臺(tái)為Java Web工程，使用Tomcat部署服務(wù)。前端框架：Bootstrap4，Vue.js2 后臺(tái)框架：spring boot，spring data JPA 開發(fā)工具：IntelliJ I

寫在前面

工程為前后端分離設(shè)計(jì)，使用Nginx為前端資源服務(wù)器，同時(shí)實(shí)現(xiàn)后臺(tái)服務(wù)的反向代理。后臺(tái)為Java Web工程，使用Tomcat部署服務(wù)。

前端框架：Bootstrap4，Vue.js2
后臺(tái)框架：spring boot，spring data JPA
開發(fā)工具：IntelliJ IDEA，Maven

實(shí)現(xiàn)效果：

會(huì)員信息

如何使用Bootstrap+Vue來實(shí)現(xiàn)動(dòng)態(tài)table，數(shù)據(jù)的新增刪除等操作，請(qǐng)查看使用Bootstrap + Vue.js實(shí)現(xiàn)表格的動(dòng)態(tài)展示、新增和刪除。交代完畢，本文主題開始。

一、使用Bootstrap搭建表格

表格區(qū)

<div class="row">
 <table class="table table-hover table-striped table-bordered table-sm">
 <thead class="">
 <tr>
 <th><input type="checkbox"></th>
 <th>序號(hào)</th>
 <th>會(huì)員號(hào)</th>
 <th>姓名</th>
 <th>手機(jī)號(hào)</th>
 <th>辦公電話</th>
 <th>郵箱地址</th>
 <th>狀態(tài)</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>
 </div>

分頁區(qū)

<div 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>
 </div>

二、初始化Vue對(duì)象及數(shù)據(jù)

創(chuàng)建Vue對(duì)象

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

初始化數(shù)據(jù)

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

完整js代碼：

<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>

三、使用JPA實(shí)現(xiàn)分頁查詢

controller接收請(qǐng)求

/**
 * 用戶相關(guān)請(qǐng)求控制器
 * @author louie
 * @date 2017-12-19
 */
@RestController
@RequestMapping("/user")
public class UserController {

 @Autowired
 private UserService userService;

 /**
 * 分頁獲取用戶
 * @param pageNow 當(dāng)前頁碼
 * @return 分頁用戶數(shù)據(jù)
 */
 @RequestMapping("/{pageNow}")
 public Page<User> findByPage(@PathVariable Integer pageNow){
 return userService.findUserPaging(pageNow);
 }
}

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

好了，至此功能完成，工程代碼已在GitHub中分享，您可以點(diǎn)擊查看或下載，擁抱開源，共享讓世界更美好。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

使用Bootstrap4 + Vue2實(shí)現(xiàn)分頁查詢的示例代碼

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽： VUE 代碼 boot

熱門焦點(diǎn)

使用Bootstrap4 + Vue2實(shí)現(xiàn)分頁查詢的示例代碼

使用Bootstrap4 + Vue2實(shí)現(xiàn)分頁查詢的示例代碼

使用Bootstrap4 + Vue2實(shí)現(xiàn)分頁查詢的示例代碼

最新推薦

猜你喜歡

熱門推薦