vuejs实现表格分页
http://www.cnblogs.com/landeanfen/p/6054654.html#_label3_8
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<style type="text/css">
table thead tr th {
text-align: center;
}
</style>
</head>
<body>
<div style="padding:20px;" id="app">
<div class="panel panel-primary">
<div class="panel-heading">用户管理</div>
<table class="table table-bordered table-striped text-center">
<thead>
<tr>
<th>用户名</th>
<th>年龄</th>
<th>毕业学校</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<template v-for="(row, index) in rows ">
<tr v-if="index>=(curpage-1)*pagesize&&index<curpage*pagesize">
<td>{{row.Name}}</td>
<td>{{row.Age}}</td>
<td>{{row.School}}</td>
<td>{{row.Remark}}</td>
</tr>
</template>
</tbody>
</table>
</div>
<nav style="float:right;">
<ul class="pagination pagination-lg">
<template v-for="page in Math.ceil(rows.length/pagesize)">
<li v-on:click="PrePage()" id="prepage" v-if="page==1" class="disabled"><a href="#">上一页</a></li>
<li v-if="page==1" class="active" v-on:click="NumPage(page, $event)"><a href="#">{{page}}</a></li>
<li v-else v-on:click="NumPage(page, $event)"><a href="#">{{page}}</a></li>
<li id="nextpage" v-on:click="NextPage()" v-if="page==Math.ceil(rows.length/pagesize)"><a href="#">下一页</a></li>
</template>
</ul>
</nav>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<!-- <script src="vue.js"></script> -->
<script src="https://unpkg.com/vue@2.1.6/dist/vue.js"></script>
<script type="text/javascript">
//Model
var data = {
rows: [
{ Id: 1, Name: '小明', Age: 18, School: '光明小学', Remark: '三好学生' },
{ Id: 2, Name: '小刚', Age: 20, School: '复兴中学', Remark: '优秀班干部' },
{ Id: 3, Name: '吉姆格林', Age: 19, School: '光明小学', Remark: '吉姆做了汽车公司经理' },
{ Id: 4, Name: '李雷', Age: 25, School: '复兴中学', Remark: '不老实的家伙' },
{ Id: 5, Name: '韩梅梅', Age: 22, School: '光明小学', Remark: '在一起' },
{ Id: 6, Name: '韩梅梅', Age: 22, School: '光明小学', Remark: '在一起' },
{ Id: 7, Name: '韩梅梅', Age: 22, School: '光明小学', Remark: '在一起' },
{ Id: 8, Name: '韩梅梅', Age: 22, School: '光明小学', Remark: '在一起' },
{ Id: 9, Name: '韩梅梅', Age: 22, School: '光明小学', Remark: '在一起' },
{ Id: 11, Name: '韩梅梅', Age: 22, School: '光明小学', Remark: '在一起' },
],
pagesize: 3,
curpage:1,//当前页的页码
};
//ViewModel
var vue = new Vue({
el: '#app',
data: data,
methods: {
//上一页方法
PrePage: function (event) {
$(".pagination .active").prev().trigger("click");
},
//下一页方法
NextPage: function (event) {
$(".pagination .active").next().trigger("click");
},
//点击页码的方法
NumPage: function (num, event) {
if (this.curpage == num) {
return;
}
this.curpage = num;
$(".pagination li").removeClass("active");
if (event.target.tagName.toUpperCase() == "LI") {
$(event.target).addClass("active");
}
else {
$(event.target).parent().addClass("active");
}
if (this.curpage == 1) {
$("#prepage").addClass("disabled");
}
else {
$("#prepage").removeClass("disabled");
}
if (this.curpage == Math.ceil(this.rows.length / this.pagesize)) {
$("#nextpage").addClass("disabled");
}
else {
$("#nextpage").removeClass("disabled");
}
}
},
ready:function(){
var s = JSON.stringify(this.rows);
console.log(JSON.parse(s))
}
});
</script>
</body>
</html>
vuejs实现表格分页的更多相关文章
- 基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...
- Vue.js的表格分页组件
转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更 ...
- Vue2.0+ElementUI+PageHelper实现的表格分页
Vue2.0+ElementUI+PageHelper实现的表格分页 前言 最近做了一些前端的项目,要对表格进行一些分页显示.表格分页的方法有很多,从宏观上来说分为物理分页和逻辑分页,由于逻辑分页(即 ...
- Angular.js+Bootstrap实现表格分页
最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页. 先上图看看最终结果: 不得不说Angular.js代码风格很受人欢迎,几十行代码清晰简洁的实现了上面的功 ...
- 如何用angularjs制作一个完整的表格之二__表格分页功能
接上一次,这次主要介绍表格分页功能,由于项目需要这个案例是关于前端分页的方式,现在很少会这么用了,但如有需要可以参考其中的思路 html: 1.通过UL来展示页标,其中每个页标的li是通过异步加载从获 ...
- 【转】基于jquery的无刷新表格分页
效果图 css样式 <style> html,body{margin: 0;padding:0} a:focus {outline: none;} /* 通用表格显示 */ table, ...
- ASP.NET MVC 之表格分页
简单效果图:(框架:MVC+NHibernate) 要点: (1)首先建立表格分页Model(GridModel.cs) (2)然后建立数据展示页(PageCloth.cshtml) (3)再建分页版 ...
- dojo表格分页插件报错
dojo表格分页插件报错 (1)dojo/parser::parse() error ReferenceError {stack:(...),message:"layout is not d ...
- dojo表格分页之各个参数代表的意义（一）
下面是dojo表格分页参数代表的意义 //每页可以显示10/15/20/25/30条记录 (1)pageSizes: [10, 15, 20, 25,30], //每页显示的记录从多少到多少,共多少条 ...
随机推荐
- jqueryEasyui重新渲染
转载: jQuery EasyUI parser 的使用场景 | WebUI框架使用参考+http://www.easyui.info/archives/216.html parser,故名意思,就是 ...
- ipad mini2 升级9.0.2后解锁白屏解决
解锁白屏是个什么现象?就是当你用手指滑动解锁后出现输入密码的界面后,1秒之内屏幕变白,中间一个黑色的苹果,几秒之后重新回到滑动解锁的界面.我出现这个现象不是因为升级了9.0.2,而是升级了9.0.2之 ...
- python BeautifulSoup 获取页面多个子节点中的各个节点的内容
页面html格式为 <tr bgcolor="#7bb5de"><td style="border-bottom: 1px solid #C9D8AD& ...
- Javascript中正则的 match、test、exec使用方法和区别
总结: match 是str调用 test和exec是正则表达式调用 test只返回true或false, exec和match的结果是相同的,返回结果比较复杂
- vue使用axios中 this 指向问题
1.解决办法 在vue中使用axios做网络请求的时候,会遇到this不指向vue,而为undefined,可以使用箭头函数"=>"来解决.如下: methods: { lo ...
- TortoiseGit 弹出 git@xxx.com's password 对话框
安装完 tortoise git,用它克隆项目的时候,一直弹出git@xxx.com's password 对话框 解决的办法是,将ssh客户端默认的路径,换为git 安装目录下ssh.exe的路径就 ...
- Spring拦截器 /* 和 /** 的区别
SpringMVC 拦截器拦截 /* 和 /** 的区别: /* : 匹配一级,即 /add , /query 等 /** : 匹配多级,即 /add , /add/user, /add/user/u ...
- POJ——T 1988 Cube Stacking
http://poj.org/problem?id=1988 Time Limit: 2000MS Memory Limit: 30000K Total Submissions: 25865 ...
- Mac上配置 Ruby on Rails和Git
Ruby on Rails on Mac =============================================================================== ...
- JavaScript语言基础3
JavaScript能够处理一些来自于现实世界的数据类型.比如:数字和文本. 同一时候JavaScript中也包括了一些具 有抽象性质的数据类型.比如对象数据类型. JavaScript它是一种弱类 ...