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

写在前面

工程为前后端分离设计,使用Nginx为前端资源服务器,同时实现后台服务的反向代理。后台为Java Web工程,使用Tomcat部署服务。

  1. 前端框架:Bootstrap4,Vue.js2
  2. 后台框架:spring boot,spring data JPA
  3. 开发工具:IntelliJ IDEA,Maven

实现效果:

会员信息

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

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

您可能感兴趣的文章:

  • Vue.js bootstrap前端实现分页和排序
  • Vue.js结合bootstrap实现分页控件
  • Vue Cli与BootStrap结合实现表格分页功能
  • vue2.0与bootstrap3实现列表分页效果
(0)

相关推荐

  • vue2.0与bootstrap3实现列表分页效果

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 直接引入vue的js文件进行页面渲染分页,不是vuex的哦,以下源码可以直接运行哟^_^ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用vue2.0与bootstrap3进行简单列表分页</title> <link href="http:

  • Vue Cli与BootStrap结合实现表格分页功能

    1.首先需要在vue-cli项目中配置bootstrap,jquery 2. 然后新建vue文件,如index.vue,index.vue内容如下: 3.配置路由即可运行实现. <template> <div class="tTable container body-content"> <div class="form-group"> <div class="form-group"> <div

  • Vue.js结合bootstrap实现分页控件

    本文为大家分享了使用vue.js结合bootstrap 开发的分页控件,供大家参考,具体内容如下 效果如下 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit

  • Vue.js bootstrap前端实现分页和排序

    写之前先抱怨几句.本来一心一意做.net开发的,渐渐地成了只做前端.最近项目基本都用java做后台,我们这些.net的就成了前端,不是用wpf做界面,就是用html写web页面. 深知自己前端技术不足,以前虽说用asp.net前后台都做,但是,对于前端都是用现成的js库和页面模板,对于vue.js等框架基本没有接触过. 只怪自己不会写java,最近做一个项目,负责前端,后台传来数据不分页,前端收到所有数据后自己分页.我尽是无语. 正好最近在看vue.js.这个页面就用它来实现吧.顺便总结下. 效

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

    写在前面 工程为前后端分离设计,使用Nginx为前端资源服务器,同时实现后台服务的反向代理.后台为Java Web工程,使用Tomcat部署服务. 前端框架:Bootstrap4,Vue.js2 后台框架:spring boot,spring data JPA 开发工具:IntelliJ IDEA,Maven 实现效果: 会员信息 如何使用Bootstrap+Vue来实现动态table,数据的新增删除等操作,请查看使用Bootstrap + Vue.js实现表格的动态展示.新增和删除.交代完毕,

  • 基于Mybatis Plus实现多表分页查询的示例代码

    注意:Mybatis Plus 3.0.7 版本才开始用[自定义sql]+[QueryWrapper],低版本不能使用,还是老实写SQL进行条件拼接 1.源码分析 在Wrapper<T>接口中就有如下方法 /** * 获取自定义SQL 简化自定义XML复杂情况 * 使用方法:自定义sql + ${ew.customSqlSegment} * 1.逻辑删除需要自己拼接条件 (之前自定义也同样) * 2.不支持wrapper中附带实体的情况 (wrapper自带实体会更麻烦) * 3.用法 ${e

  • springboot整合mybatis-plus实现多表分页查询的示例代码

    1.新建一个springboot工程 2.需要导入mybatis和mybatis-plus的依赖文件 <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.1.1</version> </dependency> <dependency> &l

  • ASP.NET MVC5 实现分页查询的示例代码

    对于大量数据的查询和展示使用分页是一种不错的选择,这篇文章简要介绍下自己实现分页查询的思路. 分页需要三个变量:数据总量.每页显示的数据条数.当前页码. //数据总量 int dataCount; //每页显示的数据条数 int pageDataCount; int pageNumber; 根据数据总量和每页显示的数据条数计算出总页数,根据当前页码和每页显示的数据条数计算出从数据库中读取数据的起始行号和结束行号. //总页数 int pageCount = (int)Math.Ceiling(d

  • oracle实现一对多数据分页查询筛选示例代码

    前言 今天项目测试运行的时候,遇到了一个奇怪的问题,这个问题说起来按sql语法的话是没有错误的 但是呢按照我们的业务来做区分就有些逻辑上的错误了, 下面请听我慢慢道来,在数据库中有两个数据, 先来看下第一次sql是如何写的 查询之后在外面做分页,很正常的逻辑,但是大家都发现了,这是一个多表查询,而且是一对多关系,这就有点问题了 先来看一个图 问题出现在哪呢? 1.需要对主表做分页数据查询, 如: limit 1,10 或 SELECT * FROM (SELECT A.* ,ROWNUM R F

  • MybatisPlus实现分页查询和动态SQL查询的示例代码

    目录 一.描述 二.实现方式 三. 总结 一.描述 实现下图中的功能,分析一下该功能,既有分页查询又有根据计划状态.开始时间.公司名称进行动态查询. 二.实现方式 Controller层 /** * @param userId 专员的id * @param planState 计划状态 * @param planStartTime 计划开始时间 * @param emtCode 公司名称-分身id * @return java.util.List<com.hc360.crm.entity.po.

  • Mybatis Plus 自定义方法实现分页功能的示例代码

    一般物理分页,即通过sql语句分页,都是在sql语句后面添加limit分页语句,在xml文件里传入分页的参数,再多配置一条sql,用于查询总数: <select id="queryStudentsBySql" parameterType="map" resultMap="studentmapper"> select * from student limit #{currIndex} , #{pageSize} </select&

  • Layui实现多条件查询的示例代码

    最近做一个档案系统,发现字段超多 带分页的多条件查询(分页需要后端分页,传page给后端才可实现,前端无法直接实现) 当我们点击搜索按钮时会筛选出输入值的相关数据,多条件查询是建立在数据之上,数据查询出来后开辟条件在用户输入的值不为空的情况下让查询出来的数据下面的某值等于用户输入的值,然后查询的数据返回到视图再重新加载渲染的表格,查询出来的数据是所筛选的出来的数据与用户输入的值相关. 多条件查询表单 <form class="layui-form" action="&q

  • Oracle分页查询性能优化代码详解

    对于数据库中表的数据的 Web 显示,如果没有展示顺序的需要,而且因为满足条件的记录如此之多,就不得不对数据进行分页处理.常常用户并不是对所有数据都感兴趣的,或者大部分情况下,他们只看前几页. 通常有以下两种分页技术可供选择. Select * from ( Select rownum rn,t.* from table t) Where rn>&minnum and rn<=&maxnum 或者 Select * from ( Select rownum rn,t.* fro

  • Python tkinter界面实现历史天气查询的示例代码

    一.实现效果 1. python代码 import requests from lxml import etree import re import tkinter as tk from PIL import Image, ImageTk from xpinyin import Pinyin def get_image(file_nam, width, height): im = Image.open(file_nam).resize((width, height)) return ImageT

随机推荐