欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用Bootstrap4 + Vue2实现分页查询的示例代码

程序员文章站 2022-07-28 19:10:39
写在前面 工程为前后端分离设计,使用nginx为前端资源服务器,同时实现后台服务的反向代理。后台为java web工程,使用tomcat部署服务。 前端框架:b...

写在前面

工程为前后端分离设计,使用nginx为前端资源服务器,同时实现后台服务的反向代理。后台为java web工程,使用tomcat部署服务。

  1. 前端框架:bootstrap4,vue.js2
  2. 后台框架:spring boot,spring data jpa
  3. 开发工具:intellij idea,maven

实现效果:

使用Bootstrap4 + Vue2实现分页查询的示例代码

会员信息

如何使用bootstrap+vue来实现动态table,数据的新增删除等操作,请查看使用bootstrap + vue.js实现表格的动态展示、新增和删除 。交代完毕,本文主题开始。

一、使用bootstrap搭建表格

表格区

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

分页区

<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对象及数据

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

初始化数据

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实现分页查询

controller接收请求

/**
 * 用户相关请求控制器
 * @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分页查询

@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中分享,您可以 点击查看或下载 ,拥抱开源,共享让世界更美好。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。