vue2.X简单翻页/分页
由于业务需要 公司把后台所有数据一次性给前端,数据过多,所以前端需要做一些分页的处理,比较简单的翻页。
html代码
<table class="three_td">
<tbody>
<tr v-for="item in listt2">
<td><a v-text="item.sort"></a> </td>
<td><a v-text="item.Branch"></a></td>
<td><a v-cloak>{{item.Data}}</a></td>
<td><span v-text="item.Good"></span></td>
</tr>
</tbody>
</table>
<div class="pages" v-show="onn">
<button class="previem" @click="page('last')" v-show='curPage>0'>上一页</button>
<button class="next" @click="page('!last')" v-show="curPage<pageCount-1">下一页</button>
</div>
js代码配置
data:{
listt2:[],//页面要展示的数据
pageSize:100,//翻页每页显示数据
curPage:0,//当前页面
pageCount:'',//总共页面数
onn:true,//默认显示分页
rongliang:[]
},
created:function(){
//ajax获取后台数据,这里就不做了获取的数据存储在 this.rongliang。
},
methods:{
page:function(el){//点击翻页
el=='last'?this.curPage--:this.curPage++;
var curtotal=this.curPage*this.pageSize;
var tiaoshu=this.curPage*this.pageSize+this.pageSize;
this.listt2=this.rongliang.slice(curtotal,tiaoshu);
document.body.scrollTop = 0;
},
fanye:function(){//分页处理
var _this=this;
_this.listt2=[];
if(_this.rongliang){
_this.pageCount=Math.ceil(_this.rongliang.length/_this.pageSize);
for(var i=0;i<_this.pageSize;i++){
if(_this.rongliang[i]){
_this.listt2.push(_this.rongliang[i]);
};
};
};
}
思路就是每次截取从后台获取的数组rongliang的数据存储到需要展示的那个数组listt2里面。
小知识点:
1.使用slice是从已有的数组中返回选定的元素,而splice向/从数组中添加/删除项目,然后返回被删除的项目,会改变原始数组。
2.v-cloak 需要在css中添加以下代码,优化处理,防止页面加载时看到vue的变量名
[v-cloak] {
display: none;
}
vue2.X简单翻页/分页的更多相关文章
- Atitit.列表页面and条件查询的实现最佳实践(2)------翻页 分页 控件的实现java .net php
)------翻页 分页 控件的实现java .net php 1. 关于翻页有关的几大控件::搜索框控件,显示表格控件,翻页器,数据源控件.. 1 2. 翻页的显示格式:: 1 2.1. 通常ui- ...
- Atitit 翻页功能的解决方案与版本历史 v4 r49
Atitit 翻页功能的解决方案与版本历史 v4 r49 1. 版本历史与分支版本,项目版本记录1 1.1. 主干版本历史1 1.2. 分支版本 项目版本记录.1 2. Easyui 的翻页组件2 ...
- Atitit.pagging 翻页功能解决方案专题 与 目录大纲 v3 r44.docx
Atitit.pagging 翻页功能解决方案专题 与 目录大纲 v3 r44.docx 1.1. 翻页的重要意义1 1.2. Dep废弃文档 paip.js翻页分页pageing组件.txt1 ...
- Slider 滚动条 Pagination分页插件 JS Ajax 数据范围筛选 加载 翻页 笔记
入职以后的第二个任务 根据用户所选的价格范围 筛选数据 修复BUG - 筛选数据后 总数没有更新.列表显示错误.翻页加载错误 用到的一些知识点 jquery插件系列之 - Slider滑块 max ...
- 织梦DEDECMS网站首页如何实现分页翻页
织梦DEDECMS模板网站首页如何实现首页分页和翻页 方法如下:(三种方法,自己选择一种来实现分页吧) 第一种:调用ajax和参数的(不推荐)1.必须在DEDE首页模板中的<head>&l ...
- JeeSite数据分页与翻页
本文章介绍的是JeeSite开源项目二次开发时的一些笔记,对于没有使用过JeeSite的可以不用往下看了,因为下面的代码是跟JeeSite二次开发相关的代码,不做JeeSite的二次开发,以下代码对您 ...
- js + jquery 实现分页区翻页
简单来说,情况是这样的,假如做好了对动漫每一集进行分页,如下图: 但当分页太多就会变得不能看,而且前后箭头也不能只是摆设. 想要得到类似这样效果: 网上搜了一会翻页相关的库没什么效果,也不太合适自己的 ...
- C#_简单实用的翻页
简单实用的生成翻页HTML辅助类 C# using System.Text; namespace ClassLibrary { /// <summary> /// /// </sum ...
- django分页及搜索后如何翻页
django自带了Pagnator 导入 from django.core.paginator import Paginator, PageNotAnInteger, EmptyPage 分页 def ...
随机推荐
- Office 365 Connectors 的使用与自定义开发
前言 我相信很多人都看过<三国演义>,里面有很多引人入胜的故事和栩栩如生的人物,对我而言,曹操手下的一员猛将典韦实在让我印象深刻.例如,书中有一段描写典韦的作战经历: 时西面又急,韦进当之 ...
- javaweb get跟post 乱码解决
get中把tomact中的servel.xml 中 content 加上 URIEncoding="UTF-8"跟 useBodyEncodingForURL="true ...
- POI导出Excel的几种情况
第一种:常见导出[已知表头(长度一定),已知表数据(具体一个对象的集合,并已知对象各个属性的类型)]第二种:不常见导出[已知表头(长度不定),已知表数据(没有具体对象,装在String类型的集合中)] ...
- ajax 上传文件
最近做公司官网,需要用到上传文件功能,由于是用JQ写的,用到了input标签 的type=file 属性,然后利用表单提交方式上传,代码如下: $('#upload_video').change(fu ...
- 软件License认证方案的设计思路
销售license是商业软件的贯用商业模式.用户向商家购买软件安装盘搭载license许可,才可以使用该软件.我们作为软件开发者,为了保护自身的权益,在软件开发过程中也不可避免的会设计license管 ...
- Kafka最佳实践
一.硬件考量 1.1.内存 不建议为kafka分配超过5g的heap,因为会消耗28-30g的文件系统缓存,而是考虑为kafka的读写预留充足的buffer.Buffer大小的快速计算方法是平均磁盘写 ...
- 大数据(1):基于sogou.500w.utf8数据的MapReduce程序设计
环境:centos7+hadoop2.5.2 1.使用ECLIPS具打包运行WORDCOUNT实例,统计莎士比亚文集各单词计数(文件SHAKESPEARE.TXT). ①WorldCount.java ...
- MacOS中升级openssl
MacOS中升级openssl ➜ ~ brew instal openssl 使用情况中始终发现,openssl并没有真正升级 在/usr/local/Cellar/openssl/目录中 ...
- Android开发——Fragment的简单使用总结
前言: 之前搞项目的时候,就使用了这个Fragment,中间遇到了许多坑,把坑都解决了,现在写一篇较为简单的Fragment使用总结 Fragment的简单介绍: 简单来说,Fragment其实可以理 ...
- Unity3d底层数据传递分析
WeTest 导读 这篇文章主要分析了在Mono框架下,非托管堆.运行时.托管堆如何关联,以及通过哪些方式调用.内存方面,介绍了什么是封送,以及类和结构体的关系和区别. 一.托管交互(Interop) ...