Vue.js实现分页
- 效果图
- 代码
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>用户管理页面</title> <!-- Bootstrap core CSS -->
<link href="bootstrap-4.3.1-dist/css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/dashboard.css" rel="stylesheet"> <script src="bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- 异步提交的库 -->
<script src="js/vue-resource.min.js"></script>
<style>
.page-div-style {
width: 100%;
text-align: center;
} </style>
</head>
<body> <!-- container自适应 -->
<div class="container">
<!-- 为表格添加基础样式 ，
.table为任意<table>添加基本样式，
.table-striped可以给tbody之内的每一行添加斑马条纹样式
.table-bordered为表格和其中的每个单元格增加边框
--> <table class="table table-bordered">
<!-- 表格标题行的容器元素，用来识别表格列 -->
<thead>
<tr>
<!-- 特殊的表格单元格，用来识别行或列 -->
<th>序号</th>
<th>用户名</th>
<th>昵称</th>
<th>手机号</th>
<th>邮箱</th>
<th>操作</th>
</tr>
</thead>
<!-- 表格主题中的表格行的容器元素 -->
<tbody id="example">
<!-- 一组出现在单行单元格的容器元素 -->
<tr v-for="item in items">
<td> {{ item.num }}</td>
<td> {{ item.username }}</td>
<td> {{ item.avatar }}</td>
<td> {{ item.phone }}</td>
<td> {{ item.email }}</td>
<td>
<!--<button class="btn btn-warning" v-bind:value="item.id" v-on:click="reviewClick">
审核
</button>-->
<button class="btn btn-warning" v-bind:value="item.id" v-on:click="editorClick">
编辑
</button>
<!--
data-target：想要在页面上加载的模拟框的目标。
data-toggle：用于打开模态窗口。
-->
<button class="btn btn-warning" v-bind:value="item.id" v-on:click="deleteClick">
删除
</button> </td>
</tr>
</tbody>
</table>
<div class="page-div-style" id="page">
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item" v-show="isShowPrevious"><a class="page-link" v-on:click="previous">Previous</a>
</li>
<li class="page-item" v-for="item in pageCounts" v-on:click="pageClick"
v-bind:class="{active : item.isActive}">
<a class="page-link">{{item.pages}}</a> <li class="page-item">
<a class="page-link" v-show="isShowNext" v-on:click="next">Next</a>
</li>
</ul>
</nav> </div> </div> </body>
<script>
var v = new Vue({
el: '#page',
data: {
pageCounts: [],
curPage: 1,
start: 1,
end: 5,
total: 0,
pageCount: 5,
pages: 0,
isShowPrevious: false,
isShowNext: false,
},
methods: {
next() {
v.curPage++;
var param = {"pageCount": v.pageCount, "curPage": v.curPage, "total": v.total}
sendPost(param);
},
previous() {
v.curPage--;
var param = {"pageCount": v.pageCount, "curPage": v.curPage, "total": v.total}
sendPost(param);
},
pageClick(event) {
//
v.curPage = event.target.innerHTML;
var param = {"pageCount": v.pageCount, "curPage": v.curPage, "total": v.total}
sendPost(param);
console.log(event.target.innerHTML);
}
}
})
var vm = new Vue({
el: '#example',
data: {
items: [],
},
methods: {
reviewClick(event) {
//获取id },
editorClick(event) {
//获取id
//console.log(event.target.value);
var userIframe = window.parent.document.getElementById('userIframe');
userIframe.src = "user_info.html?id=" + event.target.value;
//window.location.href = "user_info.html?id=" + event.target.value;
},
deleteClick(event) {
Vue.http.get('/deleteUserById/' + event.target.value).then(function (res) {
console.log(JSON.parse(res.bodyText));
var param = {"pageCount": v.pageCount, "curPage": v.curPage, "total": v.total}
sendPost(param);
}, function (res) { })
console.log("删除" + event.target.value);
},
}
})
var param = {"pageCount": v.pageCount, "curPage": v.curPage, "total": v.total} sendPost(param); function sendPost(param) {
Vue.http.post('/allUser', param).then(function (res) {
//请求成功
var result = JSON.parse(res.bodyText);
var data = result[0];
var sum = result[1];
v.total = Math.ceil((sum.total / sum.pageCount));
if (v.total < 5)
v.end = v.total;
//将分页的数据清空为0
v.pageCounts.length = 0;
//判断上一页、下一页是否显示
if (sum.curPage == 1 && v.total == 1) {
v.isShowPrevious = false;
v.isShowNext = false;
} else if (sum.curPage == 1 && v.total != 1 && v.total != 0) {
v.isShowPrevious = false;
v.isShowNext = true;
} else if (sum.curPage == v.total) {
v.isShowPrevious = true;
v.isShowNext = false;
} else {
v.isShowPrevious = true;
v.isShowNext = true;
}
if (v.curPage == v.end && v.end < v.total) {
v.start++;
v.end++;
} else if (v.curPage == v.start && v.start > 1) {
v.start--;
v.end--;
}
//获取显示的椰树
for (var i = v.start; i <= v.end; i++) {
v.pageCounts.push({
pages: i,
isActive: i == v.curPage ? true : false,
})
} //获取服务端传递过来的数据，
vm.items.length = 0;
for (var i = 0; i < data.length; i++) {
//触发数组更新
vm.items.push({
num: (parseInt([i]) + 1),
username: data[i].username,
phone: data[i].phone,
email: data[i].email,
avatar: data[i].avatar,
id: data[i].id,
})
} }
, function (res) {
//请求失败
}
);
}
</script>
</html>
Vue.js实现分页的更多相关文章
- html+vue.js 实现分页可兼容IE
当功能比较简单,在单一html中使用vue.js分页展示数据,并未安装脚手架,或使用相关UI框架,此时需要手写一个分页器,不失为最合理最便捷的解决方案, 先看一下实现效果: 上代码: 1.简单搞一搞 ...
- Vue.js报错Failed to resolve filter问题原因
Vue.js报错Failed to resolve filter问题原因 金刚 vue Vue.js js javascript 之前使用vue.js写分页功能时,写了一个过滤器,发现一个比较奇怪的错 ...
- 基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...
- Vue.js的表格分页组件
转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更 ...
- vue.js 2.0实现的简单分页
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- 用vue.js的v-for，v-if，computed写一个分页样式
在学Vue,总想写个分页,先写了一个样式. 主要看思路: 思路简单,得到总页数,判断总页数,循环. 先判断总页数是否需要分页,总页数==1页就不分了. 再判断总页数<11就不用--. 总页数&g ...
- Vue.js 开发实践：实现精巧的无限加载与分页功能
本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景--分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想.与许多Todo List类的入门教程相比,更全面的展示使用Vue.js ...
- Vue.js——60分钟快速入门
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
- 利用Vue.js实现拼图游戏
之前写过一篇<基于Vue.js的表格分页组件>的文章,主要介绍了Vue组件的编写方法,有兴趣的可以访问这里进行阅读:http://www.cnblogs.com/luozhihao/p/5 ...
随机推荐
- 「HAOI 2018」染色
题目链接 戳我 \(Solution\) 观察题目发现恰好出现了\(s\)次的颜色有\(k\)种,不太好弄. 所以我们设\(a[i]\)表示为恰好出现了\(s\)次的颜色有至少\(i\)种的方案数,然 ...
- CyclicBarrier源码阅读
一种允许多个线程全部等待彼此都到达某个屏障的同步机制 使用 多个线程并发执行同一个CyclicBarrier实例的await方法时,每个线程执行这个方法后,都会被暂停,只有当最后一个线程执行完awai ...
- 剑指offer31----栈的压入、弹出序列
题目:输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是该压栈序列对 ...
- LeetCode 168. Excel表列名称（Excel Sheet Column Title）
题目描述 给定一个正整数,返回它在 Excel 表中相对应的列名称. 例如, 1 -> A 2 -> B 3 -> C ... 26 -> Z 27 -> AA 28 - ...
- 有关C#写一个WindowsService的两篇文章
1.http://blog.csdn.net/yysyangyangyangshan/article/details/10515035 上面的这篇文章一共两段,第二段讲的是使用代码来安装发布这个Win ...
- HearthBuddy 第一次调试
HearthBuddy https://www.jiligame.com/70639.html 解压缩包,打开hearthbuddy.exe直接运行就可以:不用替换mono.dll直接可用:不需要校验 ...
- vue-微信浏览器左上角返回按钮拦截
[需求] 在微信公众号开发中,有时需要对浏览器左上角返回按钮进行拦截处理相关的页面逻辑,而并不是让页面直接返回上一页,之前在这个细节点上的一直实现得不是很好.但看到京东购物公众号上的效果却实现得非常好 ...
- Activity 怎么和 Service 绑定，怎么在 Activity 中启动自己对应的 Service？
Activity 通过 bindService(Intent service, ServiceConnection conn, int flags)跟 Service 进行绑定,当绑定成功的时候 Se ...
- mysql--创建表，插入数据，修改表名，删除表，简单查询/内连接、左/右连接
创建表mm: 其中id为主键且自增长 ) primary key not null unique auto_increment, name ) not null, age ), class ) no ...
- SAS中的聚类分析方法总结
SAS中的聚类分析方法总结 说起聚类分析,相信很多人并不陌生.这篇原创博客我想简单说一下我所理解的聚类分析,欢迎各位高手不吝赐教和拍砖. 按照正常的思路,我大概会说如下几个问题: 1. 什么是 ...