How to implement paging query in Bootstrap4 + Vue2-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to implement paging query in Bootstrap4 + Vue2

Jun 19, 2018 pm 02:55 PM

bootstrap vue Pagination

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

&lt;p class=&quot;row&quot;&gt;
   &lt;table class=&quot;table table-hover table-striped table-bordered table-sm&quot;&gt;
    &lt;thead class=&quot;&quot;&gt;
    &lt;tr&gt;
     &lt;th&gt;&lt;input type=&quot;checkbox&quot;&gt;&lt;/th&gt;
     &lt;th&gt;序号&lt;/th&gt;
     &lt;th&gt;会员号&lt;/th&gt;
     &lt;th&gt;姓名&lt;/th&gt;
     &lt;th&gt;手机号&lt;/th&gt;
     &lt;th&gt;办公电话&lt;/th&gt;
     &lt;th&gt;邮箱地址&lt;/th&gt;
     &lt;th&gt;状态&lt;/th&gt;
    &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
    &lt;tr v-for=&quot;(user,index) in userList&quot;&gt;
     &lt;td&gt;&lt;input type=&quot;checkbox&quot; :value=&quot;index&quot; v-model=&quot;checkedRows&quot;&gt;&lt;/td&gt;
     &lt;td&gt;{{pageNow*10 + index+1}}&lt;/td&gt;
     &lt;td&gt;{{user.id}}&lt;/td&gt;
     &lt;td&gt;{{user.username}}&lt;/td&gt;
     &lt;td&gt;{{user.mobile}}&lt;/td&gt;
     &lt;td&gt;{{user.officetel}}&lt;/td&gt;
     &lt;td&gt;{{user.email}}&lt;/td&gt;
     &lt;td v-if=&quot;user.disenable == 0&quot;&gt;正常&lt;/td&gt;
     &lt;td v-else&gt;注销&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/tbody&gt;
   &lt;/table&gt;
  &lt;/p&gt;

Copy after login

Paging area

&lt;p class=&quot;row mx-auto&quot;&gt;
   &lt;ul class=&quot;nav justify-content-center pagination-sm&quot;&gt;
    &lt;li class=&quot;page-item&quot;&gt;
     &lt;a href=&quot;#&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; class=&quot;page-link&quot;&gt;&lt;i class=&quot;fa fa-fast-backward&quot; @click=&quot;switchToPage(0)&quot;&gt; &lt;/i&gt;&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;page-item&quot;&gt;
     &lt;a href=&quot;#&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; class=&quot;page-link&quot;&gt;&lt;i class=&quot;fa fa-backward&quot; @click=&quot;switchToPage(pageNow-1)&quot;&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;page-item&quot; v-for=&quot;n in totalPages&quot; :class=&quot;{active:n==pageNow+1}&quot;&gt;
     &lt;a href=&quot;#&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; @click=&quot;switchToPage(n-1)&quot; class=&quot;page-link&quot;&gt;{{n}}&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;page-item&quot;&gt;
     &lt;a href=&quot;#&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; class=&quot;page-link&quot;&gt;&lt;i class=&quot;fa fa-forward&quot; @click=&quot;switchToPage(pageNow+1)&quot;&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;page-item&quot;&gt;
     &lt;a href=&quot;#&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; class=&quot;page-link&quot;&gt;&lt;i class=&quot;fa fa-fast-forward&quot; @click=&quot;switchToPage(totalPages-1)&quot;&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;/li&gt;
   &lt;/ul&gt;
  &lt;/p&gt;

Copy after login

2. Initialize the Vue object And data

Create Vue object

var vueApp = new Vue({
  el:&quot;#vueApp&quot;,
  data:{
   userList:[],
   perPage:10,
   pageNow:0,
   totalPages:0,
   checkedRows:[]
  },
  methods:{
   switchToPage:function (pageNo) {
    if (pageNo &lt; 0 || pageNo &gt;= this.totalPages){
     return false;
    }
    getUserByPage(pageNo);
   }
  }
 });

Copy after login

Initialize data

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

Copy after login

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

Copy after login

3. Use JPA to implement paging Query

controller receives request

/**
 * 用户相关请求控制器
 * @author louie
 * @date 2017-12-19
 */
@RestController
@RequestMapping(&quot;/user&quot;)
public class UserController {

 @Autowired
 private UserService userService;

 /**
 * 分页获取用户
 * @param pageNow 当前页码
 * @return 分页用户数据
 */
 @RequestMapping(&quot;/{pageNow}&quot;)
 public Page&lt;User&gt; findByPage(@PathVariable Integer pageNow){
 return userService.findUserPaging(pageNow);
 }
}

Copy after login

JPA paging query

@Service
public class UserServiceImpl implements UserService {

 @Value(&quot;${self.louie.per-page}&quot;)
 private Integer perPage;

 @Autowired
 private UserRepository userRepository;

 @Override
 public Page&lt;User&gt; findUserPaging(Integer pageNow) {
 Pageable pageable = new PageRequest(pageNow,perPage,Sort.Direction.DESC,&quot;id&quot;);
 return userRepository.findAll(pageable);
 }
}

Copy after login

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.

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn