Vue自制bootstrap风格分页器

111 浏览量更新于2024-09-01 收藏 89KB PDF 举报

本文主要介绍如何使用Vue实现一个简单的分页器，该分页器原本是基于jQuery的，但随着作者对Vue的掌握，将其转化为Vue插件。由于项目前后端未完全分离，作者选择自己编写插件而非使用成熟的Vue库。这个分页器采用Bootstrap风格，可完全自定义样式，方便适应不同的设计需求。在实现Vue分页器的过程中，首先需要确保项目中已经引入了必要的资源。对于Bootstrap风格的分页器，需要引入Bootstrap的CSS文件。如果希望使用自定义样式，可以跳过这一步。此外，还需要引入jQuery、Vue以及作者编写的`jgPaginator.js`脚本文件。以下是简化的HTML结构示例，展示了如何在页面中设置分页器： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>分页组件</title> <link rel="stylesheet" href="../../css/bootstrap.min.css"> <style> /* 自定义样式部分 */ </style> </head> <body> <div class="page-container"> <div class="page-content">  </div> <div id="pagination" class="jqPager hiddenPager">   </div> </div> <script src="jquery.min.js"></script> <script src="vue.min.js"></script> <script src="jgPaginator.js"></script> <script> // Vue实例及分页器初始化代码 </script> </body> </html> ``` 在JavaScript部分，你需要创建一个Vue实例，并配置分页器的相关参数，例如当前页数、总页数等。`jgPaginator.js`会根据这些参数生成相应的HTML结构。在Vue实例中，你可以监听分页器的事件，如页码点击，以便更新数据或触发其他业务逻辑。为了使分页器功能完整，你需要在Vue实例中定义数据和方法，例如： ```javascript new Vue({ el: '#app', data: { currentPage: 1, totalPages: 10, itemsPerPage: 10, // 每页显示的条目数量 items: [], // 存储所有数据 }, methods: { onPageChange(newPage) { this.currentPage = newPage; // 这里可以发送请求获取对应页码的数据 // 更新items数组 }, }, mounted() { // 初始化分页器 let pager = new jgPaginator('#pagination', { totalPages: this.totalPages, currentPage: this.currentPage, onPageChange: this.onPageChange, }); }, }); ``` 通过这种方式，Vue分页器就能与后端数据进行交互，展示并管理页面内容。同时，由于其完全自定义样式，你可以轻松调整分页器的外观以匹配项目的整体设计。请注意，实际项目中可能需要处理更多细节，如数据的异步加载、分页器的动态生成等。在使用示例代码时，务必理解每个部分的作用，以充分掌握分页器的使用。为了便于学习和使用，作者提供了包含所有资源的下载包，可以直接在项目中运行和调试。

Vue实现简单分页器实现简单分页器

提前说明：提前说明：这原本是一个Jquery分页器，因为公司项目前后端不分离，以前的分页用的是基于.net的分页器。后来我引入了

jquery分页器，在我掌握Vue之后,又自己写了一些基于Vue的插件（为什么不用成熟的Vue插件库，还是因为前后端没分离）

但是前后端相对最开始的混杂已经算是分得很开了。

分页器的样式是bootstrap风格的，是一个完全自定义样式的分页器，这意味着你可以很轻松把它改成你想要的样子(例子效果

图如下)。

所有的分页器DEMO，都不会太简单，所以想要真正的掌握（支配）一款好用的分页插件，请务必耐心看下面的使用示例代码

（本demo的下载地址，点击可以作为项目直接打开使用），另外也写了详细的注释并尽可能的保证简单好用。

引用bootstrap(如果你希望是bootstrap风格)

或者你完全可以自己写自己想要的风格！因为分页器的html结构是js生成的。

需要引用的脚本文件有(资源均在文章底部下载包里)。

按如下顺序引入：

1.jQuery

2.Vue

3.jgPaginator.js

贴代码，看注释：

<!DOCTYPE html>

<html>

<head>

<style>

html,

body {

width: 100%;

height: 100%;

}

.page-container {

width: 1200px;

border: 1px solid #000;

margin: 50px auto 0 auto;

overflow: hidden;

}

.page-content{

margin: 50px 0;

}

/*jqPaginator分页控件样式*/

.hiddenPager {

visibility: hidden;

}

.jqPager {

position: relative;

width: 100%;

下载后可阅读完整内容，剩余3页未读，立即下载

身份认证购VIP最低享 7 折!

30元优惠券

weixin_38654220

粉丝: 10

Vue自制bootstrap风格分页器

一个vue的简单分页组件

Vue.js 组件实现分页效果

Vue分页组件.vue

vue实现简易分页器

这是由Vue实现的分页插件

vue仿element实现分页器效果

vue.js 2.0实现简单分页效果

Vue分页器实现原理详解

Vue实现分页器详细教程

SpringBoot结合Vue实现高效分页功能全解

最新资源