基于 bootstrap 的 vue 分页组件
基于 bootstrap 的 vue 分页组件，我想会有那么一部分同学，在使用Vue的时候不使用单文件组件，因为不架设 NodeJS 服务端。那么网上流传的 *.vue 的各种分页组件可能无法使用的，我这里提供一个 *.js 的分页组件，下午刚写的，希望对大家有所帮忙，欢迎下载。
下面是如何使用的示例代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta charset="utf-8" />
<title>基于 bootstrap 的 vue 分页组件 - 演示</title>
<link href="Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
<div id="app" class="container">
<br />
<h4>基于 bootstrap 的 vue 分页组件 - 演示</h4>
<!-- 注：showListBar、showIndexBar 两个属性是可选项，注：="true" 其实是可以省略的 -->
<!-- 注：pageSize,barSize,pageSizeList 三个属性是可选项 -->
<pager show-list-bar :show-index-bar="true"
:page-size="30" :bar-size="10" :page-size-list="[1, 15, 25, 30]"
:total="1024" v-model="xxx" @change="pagechange();"></pager>
<!-- 注：total、v-model、change基本上来说，算是必选项了 -->
<hr />
当前页: {{ xxx }}
</div>
<script src="Scripts/vue-2.5.2.min.js"></script>
<script src="Scripts/vue-pager-1.0.js"></script>
<script>
new Vue({
el: "#app",
data: function () {
return {
xxx: 1,
}
},
methods: {
//翻页事件
pagechange: function () {
console.log("翻页了：", this.xxx);
},
}
});
</script>
</body>
</html>
组件的代码如下：
// 基于 bootstrap 的分页组件 by 周游
// vue-pager-1.0.js
Vue.component('pager', {
model: {
prop: 'pageIndex',
event: 'change'
},
props: {
"total": { required: true, type: Number }, //总记录数
"pageSize": Number, //页大小
"barSize": { type: Number, default:10 }, //页码器上，一次显示几页
"pageIndex": { required: true, type: Number}, //当前页 (v-model)
"pageSizeList": { type: Array, default: [10, 20, 30, 50, 100] }, //每页显示多少条的数组
"showListBar": { type: Boolean, default: false }, //显示“每页 X 条”栏
"showIndexBar": { type: Boolean, default: true }, //显示“第几页/共几页”栏
},
data: function () {
return {
pindex: 1, //当前页
psize: 10, //页大小
}
},
computed: {
//总页数 （计算值）
pcount: function () {
return parseInt((this.total - 1) / this.psize) + 1;
},
//页码集
indexes: function () {
//参数修正
this.pindex = this.pageIndex || 1;
if (isNaN(this.pindex)) this.pindex = 1;
if (this.pindex < 1) this.pindex = 1;
if (this.pindex > this.pcount) this.pindex = this.pcount;
//求indexes
var left = 1;
var right = this.pcount;
var bcenter = parseInt(this.barSize / 2);
var ar = [];
if (this.pcount > this.barSize) {
if (this.pindex > bcenter && this.pindex <= this.pcount - bcenter) {
left = this.pindex - bcenter
right = this.pindex + (bcenter - 1)
+ (this.barSize % 2); //奇数多显示一页
//console.log("中间的页", this.pindex);
} else {
if (this.pindex <= bcenter) {
left = 1
right = this.barSize;
//console.log("当前页是开始几页", this.pindex);
} else {
right = this.pcount;
left = this.pcount - (this.barSize - 1);
//console.log("当前页是最后几页", this.pindex);
}
}
}
while (left <= right) {
ar.push(left)
left++
}
return ar;
},
showLast: function () {
return this.pindex != this.pcount
},
showFirst: function () {
return this.pindex != 1
}
},
watch: {
//监视如果 pindex 发生变化，就触发 change 事件
pindex: function () {
this.pageIndex = this.pindex;
this.$emit('change', this.pageIndex);
},
},
methods: {
//跳转页码
go: function (i) {
if (i < 1 || i > this.pcount) return;
this.pindex = i;
}
},
template: '<ul class="pagination">\
<li :class="{disabled:!showFirst}"><a href="javascript:void(0)" @click="go(1)">第一页</a></li>\
<li :class="{disabled:!showFirst}"><a href="javascript:void(0)" @click="go(pindex-1)">上一页</a></li>\
<li v-for="i in indexes" :class="{active:i==pindex}"><a href="javascript:void(0)" @click="go(i)">{{ i }}</a></li>\
<li :class="{disabled:!showLast}"><a href="javascript:void(0)" @click="go(pindex+1)">下一页</a></li>\
<li :class="{disabled:!showLast}"><a href="javascript:void(0)" @click="go(pcount)">第末页</a></li>\
<li v-if="showListBar" class="form-inline"><span>每页 \
<select class="form-control" v-model.number="psize" \
style="padding:0 0px;height:18px;width:48px;text-align:center;margin-top:-4px;" >\
<option v-for="ps in pageSizeList">{{ ps }}</option>\
</select> 条</span></li>\
<li v-if="showIndexBar" class="form-inline"><span>第 <input v-model.number="pindex" type="text" class="form-control" style="padding:0;height:18px;width:42px;text-align:center;margin-top:-4px;" /> 页 / 共{{pcount}}页</span></li>\
</ul>',
created: function () {
this.psize = this.pageSize || this.psize;
//一进来就触发 change 事件
this.$emit('change', this.pageIndex);
}
});
基于 bootstrap 的 vue 分页组件的更多相关文章
- 基于vue2.0的分页组件开发
今天安排的任务是写基于vue2.0的分页组件,好吧,我一开始是觉得超级简单的,但是越写越写不出来,写的最后乱七八糟的都不知道下句该写什么了,所以重新捋了思路,小结一下- 首先写组件需要考虑: 要从父组 ...
- 循序渐进BootstrapVue，开发公司门户网站（1）---基于Bootstrap网站模板构建组件界面
在前面随笔<使用BootstrapVue相关组件,构建Vue项目界面>概括性的介绍了BootstrapVue的使用过程,其实选用这个主要就是希望能够用来构建一些公司门户网站的内容,毕竟基于 ...
- 基于jQuery封装的分页组件
前言: 由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页 ...
- 一款基于Bootstrap的js分页插件bootstrap-paginator使用实例
Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作 ...
- java+springBoot+Thymeleaf+vue分页组件的定义
导读 本篇着重介绍java开发环境下,如何写一个vue分页组件,使用到的技术点有java.springBoot.Thymeleaf等: 分页效果图 名称为vuepagerbasic的分页组件,只包含上 ...
- 基于 Python 的自定义分页组件
基于 Python 的自定义分页组件 分页是网页中经常用到的地方,所以将分页功能分出来,作为一个组件可以方便地使用. 分页实际上就是不同的 url ,通过这些 url 获取不同的数据. 业务逻辑简介 ...
- vue分页组件table-pagebar
之前一直接触都是原始的前端模型,jquery+bootstrap,冗杂的dom操作,繁琐的更新绑定.接触vue后,对前端MVVM框架有了全新的认识.本文是基于webpack+vue构建,由于之前的工作 ...
- 基于avalon1.4.x ----分页组件编写
avalon分页组件 (1.4.x版本) 随着avalon2的推出,avalon1的官网已经不再维护了,现在似乎是找不到avalon 1.4版本的官方文档了,所以本文章所有的内容均不保证正确性,只能保 ...
- 基于jQuery封装的分页组件（可自定义设置）
jQuery封装的分页组件 前几天做了一个vue的组件分页,而现在需求是jquery的分页,我就根据我自己的需求写了一个.在网上找了很久的基于jquery的分页封装,可是都不是我想要的结果,那么今天我 ...
随机推荐
- 2012版辅助开发工具包（ADT）新功能特性介绍及安装使用
原文链接:http://android.eoe.cn/topic/android_sdk 2012年的Android辅助设备开发工具包(ADK)是Android开放设备协议(AOA)设备的最新参考实现 ...
- [svc]ssh+gg二步认证
1,安装依赖 yum install python-pip -y pip install docutils yum install gcc python-devel subversion pam pa ...
- 10个Python面试常问的问题
概述 Python是个非常受欢迎的编程语言,随着近些年机器学习.云计算等技术的发展,Python的职位需求越来越高.下面我收集了10个Python面试官经常问的问题,供大家参考学习. 类继承 有如下的 ...
- hibernate的flush()、refresh()、clear()针对一级缓存的操作的区别
首先session是有一级缓存的,目的是为了减少查询数据库的时间,提高效率,一级缓存的生命周期和session是一样的, session.flush()和session.clear()就针对sessi ...
- Android xUtils3源代码解析之网络模块
本文已授权微信公众号<非著名程序猿>原创首发,转载请务必注明出处. xUtils3源代码解析系列 一. Android xUtils3源代码解析之网络模块 二. Android xUtil ...
- 菜鸟学Java（十五）——Java反射机制（二）
上一篇博文<菜鸟学编程(九)——Java反射机制(一)>里面,向大家介绍了什么是Java的反射机制,以及Java的反射机制有什么用.上一篇比较偏重理论,理论的东西给人讲出来总感觉虚无缥缈, ...
- Gartner 2018新技术成熟度曲线
https://blog.csdn.net/BtB5e6Nsu1g511Eg5XEg/article/details/82047719 近日,Gartner发布了2018年新技术成熟度曲线,首次将生物 ...
- 数据加密 - TDE透明数据加密原理
首先需要确定你需要加密的列,Oracle 10g数据库将为包含加密列的表创建一个私密的安全加密密钥(表秘钥), 然后采用你指定的加密算法(AES或3DES)加密指定列的明文数据.此时,保护表的加密密钥 ...
- 笔记本貌似好了（HP 450 卡)
2013年9月份在苏宁上 买了个HP450,配置应该算还勉强,i5, 4G, 照理说一般LOL,DOTA,应该还可以.但是经常在打完一盘后,切出来,卡的要命,一直没有解决,昨天晚上虚拟机切出来,更是, ...
- Leetcode:Interleaving String 解题报告
Interleaving StringGiven s1, s2, s3, find whether s3 is formed by the interleaving of s1 and s2. For ...