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的功 ...
随机推荐
- python基础数据类型-练习
1,有如下变量(tu是个元祖),请实现要求的功能 tu = ("alex", [11, 22, {"k1": 'v1', "k2": [&q ...
- C++中_T的用途
1 C++语言中“_T”是什么意思? Visual C++里边定义字符串的时候,用_T来保证兼容性,VC支持ascii和unicode两种字符类型,用_T可以保证从ascii编码类型转换到uni ...
- spring security 学习
1.默认登录 user /df1fc617-bb94-494e-8adb-0234046bf092 取消校验 在启动类上添加下面的注解 @EnableAutoConfiguration(excl ...
- chrome恢复默认搜索引擎为Google
管理员身份运行cmd RD /S /Q "%WinDir%\System32\GroupPolicyUsers" RD /S /Q "%WinDir%\System32\ ...
- python基础 字典练习
练习1:info = [ {'wangming': { 'money':1111, 'car':['bmo','bsj'], 'info':{ 'phone':1511111, 'age':18} } ...
- 让虚拟环境解决python多版本并行
一.安装篇 1.本文操作系统为CentOS7 依赖包(安装时可能还存在其他依赖包,结合报错进行安装) [root@Corre home]# yum install make build-essenti ...
- elasticsearch(5) 请求体搜索
上一篇提到的轻量搜索非常简单便捷,但是通过请求体查询可以更充分的利用查询的强大功能.因为_search api中大部分参数是通过HTTP请求体而非查询字符串来传递的. 一 空查询 对于空查询来说,最简 ...
- OpenGL 3D旋转的木箱
学习自: https://learnopengl-cn.github.io/01%20Getting%20started/08%20Coordinate%20Systems/#3d 0,首先添加glm ...
- java中外部类和内部类的访问控制符区别
外部类只有两种访问控制符,即public和default(包访问控制级别).原因:外部类的上一级程序单元是包,所以它只有两种作用域:同一个包内和任何位置,这样只需要用public和default即可, ...
- Python04（基础语法）
Trainning-day03回顾1.输出重定向 > 将输出到终端的内容输出到指定文件 命令 > 文件 注意: 1.如果文件存在,覆盖原文件 2.如果文件不存在,直接创建新文件2.输出追加 ...