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;} ...
随机推荐
- XE 使用记录
project的选项是分编译版本的,debug,release,上层还有一个base 通用的设置值,最好放base里,比如Search path里 自己添加的路径,免得2个环境分别添加.
- ios调用Google地图
现在的ios版本一般只支持https协议,而引用谷歌地图API时只提供src="http://maps.google.cn/maps/api/js..",https协议无法使用,解 ...
- spring cloud微服务下手动回滚事务
TransactionAspectSupport.currentTransactionStatus().setRollbackOnly(); 这里使用的场景是,跨服务调用接口,比如:用户信息和用户积分 ...
- 6 python高级数据处理和可视化
6.2. pyplot作图 1.折线图和散点图 t = np.arange(0,4,0.1) plt.plot(t,t,'o',t,t+2,t,t**2,'o') plt.show() 2.柱线图 p ...
- font-family 中文字体列表
华文细黑:STHeiti Light [STXihei] 华文黑体:STHeiti 华文楷体:STKaiti 华文宋体:STSong 华文仿宋:STFangsong 儷黑 Pro:LiHei Pro ...
- 如何用ESP8266实现网页配置（web）
准备工作 准备一个深圳四博智联科技有限公司的ESP-F 模组.或者四博智联科技的NODEMCU 当我们拿到ESP-F模块后,可以按照以下接线进行测试: 即 VCC.EN 接 3.3v.GPIO15 G ...
- 【Shell】单行注释和多行注释
单行注释 '# ' # echo "hello" 多行注释 方法1 : << ! 这是注释1 这是注释2 这是注释3 ! 方法2 :' 这是注释1 这是注释2 这是注释 ...
- NFS 配置文件及在iptables中的配置
yum 安装nfs即可 ( yum install nfs-utils ) cat /etc/exports /data/nfsdata 10.10.10.194(rw,no_root_squash) ...
- pytest自动化6：pytest.mark.parametrize装饰器--测试用例参数化
前言:pytest.mark.parametrize装饰器可以实现测试用例参数化. parametrizing 1. 下面是一个简单是实例,检查一定的输入和期望输出测试功能的典型例子 2. 标记单 ...
- Mysql慢查询-Mysql慢查询详细教程
一.简介开启慢查询日志,可以让MySQL记录下查询超过指定时间的语句,通过定位分析性能的瓶颈,才能更好的优化数据库系统的性能.二.参数说明slow_query_log 慢查询开启状态slow_quer ...