<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.share}}</td>
<td>{{row.eth}}</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 class="numpage"><</a></li>
<li v-if="page==1" class="active" v-on:click="NumPage(page, $event)"><a>{{page}}</a></li>
<li v-else v-on:click="NumPage(page, $event)"><a>{{page}}</a></li>
<li id="nextpage" v-on:click="NextPage()" v-if="page==Math.ceil(rows.length/pagesize)"><a class="numpage">></a></li>
</template>
</ul>
</nav>
</div>
<script>
data:function () {
return{
rows: [
{ Id: 1, Name: '0x123456789123456789123456789123456789', share:'1.234%', eth: '123456789'},
{ Id: 2, Name: '0x123456789123456789852963741951624753', share:'2.234%', eth: '123256789' },
{ Id: 3, Name: '0xehy123ijg158hty852123456789123456789', share:'0.214%', eth: '125656789' },
{ Id: 4, Name: '0x123456789jhg254yvg369521shr123456789', share:'0.234%', eth: '123456859'},
{ Id: 5, Name: '0x123456789123456789tgf257jyh365agrybs', share:'1.534%', eth: '122586789' },
{ Id: 6, Name: '0x204hgt26124578hybt123456789123456789', share:'1.274%', eth: '123963789' },
{ Id: 7, Name: '0x123456789yhtgtr95636581shty123456789', share:'2.234%', eth: '123159789' },
{ Id: 8, Name: '0x123456789123456789huygyt215852saftyj', share:'3.234%', eth: '123576789' },
{ Id: 9, Name: '0x258369jinqyrgsfa58123456789123456789', share:'1.254%', eth: '123741789' },
{ Id: 10, Name: '0x123shrygt123456789123456789123456789', share:'1.934%', eth: '123852789'},
{ Id: 11, Name: '0x123456789256shrysju12345678912345679', share:'4.234%', eth: '104956789'},
],
pagesize: 5,
curpage:1,//当前页的页码
}
},
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");
}
}
},
</script>

Vue实现静态数据分页的更多相关文章

  1. js静态数据分页展示

    拿vue做示例 首先定义data data() { return { tableData: [], // 当前页的数据,用于给表格展示用的 tableDataAll: [], // 需要拿来分页的总数 ...

  2. 基于Vue.js的表格分页组件

    有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...

  3. Vue.js的表格分页组件

    转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更 ...

  4. ASP.NET MVC 数据分页思想及解决方案代码

    作为一个程序猿,数据分页是每个人都会遇到的问题.解决方案更是琳琅满目,花样百出.但基本的思想都是差不多的. 下面给大家分享一个简单的分页器,让初学者了解一下最简单的分页思想,以及在ASP.NET MV ...

  5. React对比Vue(01 数据的定义,使用,组件的写法,目录结构等)

    1.脚手架对比 两个都需要安装node node自带npm 然后安装cnpm yarn(有时候 npm会丢包,所以) npm install -g cnpm --registry=https://re ...

  6. django rest_framework vue 实现用户列表分页

    django rest_framework vue 实现用户列表分页 后端 配置urls # 导入view from api.appview.userListView import userListV ...

  7. 关于vue+element-ui项目的分页,返回默认显示第一页的问题解决

    关于vue+element-ui项目的分页,返回默认显示第一页的问题解决     问题描述 当前页面如下: 然后点击页码跳到第3页,然后在第三页点击页面链接跳转到新的页面 然后在新页面点击返回按钮,返 ...

  8. vue修改elementUI的分页组件视图没更新问题

    转: vue修改elementUI的分页组件视图没更新问题 今天遇到一个小问题平时没留意,el-pagination这个分页组件有一个属性是current-page当前页.今天想在methods里面手 ...

  9. mysq大数据分页

    mysql limit大数据量分页优化方法 Mysql的优化是非常重要的.其他最常用也最需要优化的就是limit.Mysql的limit给分页带来了极大的方便,但数据量一大的时候,limit的性能就急 ...

随机推荐

  1. TensorFlow笔记-线程和队列

    线程和队列 在使用TensorFlow进行异步计算时,队列是一种强大的机制. 为了感受一下队列,让我们来看一个简单的例子.我们先创建一个“先入先出”的队列(FIFOQueue),并将其内部所有元素初始 ...

  2. [leetcode] 264. Ugly Number II (medium)

    263. Ugly Number的子母题 题目要求输出从1开始数,第n个ugly number是什么并且输出. 一开始想着1遍历到n直接判断,超时了. class Solution { public: ...

  3. [小米OJ] 2. 找出单独出现的数字

    解法一: map 1.45 ms #include <algorithm> #include <bitset> #include <cmath> #include ...

  4. C#编程.循环的中断

    1 循环的中断 break-立即终止循环(继续执行循环后面的第一行代码) continue-立即终止当前的循环(继续执行下一次循环) goto-可以跳出循环,到已标记好的位置上(如果希望代码易于阅读和 ...

  5. python课堂整理2

    一.字节和编码 1个字节是8位二进制 utf-8 表示一个中文要用3个字节 gbk 为中国汉字发明,2个字节可表示汉字 所以 utf-8 可以读gbk编码,而gbk去读utf-8 的内容会乱码 uni ...

  6. bitset的简单用法

    1.头文件 #include<bitset> 2.基本操作 bitset<n> b; b有n位,每位都为0. 参数n可以为一个表达式.如bitset<5> b, 则 ...

  7. umask 默认权限控制和特殊权限

    权限简单介绍: 在Linux中,创建目录或者文件之后总会有默认的权限.共9个,分为三组.分别代表u.g.o(属主.属组.其他用户).r.w.x 也代表各自的权限. r:读   在文件中的权限代表次文件 ...

  8. 手机APP测试之Fiddler

    之前测试基本上是web端,突然接手了一个要在指定pad上测试APP的任务,于是决定研究研究pad抓包.最开始考虑有jmeter进行抓包测试,发现抓不到(可能方法有问题,后续还需继续研究),然后用fid ...

  9. git基本命令学习(一)

    1 git配置文件 1.1 git权限控制 git有三个不同的权限控制文件,高优先权的设置会覆盖低优先权的设置项,以下按照优先权从高到低介绍: 文件夹中".git" 子文件夹中的c ...

  10. 渐进式web应用开发---使用indexedDB实现ajax本地数据存储(四)

    在前几篇文章中,我们使用service worker一步步优化了我们的页面,现在我们学习使用我们之前的indexedDB, 来缓存我们的ajax请求,第一次访问页面的时候,我们请求ajax,当我们继续 ...