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的功 ...
随机推荐
- MFC如何在树形图边上添加动态小地图
MFC如何在树形图边上添加动态小地图 https://www.jianshu.com/p/7b1d828bf5db (简书无法识别缩进的...早知道先在博客园发了) (转载请注明出处) 作者:梦镜谷雨 ...
- java基础2(二)
Servlet 注意: servletConfig可以获取配置文件(xml文件)中配置的servlet对象的初始化参数. url-pattern 缺省servlet 注意:tomcat目录下有一个默认 ...
- c++ 指针、引用和取值；
直接看代码: #include<iostream> using namespace std; int add(int *a,int *b){ int s; s = *a + *b; cou ...
- LeetCode 148 排序链表
题目: 在 O(n log n) 时间复杂度和常数级空间复杂度下,对链表进行排序. 示例 1: 输入: 4->2->1->3 输出: 1->2->3->4 示例 2 ...
- 实现简单的ssh功能
客户端代码: # -*- coding=utf-8 -*- __Author__ = "Dennis" import socket client = socket.socket() ...
- 在Python工作环境中安装包命令后加上国内源速度*15
example: pip install -r requests.txt -r https://pypi.tuna.tsinghua.edu.cn/simple/ --trusted-host pyp ...
- 只有自身跟上时代，offer就会如期而至
[官宣]只有自身跟上时代,offer就会如期而至 最近对求职者来说,似乎颇不太平,各种裁员扑面而来,许多企业(易车.滴滴等)相继官宣裁员信息,包括阿里缩减校招,百度减少社招等,都让人不禁打嗦.但我们华 ...
- （原创）Spice 网表范例
一.常规网表 Inverter .lib "D:\lib\l0040ll_v1p4_1r.lib" TT .param SUPPLY=.1V .param T=10ns .para ...
- 匹配URL
使用一个不错的正则表达式来配对一个正确的url. string reg = @"(?i)(http://|https://)?(\w+\.){1,3}(com(\.cn)?|cn|net|i ...
- python基础一之while循环随机猜数字
# Author:"Mamba" import random setNum = random.randint(1,10) #print(setNum) count = 0 whil ...