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的功 ...
随机推荐
- lua 基础 之 坑一样的地方
-- local 局部-- local表=全局表,是同一个表,这主要是由于lua的表机制是匿名的,相当于函数的指针,local foo = foo,-- 即使本地foo没有在全局_G注册,还是引用的是 ...
- H5横向滚动提示
<marquee>啦啦啦,Hello World</marquee>
- 实时输出topk最频繁变动的股价
网上看到了一道关于bloomburg的面试题,follow 评论的思路 自己试着写了一个HashHeap的实现. 基本思路是维护一个大小为K的最小堆,里面是topK股价变动的公司ID(假设ID是Int ...
- 2、CentOS下编译安装Python2.7.6（转）
CentOS系统下面Python在升级到2.7.6的时候,没有找到安装包直接安装,只能通过源代码编译的方式来安装Python 2.7.6版本.这篇是编译和安装Python2.7.6的过程记录. Cen ...
- python 全栈开发笔记 4
反射 1.通过字符串的形式导入模块 2.通过字符串的形式,去模块中寻找指定函数并执行 ''' def f1(): return 'F1' def f2(): return 'F2' ''' #假设上面 ...
- python入门之小栗子
1 点球小游戏: from random import choice score=[0,0]direction=['left','center','right'] def kick(): print ...
- Context Encoder论文及代码解读
经过秋招和毕业论文的折磨,提交完论文終稿的那一刻总算觉得有多余的时间来搞自己的事情. 研究论文做的是图像修复相关,这里对基于深度学习的图像修复方面的论文和代码进行整理,也算是研究生方向有一个比较好的结 ...
- Delphi10.2 关于Http 下载
演示如图: 代码如下: unit Unit1; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Vari ...
- Codeforces Round #162 (Div. 1) B. Good Sequences (dp+分解素数)
题目:http://codeforces.com/problemset/problem/264/B 题意:给你一个递增序列,然后找出满足两点要求的最长子序列 第一点是a[i]>a[i-1] 第二 ...
- 给定一个只包含正整数的非空数组,返回该数组中重复次数最多的前N个数字 ,返回的结果按重复次数从多到少降序排列(N不存在取值非法的情况)
""" #给定一个只包含正整数的非空数组,返回该数组中重复次数最多的前N个数字 #返回的结果按重复次数从多到少降序排列(N不存在取值非法的情况) 解题思路: 1.设定一个 ...