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;} ...
随机推荐
- vs code编写的时候自动回车的原因
今天在书写一个空白的scss文件的时候,刚打2个字就自动回车换行了: 测试了几次,发现了规律就是输入停下来0.5秒左右就会自动换行,比如,打了2个中文,再连续打一个句子,键盘虽然在动,但是vs cod ...
- git 的安装与初始化
1搭建本地git服务器: 1.1安装git 对于ubuntu系统,一般自带git,可以使用git --version 查看版本号 ,或使用apt-get install git . centos上对 ...
- 大数据面试题——如何找出访问最多的IP
问题描述: 现有海量日志数据保存在一个超大的文件中,该文件无法直接存入内存,要求从 中提取某天访问BD次数最多的IP 分析解读: 由于这个题目只关心某一天访问次数最多的IP,因此可以首先对文件进行一次 ...
- python 捕获异常顺序
catch 异常的时候,有关的异常(若是抛出子类异常,则父类异常的except也算.反之不算)except的语句是按代码顺序执行, 也就是说,当一个异常发生时,从若干except中若遇见异常类基类,父 ...
- 嵌入式Linux系统的构成和启动过程
转自:http://blog.csdn.net/weiganyi/article/details/11561859 在我们的周围,大量的嵌入式设备都是基于Linux系统来构建的,嵌入式Linux与主机 ...
- C++算法之大数加法计算的代码
如下代码段是关于C++算法之大数加法计算的代码,希望对大家有用. { int length; int index; int smaller; int prefix = 0; if(NULL == sr ...
- 前端学习roadmap
- Java技术 第一次作业
(一)学习总结 1.在java中通过Scanner类完成控制台的输入,查阅JDK帮助文档,Scanner类实现基本数据输入的方法是什么? 代码开头加一句 Import java.util; 构建Sca ...
- IDEA常用快捷键总结
Intellij IDEA中有很多快捷键让人爱不释手,stackoverflow上也有一些有趣的讨论.每个人都有自己的最爱,想排出个理想的榜单还真是困难.以前也整理过Intellij的快捷键,这次就按 ...
- amaze ui 滚动监听
引入 此框架的css js 前提还要有jquery http://amazeui.org/javascript/scrollspy 然后看这个链接里的各种动画 运用方法就是 在你想要有动 ...