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的功 ...
随机推荐
- kd-tree题目总结
在竞赛中,kd-tree一般只用于平面,很少有高于二维的情况. 在随机情况下,kd-tree的复杂度为O(NlogN),但会被极端数据卡到平方级别. 总而言之,就是优美的暴力. 查询时,通过估价函数进 ...
- javascript20150124
表达式与运算符 表达式 与数学中的定义相似,表达式是指具有一定的值的.用运算符把常数和变量连接起来的代数式.一个表达式可以只包含一个常数或一个变量.运算符可以是四则运算符.关系运算符.位运算符.逻辑运 ...
- Python随笔--魔法方法（析构与构造）
#析构方法的调用
- spring注解驱动开发
1.全图: 一.IOC容器部分 1.第一个初始化实例: @Configuration @ComponentScans @Bean("person") 注意: @repeatable ...
- 第七次作业——numpy统计分布显示
用np.random.normal()产生一个正态分布的随机数组,并显示出来. np.random.randn()产生一个正态分布的随机数组,并显示出来. 显示鸢尾花花瓣长度的正态分布图,曲线图,散点 ...
- 使用MockMvc测试controller
之前我们测试controller的时候仅仅是作为一个pojo来进行简单的测试,spring3.2后我们可以按照控制器的方式来测试Spring MVC的controller了,这样的话在测试控制器的时候 ...
- mysql 数据库主从同步
1.简介 写这篇文章是网上找到的相关主从同步的都不够完全,本人第一次搭建主从同步,完全看着网上的文章来搭建的,结果你懂的,踩了很多坑.所以特地把踩到的坑写出来,新手切勿直接布置到正式环境,请于测试环境 ...
- JAVA中String类型的字符替换问题
如果仅仅替换某个字符,使用replaceall("xx","")即可,其中.的替换要使用\\.否则会替换除换行符外的所有字符. 如果要替换所有特殊字符(即非字母 ...
- python笔记3——字符串的操作
#Author:Wildwolf name="my name is wildwolf ," print(name.capitalize()) #首字母大写 print(name.c ...
- 2019-04-28-day042-HTML初识
GET / HTTP/1.1 Host: 127.0.0.1:9001 Upgrade-Insecure-Requests: 1 Accept: text/html,application/xhtml ...