vue day5 分页控件 更新 PagedList.mvc 仿
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>分页</title> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<ul class="pagination" id="page-break" v-if="seen" >
<li v-if="cur>5">
<a v-on:click="cur=1,pageClick()" style="cursor:pointer">««</a>
</li>
<li v-if="cur>1">
<a v-on:click="cur--,pageClick()" style="cursor:pointer">«</a>
</li>
<li v-if="cur-5>0">
<a style="cursor:not-allowed">...</a>
</li>
<li v-for="item in indexs" v-bind:class="{'active':cur==item}" >
<a v-on:click="btnClick(item), pageClick()" style="cursor:pointer">{{item}}</a>
</li>
<li v-if="all-cur-4>0">
<a style="cursor:not-allowed">...</a>
</li>
<li v-if="cur!=all">
<a v-on:click="cur++,pageClick()" style="cursor:pointer">»</a>
</li>
<li v-if="cur!=all && all>10 && all-cur-4>0">
<a v-on:click="cur=all,pageClick()" style="cursor:pointer">»»</a>
</li>
<li><a>Page {{cur}} of {{all}}</a></li>
</ul>
<script>
var app = new Vue({
el: '#app-4',
data: {
tableData: [
]
}
}); var app1=new Vue({
el: '#page-break',
data: {
cur: 1,
all: 50,
seen:true
},
watch: {
cur: function(newValue, oldValue){
console.log(arguments);
}
},
methods: {
btnClick(num){
if(num!=this.cur){
this.cur=num;
}
},
pageClick(){
console.log('现在是'+this.cur+'页')
},
},
computed: {
indexs(){
var left = 1;
var right = this.all;
var arr = [];
if(this.all>=10){
if(this.cur>5 && this.cur<this.all-4){
left = this.cur-4;
right = this.cur+4;
}else if(this.cur<=6){
left=1;
right=10;
}else{
left=this.all-9;
right=this.all;
}
}
while(left<=right){
arr.push(left);
left++;
}
return arr;
}
}
})
function loaddata(page)
{
$.ajax({
url: "@Url.Action("GetList")",
type: "Post",
data: { page: page },
dataType: "json",
success: function (data) {
app.tableData = data.rows;
app.seen = data.total > 0;
app1.all = data.total % 10 == 0 ? (data.total / 10) : (Math.floor(data.total / 10) + 1);
},
error: function (jqXHR, textStatus, errorThrown) { }
});
}
loaddata(1);
</script>
</body>
</html>
vue day5 分页控件 更新 PagedList.mvc 仿的更多相关文章
- vue day5 分页控件
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Net MVC轻量级分页控件
JPager.Net MVC超好用轻量级分页控件 JPager.Net MVC好用的轻量级分页控件,好用到你无法想象,轻量到你无法想象. JPager.Net MVC好用的轻量级分页控件,实现 ...
- MVC无刷新查询，PagedList分页控件使用，导出Excel
使用MVC开发也有一段时间了,总结下无刷新部分视图的使用.PagedList分页控件的使用. @using PagedList @model StaticPagedList<T> < ...
- MVC——分页控件
不管是什么类型的网站,分页都是必不可少的功能实现.在这里记录一下我自己接触过的分页控件: 一. MvcPager控件(记得项目里添加MvcPager.dll的引用) 这里面比较常用的就 ——@Html ...
- 基于存储过程的MVC开源分页控件--LYB.NET.SPPager
摘要 现在基于ASP.NET MVC的分页控件我想大家都不陌生了,百度一下一大箩筐.其中有不少精品,陕北吴旗娃杨涛大哥做的分页控件MVCPager(http://www.webdiyer.com/)算 ...
- 【干货分享】JPager.Net MVC超好用轻量级分页控件
JPager.Net MVC好用的轻量级分页控件,好用到你无法想象,轻量到你无法想象. JPager.Net MVC好用的轻量级分页控件,实现非常简单,使用也非常简单. JPager.Net M ...
- Mvc自定义分页控件
MVC开发分页常常使用第三方控件,生成的分页HTML带有版权申明,虽然免费,但是总有的别扭.于是,某日,楼主闲来蛋疼,折腾了个自定义分页控件: 先来展示下效果图: 1>当分页不超过10页的时候, ...
- 基于存储过程的MVC开源分页控件
基于存储过程的MVC开源分页控件--LYB.NET.SPPager 摘要 现在基于ASP.NET MVC的分页控件我想大家都不陌生了,百度一下一大箩筐.其中有不少精品,陕北吴旗娃杨涛大哥做的分页控件M ...
- asp.net mvc简单实现基于Razor的分页控件
最近在写一些web应用了解了一下asp.net mvc发现的确好用,所以直接就干上了.不过在使用asp.net mvc的Razor模板的情况并不向传统webform那样可以使用控件.但从Razor的功 ...
随机推荐
- [BZOJ3167]Sao
Problem 给你n个任务,n-1个关系,ab代表a在b前或者a在b后 问你有几种拓扑序 Solution f[i][j]表示第i个节点前有j个节点的方案数 设当前节点为x,儿子节点为s,若x依赖于 ...
- linux网络编程基础--（转自网络）
转自 http://www.cnblogs.com/MyLove-Summer/p/5215287.html Linux下的网络编程指的是socket套接字编程,入门比较简单. 1. socket套接 ...
- flask 第四章 偏函数 Local空间转时间 myLocalStack RunFlask+request 请求上下文
1 . 偏函数 (partial) from functools import partial def func(*args,**kwargs): a=args b=kwargs return a,b ...
- linux 安装node.js 和npm
cd /usr/local mkdir nodejs cd nodejs 去https://nodejs.org/en/download/复制安装包地址 wget https://nodejs.org ...
- 正则表达式中的re.S
正则表达式中,“.”的作用是匹配除“\n”以外的任何字符,也就是说,它是在一行中进行匹配.这里的“行”是以“\n”进行区分的.a字符串有每行的末尾有一个“\n”,不过它不可见. 如果不使用re.S参数 ...
- Datatables一些常见的JS用法（多与表格有关）
**********************--倒--序--上--升--(方便新增.更新)*********************** (3)给 动态生成 的 行 内按钮,添加点击事件(多用于分页情 ...
- jar包自动化部署---jenkins
B.Application Server SVN账号:svn://192.168.1.49/svn/keenyoda-trunk/xxxxxcht=xxxxx 安装jenkins:安装目录:/usr/ ...
- JS-斜杠和反斜杠的转换
例子:var url = "http://localhost:64177/Home/AccordionIndex"; 将斜杠转换成反斜杠: url = url .replace(& ...
- tcp 与udp 的区别
1.TCP和UDP对比 TCP(Transmission Control Protocol)可靠的.面向连接的协议(eg:打电话).传输效率低全双工通信(发送缓存&接收缓存).面向字节流.使用 ...
- python基础知识总结（二）
基础数据类型初始: int(数字):+ 加 - 减 * 乘 / 除 % 取余数 str(字符串):python中凡是用引号引起来的都是字符串 可以相加,用来表示字符串的拼接 可以相乘,只能 ...