html vue分页,Vue.js bootstrap前端实现分页和排序
写之前先抱怨几句。本来一心一意做.net开发的,渐渐地成了只做前端。最近项目基本都用java做后台,我们这些.net的就成了前端,不是用wpf做界面,就是用html写web页面。
深知自己前端技术不足,以前虽说用asp.net前后台都做,但是,对于前端都是用现成的js库和页面模板,对于vue.js等框架基本没有接触过。
只怪自己不会写java,最近做一个项目,负责前端,后台传来数据不分页,前端收到所有数据后自己分页。我尽是无语。
正好最近在看vue.js。这个页面就用它来实现吧。顺便总结下。
效果图:
语法:
数据绑定 {{...}}或者v-model
{{dataItem.id}}
事件绑定 v-on
ID
循环 v-for
{{item}}
判断 v-if
首页
过滤器 Vue.filter
//定义
Vue.filter( 'name' , function(value) {
return value * .5 ;
});
//使用
{{dataItem.age | name}}
排序orderBy
{{dataItem.id}}{{dataItem.name}}{{dataItem.age}}
html
数据
ID | 姓名 | 年龄 |
---|---|---|
{{dataItem.id}} | {{dataItem.name}} | {{dataItem.age}} |
{{item}}
首页
上一页
{{item}}
...
{{item}}
...
{{item}}
下一页
尾页
{{pageCurrent}}/{{pageCount}}
javascript
//只能输入正整数过滤器
Vue.filter('onlyNumeric', {
// model -> view
// 在更新 `` 元素之前格式化值
read: function (val) {
return val;
},
// view -> model
// 在写回数据之前格式化值
write: function (val, oldVal) {
var number = +val.replace(/[^\d]/g, '')
return isNaN(number) ? 1 : parseFloat(number.toFixed(2))
}
})
//模拟获取数据
var getData=function(){
var result = [];
for (var i = 0; i < 500; i++) {
result[i] ={name:'test'+i,id:i,age:(Math.random()*100).toFixed()};
}
return result;
}
var vue = new Vue({
el: "#test",
//加载完成后执行
ready:function(){
this.arrayDataAll = getData();
this.totalCount = this.arrayDataAll.length;
this.showPage(this.pageCurrent, null, true);
},
data: {
//总项目数
totalCount: 200,
//分页数
arrPageSize:[10,20,30,40],
//当前分页数
pageCount: 20,
//当前页面
pageCurrent: 1,
//分页大小
pagesize: 10,
//显示分页按钮数
showPages: 11,
//开始显示的分页按钮
showPagesStart: 1,
//结束显示的分页按钮
showPageEnd: 100,
//所有数据
arrayDataAll:[],
//分页数据
arrayData: [],
//排序字段
sortparam:"",
//排序方式
sorttype:1,
},
methods: {
//分页方法
showPage: function (pageIndex, $event, forceRefresh) {
if (pageIndex > 0) {
if (pageIndex > this.pageCount) {
pageIndex = this.pageCount;
}
//判断数据是否需要更新
var currentPageCount = Math.ceil(this.totalCount / this.pagesize);
if (currentPageCount != this.pageCount) {
pageIndex = 1;
this.pageCount = currentPageCount;
}
else if (this.pageCurrent == pageIndex && currentPageCount == this.pageCount && typeof (forceRefresh) == "undefined") {
console.log("not refresh");
return;
}
//处理分页点中样式
var buttons = $("#pager").find("span");
for (var i = 0; i < buttons.length; i++) {
if (buttons.eq(i).html() != pageIndex) {
buttons.eq(i).removeClass("active");
}
else {
buttons.eq(i).addClass("active");
}
}
//从所有数据中取分页数据
var newPageInfo = [];
for (var i = 0; i < this.pagesize; i++) {
var index =i+(pageIndex-1)*this.pagesize;
if(index>this.totalCount-1)break;
newPageInfo[newPageInfo.length] = this.arrayDataAll[index];
}
this.pageCurrent = pageIndex;
this.arrayData = newPageInfo;
//计算分页按钮数据
if (this.pageCount > this.showPages) {
if (pageIndex <= (this.showPages - 1) / 2) {
this.showPagesStart = 1;
this.showPageEnd = this.showPages - 1;
console.log("showPage1")
}
else if (pageIndex >= this.pageCount - (this.showPages - 3) / 2) {
this.showPagesStart = this.pageCount - this.showPages + 2;
this.showPageEnd = this.pageCount;
console.log("showPage2")
}
else {
console.log("showPage3")
this.showPagesStart = pageIndex - (this.showPages - 3) / 2;
this.showPageEnd = pageIndex + (this.showPages - 3) / 2;
}
}
}
//排序
},sortBy: function (sortparam) {
this.sortparam = sortparam;
this.sorttype = this.sorttype == -1 ? 1 : -1;
}
}
});
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html vue分页,Vue.js bootstrap前端实现分页和排序相关推荐
- 使用vue+elementUI页面实现前端做分页
当数据不是很多的时候,后端会要求前端来实现分页功能.那么下面讲下怎么使用element来实现前端做分页功能.由于功能比较简单,那么就直接上代码: // 计算当前页面的数据 tableList() {/ ...
- vue使用lodop.js实现前端标签打印
最近做项目, 需要使用到类似顺丰标签的那种标签打印, 需实现单打和批量打印,由于打印的功能是给到国外的同事使用,纸张大小为4*6, 有点特殊,国外打印机和国内的也不一样, 所以调试的时候也是花费了挺多 ...
- vue项目落地(qiankun.js)微前端服务
什么是微前端? 网上抄的: 微前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用.各个前端应用还可以独立开发.独立部署 ...
- Bootstrap前端框架学习(一):Bootstrap在Vue项目中的安装及可视化布局
Bootstrap前端框架学习(一):Bootstrap在Vue项目中的安装及可视化布局 node.js的安装 bootstrap的安装 bootstrap快速布局 node.js的安装 我们需要安装 ...
- [Vue.js] 模块化 -- 前端模块化
模块化相关规范 模块化概述 传统开发模式的主要问题 命名冲突 文件依赖 通过模块化解决传统开发模式的问题 模块化就是把单独的一个功能封装到一个模块(文件)中,模块之间相互隔离,但是可以通过特定的接口公 ...
- [Vue.js] 路由 -- 前端路由
路由的基本概念与原理 路由 本质是对应关系 后端路由 概念 : 根据不同的用户URL请求,返回不同的内容 本质 : URL请求地址与服务器资源之间的对应关系 SPA 后端渲染(存在性能问题) Ajax ...
- ant design Vue 纯前端实现分页
ant design Vue 纯前端实现分页功能 (有选择的话最好让后端分页,前端分页可能会有问题,为了性能,尽量不要前端分页) 自己想的一个简单方法: 通过页码改变事件,每页数据个数改变事件,获取改 ...
- 【前端Vue+后端Node.js+MySql】部署到服务器
[前端Vue+后端Node.js+MySql]部署到服务器 文章目录 [前端Vue+后端Node.js+MySql]部署到服务器 1.买服务器 2.服务器操作 2.1.修改服务器密码,xshell登录 ...
- Vue.js高效前端开发 • 【初识Vue.js】
全部章节 >>>> 文章目录 一.Vue概述 1.Web前端框架介绍 2.MVC和MVVM 3.Vue介绍 4.安装Vue 二.Vue使用 1.第一个Vue应用 2.Vue的双 ...
最新文章
- 全了!从Python入门到精通
- 2016企业开发趋势:Lightbend关于JVM开发者的调查
- 浅析网站建设实战经验下的通用原则
- 基于 Docker 的微服务架构实践
- 前端接收pdf文件_雷达接收机的噪声系统及灵敏度
- pkpm板按弹性计算还是塑性_双向板按弹性方法还是按塑性方法计算
- 12.Qt中字符串相关处理
- c++用数组初始化向量_用C ++初始化向量
- Waiting Processed Cancelable ShowDialog (Release 2)
- 全卷积神经网络 图像语义分割实验:FCN数据集制作,网络模型定义,网络训练(提供数据集和模型文件,以供参考)
- 读《Unix编程艺术》笔记
- RS232、RS485、RS422、RJ45接口,终于弄明白了!
- PC端后台项目的总结
- Python基础 模块化编程(模块的导入)
- 自建exchange邮箱有什么成熟的超大附件解决方案?
- 道闸雷达感应技术使用,智能感应存在,飞睿科技毫米波雷达
- 运行docker run显示is already in use by container
- 李三立院士逝世:中国计算机体系结构先驱,曾为国防计算机项目总负责人
- App Inventor 四字节转单精度浮点数
- 随机事件的关系及运算
热门文章
- wireshark提取流量包中的文件_[技术]Wireshark抓取的数据包提取文件
- Java引用类型变量如何分配内存空间?
- 如何执行shell脚本文件
- Linux 命令之 sftp -- 交互式的文件传输程序
- 如何在 Ubuntu 14.04 和 12.04 上测试 systemd
- Linux 命令之 hostnamectl -- 查看/修改当前主机的信息
- sql 计算两个小数乘积_数学篇|学会这些数学计算技巧,想不满分都难!
- 有c基础学java多久_有c十十基础的自学java语言每天6小时要多长时间?
- LeetCode 03. 无重复字符的最长子串
- 同时防服务器维修,加强服务器日常运维,避免宕机灾难发生