This article mainly introduces the sample code for using Bootstrap4 Vue2 to implement paging query. Now I share it with you and give it as a reference.
Written in front
The project is designed for front-end and back-end separation, using Nginx as the front-end resource server, and at the same time realizing the reverse proxy of the back-end service. The background is a Java Web project, using Tomcat to deploy services.
Front-end framework: Bootstrap4, Vue.js2
Back-end framework: spring boot, spring data JPA
Development tools: IntelliJ IDEA, Maven
Achievement effect:
Member information
How to use Bootstrap Vue to implement dynamic tables, add and delete data, and other operations, please check out Using Bootstrap Vue.js to implement dynamic display, addition, and deletion of tables. After the explanation is completed, the topic of this article begins.
1. Use Bootstrap to build the table
Table area
<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>
Paging area
<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. Initialize the Vue object And data
Create Vue object
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); } } });
Initialize data
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); } }); }
Complete js code:
<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. Use JPA to implement paging Query
controller receives request
/** * 用户相关请求控制器 * @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); } }
JPA paging query
@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); } }
Okay, now the function is completed, the project code has been shared in GitHub, you can click to view or Download, embrace open source, and share to make the world a better place.
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to implement a table using jQuery CSS
##Send a request using the http module through nodejs (detailed tutorial)
How to implement internationalization using Angular (detailed tutorial)
How to implement form validation using JQuery, what should be done specifically?
How to set up multiple Classes using Vue
The above is the detailed content of How to implement paging query in Bootstrap4 + Vue2. For more information, please follow other related articles on the PHP Chinese website!