vue day6 分页显示
@{
ViewBag.Title = "Home Page";
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>分页</title>
<style>
* {
margin: ;
padding: ;
}
#page-break {
margin-top: 20px;
margin-left: 20px;
}
#page-break li {
list-style: none;
}
#page-break a {
border: 1px solid #ddd;
text-decoration: none;
float: left;
padding: 6px 12px;
color: #337ab7;
cursor: pointer;
}
#page-break a:hover {
background-color: #eee;
}
#page-break a .banclick {
cursor: not-allowed;
}
#page-break .active a {
color: #fff;
cursor: default;
background-color: #337ab7;
border-color: #337ab7;
}
#page-break i {
font-style: normal;
color: #d44950;
margin: 0px 4px;
font-size: 12px;
}
#page-break .jumpbox .jumppage {
border: 1px solid #ddd;
margin-left: 40px;
height: 33px;
width: 40px;
float: left;
}
#page-break .jumpbox .jumpbtn {
cursor: pointer;
margin-left: 10px;
}
#page-break .jumpbox .jumpbtn:active {
color: #337ab7;
}
</style>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-4" class="col-xs-12 main-table-wrapper">
<table class="table table-striped table-hover table-bordered" id="main-table">
<thead>
<tr>
<th>姓名</th>
<th>日期</th>
<th>地址</th>
</tr>
</thead>
<tbody>
<tr v-for="item in tableData">
<td>{{ item.name }}</td>
<td>{{ item.address }}</td>
<td>{{ item.date }}</td>
</tr>
</tbody>
</table>
</div>
<div id="page-break">
<ul>
<li v-if="cur>1">
<a v-on:click="cur--,pageClick()">上一页</a>
</li>
<li v-if="cur==1">
<a class="banclick">上一页</a>
</li>
<li v-for="item in indexs" v-bind:class="{'active':cur==item}">
<a v-on:click="btnClick(item), pageClick()">{{item}}</a>
</li>
<li v-if="cur!=all">
<a v-on:click="cur++,pageClick()">下一页</a>
</li>
<li v-if="cur==all">
<a class="banclick">下一页</a>
</li>
<li><a>共<i>{{all}}</i>页</a></li>
<div class="jumpbox">
<input type="text" class="jumppage" />
<a class="jumpbtn" v-on:click="pageSkip()">跳转</a>
</div>
</ul>
</div>
<script>
var app = new Vue({
el: '#app-4',
data: {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
});
var app1 = new Vue({
el: '#page-break',
data: {
cur: ,
all:
},
watch: {
cur: function (newValue, oldValue) {
console.log(arguments);
}
},
methods: {
btnClick(num) {
if (num != this.cur) {
this.cur = num;
}
},
pageClick() {
console.log('现在是' + this.cur + '页')
loaddata(this.cur);
},
pageSkip() {
var maxPage = this.all;
var skipPage = Number(document.getElementsByClassName("jumppage")[].value);
console.log(typeof skipPage);
if (!skipPage) {
alert("请输入跳转页码");
return;
} else if (skipPage < || skipPage > maxPage) {
alert("您输入的页码超过页数范围了！");
return;
} else {
//this.cur=skipPage;
this.btnClick(skipPage);
this.pageClick();
}
}
},
computed: {
indexs() {
var left = ;
var right = this.all;
var arr = [];
if (this.all >= ) {
if (this.cur > && this.cur < this.all - ) {
left = this.cur - ;
right = this.cur + ;
} else if (this.cur <= ) {
left = ;
right = ;
} else {
left = this.all - ;
right = this.all;
}
}
while (left <= right) {
arr.push(left);
left++;
}
return arr;
}
}
});
function loaddata(page)
{
$.ajax({
url: "@Url.Action("Data")",
type: "Post",
data: { pageIndex: page },
dataType: "json",
success: function (data) {
app.tableData = data.rows;
app1.all = data.total % == ? (data.total / ) : (Math.floor(data.total / ) + );
},
error: function (jqXHR, textStatus, errorThrown) {
}
});
}
loaddata();
</script>
</body>
</html>
public JsonResult Data(int pageIndex = , int pageSize = )
{
var product = new[]
{
new {date= "2016-05-02", name= "王小虎",address="上海市普陀区金沙江路 1518 弄"},
new {date= "2016-04-02", name= "王小虎2",address="上海市普陀区金沙江路 1518 弄"},
new {date= "2016-06-02", name= "王小虎3",address="上海市普陀区金沙江路 1518 弄"},
new {date= "2016-07-02", name= "王小虎4",address="上海市普陀区金沙江路 1518 弄"},
new {date= "2016-08-02", name= "王小虎5",address="上海市普陀区金沙江路 1518 弄"},
new {date= "2016-09-02", name= "王小虎6",address="上海市普陀区金沙江路 1518 弄"},
new {date= "2016-10-02", name= "王小虎7",address="上海市普陀区金沙江路 1518 弄"},
new {date= "2016-11-02", name= "王小虎8",address="上海市普陀区金沙江路 1518 弄"},
new {date= "2016-11-02", name= "王小虎8",address="上海市普陀区金沙江路 1518 弄"},
new {date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"},
new {date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"},
new {date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"},
new {date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"},
new {date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"},
new {date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"},
new {date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"},
new {date= "2016-11-02", name= "王小虎81",address="上海市普陀区金沙江路 1518 弄"},
new {date= "2016-11-02", name= "王小虎81",address="上海市普陀区金沙江路 1518 弄"},
new {date= "2016-11-02", name= "王小虎81",address="上海市普陀区金沙江路 1518 弄"},
new {date= "2016-11-34", name= "王小虎81",address="上海市普陀区金沙江路 1518 弄"},
new {date= "2016-11-02", name= "王小虎81",address="上海市普陀区金沙江路 1518 弄"},
new {date= "2016-11-02", name= "王小虎81",address="上海市普陀区金沙江路 1518 弄"},
new {date= "2016-11-02", name= "王小虎81",address="上海市普陀区金沙江路 1518 弄"},
new {date= "2016-11-02", name= "王小虎21",address="上海市普陀区金沙江路 1518 弄"},
new {date= "2016-11-02", name= "王小虎21",address="上海市普陀区金沙江路 1518 弄"},
new {date= "2016-11-02", name= "王小虎21",address="上海市普陀区金沙江路 1518 弄"},
new {date= "2016-11-05", name= "王小虎21",address="上海市普陀区金沙江路 1518 弄"},
new {date= "2016-11-02", name= "王小虎21",address="上海市普陀区金沙江路 1518 弄"},
new {date= "2016-11-01", name= "王小虎21",address="上海市普陀区金沙江路 1518 弄"},
new {date= "2016-11-02", name= "王小虎21",address="上海市普陀区金沙江路 1518 弄"},
new {date= "2016-11-04", name= "王小虎21",address="上海市普陀区金沙江路 1518 弄"},
new {date= "2016-11-02", name= "王小虎21",address="上海市普陀区金沙江路 1518 弄"},
new {date= "2016-11-02", name= "王小虎21",address="上海市普陀区金沙江路 1518 弄"},
}; return Json(new { total = product.Count(), rows = product.Skip((pageIndex - ) * pageSize).Take(pageSize).ToList()}, JsonRequestBehavior.AllowGet);
}
vue day6 分页显示的更多相关文章
- vue加elementui开发的分页显示
由于我的是公共引入样式表和css表所以,将公共的也写出来了(我接手的项目为基于vue开发的) 公共的index.html 引入js <script src="{MODULE_URL}s ...
- 基于vue的分页插件
相信大家用过很多jquery的分页插件,那这次就用一用基于vue的分页插件. 这里的环境用的是springboot 首先要引入pagehelper的jar文件,版本是1.2.3,配置文件也需要配置一下 ...
- day81:luffy:课程分类页面&课程信息页面&指定分类显示课程信息&分页显示课程信息
目录 1.构建课程前端初始页面 2.course后端的准备工作 3.后端实现课程分类列表接口 4.前端发送请求-获取课程分类信息 5.后端实现课程列表信息的接口 6.前端显示列表课程信息 7.按照指定 ...
- C#关于分页显示
---<PS:本人菜鸟,大手子还请高台贵手> 以下是我今天在做分页时所遇到的一个分页显示问题,使用拼写SQL的方式写的,同类型可参考哦~ ------------------------- ...
- 多页的TIFF图片在aspx页面分页显示
一.逻辑实现:将数据库中的二进制TIFF图片读出并分页显示在页面上. 1.显示界面 public FrameDimension MyGuid; ; ; public static MemoryStre ...
- asp.net gridview 分页显示不出来的问题
使用gridview分页显示,在点击第二页的时候显示空白,无数据. 原因是页面刷新,绑定datatable未执行 解决方法: 1.将datatable设置为静态 2.在OnPageIndexChang ...
- SSRS(rdl报表)分页显示表头和对表头的冻结处理
基础环境 最近在公司做西门子某系统的二次开发,需要用到SQLServer Reporting Services(SSRS).我们用的SQL版本是SQLServer 2008 R2:在设计报表时,表格用 ...
- JSP分页显示实例（基于Bootstrap）
首先介绍一款简单利落的分页显示利器:bootstrap-paginator 效果截图: GitHub官方下载地址:https://github.com/lyonlai/bootstrap-pagina ...
- 基于Vue封装分页组件
使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} ...
随机推荐
- C# [Win32] [GDI+] [API] Load HFONT from Memory
// gdiplusenums.h //-------------------------------------------------------------------------- // Fo ...
- js截取固定长度字符串，多余字符显示...
function cutstr(str, len) { var str_length = 0; var str_len = 0; str_cut = new String(); str_len = s ...
- 阿里云已买到域名价格统计js代码
var sum = 0; $('.table-hover tr.ng-scope').each(function(){ sum = sum + parseInt($(this).children()[ ...
- org.apache.commons.dbcp.DelegatingPreparedStatement.isClosed()Z和NewProxyPreparedStatement.isClosed()
原文转:https://blog.csdn.net/qq_37909508/article/details/83028536 报错: NewProxyPreparedStatement.isClose ...
- JS 清除DOM 中空白元素节点
HTML中的空白节点会影响整体的HTML的版面排榜 例如: 制作百度首页时,两个input之间的空白节点将本来是要整合在一起的搜索栏硬是把按钮和搜索框分离出现好丑的间隙 这时我们就可以用js清除这个空 ...
- raft共识算法
raft共识算法 分布式一致性问题 如果说,服务器只有一个节点,那么,要保证一致性,没有任何问题,因为所有读写都在一个节点上发生.那如果server端有2个.3个甚至更多节点,要怎么达成一致性呢?下面 ...
- Windows下PyMC安装
先安装Anaconda2 然后conda install -c https://conda.binstar.org/pymc pymc
- L1-063 吃鱼还是吃肉
国家给出了 8 岁男宝宝的标准身高为 130 厘米.标准体重为 27 公斤:8 岁女宝宝的标准身高为 129 厘米.标准体重为 25 公斤. 现在你要根据小宝宝的身高体重,给出补充营养的建议. 输 ...
- Python字典的使用与处理
在Python中,字典{dict}是比较常用的一个数据类型,使用键-值(key-value)存储 与列表[list]相比,字典具有极快的查找和插入速度,不会随着key-value的增加而变慢,但是相应 ...
- js获取元素属性值为空的原因和解决办法
问题描述:js获取某元素的属性值为空 代码: <!-- css定义在head中 --> <style> #box{ width: 100px; height: 100px; b ...