分页器的封装

最新推荐文章于 2023-12-18 22:20:46 发布

Y-ou

最新推荐文章于 2023-12-18 22:20:46 发布

阅读量463

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_68006893/article/details/125668542

版权

本文介绍如何在Vue.js项目中封装一个分页器组件。通过接收父组件传入的当前页数（pageNo）、每页数据量（pageSize）和总数据条数（total），计算得出总页数（totalPage）。同时，还涉及到连续页码数（continues）的设置，以实现灵活的分页展示。

摘要由CSDN通过智能技术生成

效果图

get获得的参数（通过父组件传递到子组件）：

pageNo: 当前页数

pageSize:每页多少条数据

total:数据总条数

continues：连续页码数

计算出来的数：totalPage 总页数 =向上取整Math.ceil(this.total/this.pageSize)

拓展知识：

 $emit 子组件可以使用 $emit 触发父组件的自定义事件

父组件GET请求参数
    getPageNo(pageNo){
      // 整理带给服务器参数
      this.searchParams.pageNo=pageNo;
      // 再次发请求
      this.getData()
    },

子组件HTML部分
<template>
  <div class="pagination">
    <!-- 上一页  
    当前页为1时，上一页不可点击；
    点击上一页，页数-1并且再次向服务器请求数据-->
    
    <button :disabled="pageNo

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Y-ou

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分页器的封装

分页器的封装
复制链接

扫一扫

一个用vue实现的分页组件

08-10

一个用vue实现的分页组件

Vue分页插件

01-08

Vue分页插件，直接放到HTML页面即可使用。不需要做多余的修改

参与评论您还未登录，请先登录后发表或查看评论

在固定框高内图片剧中显示，不变形

12-05

514

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com...

自定义分页器

dd345898084的博客

04-20

自定义分页面 class Pagination(object): def __init__(self,current_page,all_count,per_page_num=2,pager_count=11): """ 封装分页相关数据 :param current_page: 当前页 :para...

基于vue的分页插件

qq_38983002的博客

07-29

410

相信大家用过很多jquery的分页插件，那这次就用一用基于vue的分页插件。这里的环境用的是springboot 首先要引入pagehelper的jar文件，版本是1.2.3，配置文件也需要配置一下核心代码： DAO层接口： 1 List<Article> selectAll(); mapper文件：只需要写一个简单的查询即可。 ...

Vue 分页器组件

xoner5的博客

04-03

1248

<template> <div class="pagination"> <button>上一页</button> <button @click="changecurentpage(1)" v-if="startEnd.start > 1">1</button> <button v-if="startEnd.start > 2">···</button> <.

使用Vue实现一个分页组件

weixin_34283445的博客

03-08

629

分页是WEB开发中很常用的功能，尤其是在各种前后端分离的今天，后端API返回数据，前端根据数据的count以及当前页码pageIndex来计算分页页码并渲染到页面上已经是一个很普通很常见的功能了。从最开始的jquery时代到现在的各种各样的前端框架时代，分页功能都是必不可少的。分页大多数（基本上）情况下都是对异步数据列表的处理，这里首先需...

vue分页组件

qq_49975047的博客

02-27

487

分页组件、分页组件事件传参

vue开发分页组件

m0_52364694的博客

11-18

176

基于vue的分页插件（含源码）

05-09

基于vue开发的分页插件，包含源码，可直接下载使用，也可参考学习

07-20

使用vue编写的分页器组件，可设置初始页码，支持输入页码跳转

Vue分页组件.vue

06-22

（原创）这是一个功能比较完善的vue分页组件，包含基本的数据统计，页面跳转，修改每页显示条数，当前页居中显示等，有兴趣的可以直接拿来用。

这是由Vue实现的分页插件

08-12

由Vue实现的分页插件(Paging plug-in implemented by Vue )

vue2.0实现分页组件

weixin_34185560的博客

06-21

141

最近使用vue2.0重构项目, 需要实现一个分页的表格, 没有找到合适的分页组件, 就自己写了一个, 效果如下: 该项目是使用 vue-cli搭建的, 如果你的项目中没有使用webpack,请根据代码自己调整: 首先新建pagination.vue文件, 所有组件的代码都写在这里, 写这样的组件并没有什么太大的难度, 主要是解决父子组件之间值传递的问题 <template&gt...

vue实现通用分页控件，支持前端分页、后端分页。

最新发布

蒾酒的博客

12-18

1149

如果是后端做分页的话，就传递count属性值这个属性代表总数据量，需要用来计算总页数如果是前端做分页，就传递itemList属性值，这个属性表示总数据数组，根据这个数组的长度可以计算页数，根据页码可以对数组进行截取并把截取的单页数据通过自定义事件传递给父组件，父组件更新列表数据渲染itemList: {//数据列表},count: {//有值则分页功能后端实现},})通过自定义事件可以把页码或者是分页后的数据传递给父组件。

vue实现分页组件

Polaris_tl的博客

12-09

431

通过vue实现分页组件。实用、简单、易上手，可根据实际情况灵活调整，复用性较高。

使用vue实现分页

haohulala的博客

04-09

6114

使用vue实现分页的逻辑并不复杂，接收后端传输过来的数据，然后根据数据的总数和每一页的数据量就可以计算出一共可以分成几页。可以发现list中的每一项就是构成我们前端页面中一行的数据，这在vue中体现为数据的绑定，下面就来看看详细的html代码。上图中方框内的数据就是后端返回的数据，msg中记录的就是我们需要用到的数据，里面有交给数据项。isnull：表示一次查询的结果数量是否为0，用来控制没有结果的显示逻辑。我编写了一个简单的前端页面用来查询数据，页面一共有几个逻辑。具体的效果可以看下面的演示。

springboot封装mybatisplus分页

07-25

你可以通过以下步骤封装Spring Boot和MyBatis Plus的分页功能： 1. 首先，确保你已经添加了Spring Boot和MyBatis Plus的依赖项到你的项目中。 2. 创建一个自定义的分页查询类，例如 `PageQuery`，用于封装分页查询的参数。该类应包含以下属性： ```java public class PageQuery { private int page; // 当前页码 private int size; // 每页显示的记录数 // 省略getter和setter方法 } ``` 3. 在你的数据访问层（如DAO或Mapper）中，使用MyBatis Plus提供的 `Page` 类来进行分页查询。例如： ```java import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import org.apache.ibatis.annotations.Param; public interface UserMapper { Page<User> getUserList(Page<User> page, @Param("query") PageQuery query); } ``` 4. 在你的服务层（Service）中，调用上一步定义的方法来进行分页查询。例如： ```java import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; @Service public class UserService { @Autowired private UserMapper userMapper; public Page<User> getUserList(PageQuery query) { Page<User> page = new Page<>(query.getPage(), query.getSize()); return userMapper.getUserList(page, query); } } ``` 5. 在你的控制器（Controller）中，注入服务类，并处理分页查询请求。例如： ```java import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; @RestController @RequestMapping("/users") public class UserController { @Autowired private UserService userService; @GetMapping public Page<User> getUserList(PageQuery query) { return userService.getUserList(query); } } ``` 现在，你可以通过发送 GET 请求到 `/users` 接口来获取分页查询结果。请求中可以包含 `page` 和 `size` 参数来指定页码和记录数。例如：`/users?page=1&size=10`。这样，你就成功封装了Spring Boot和MyBatis Plus的分页功能。希望对你有所帮助！