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;} ...
随机推荐
- NFS, web,负载均衡，Nginx yum 源码安装
作业一:nginx服务1.二进制安装nginx 2.作为web服务修改配置文件 3.让配置生效,验证配置 [root@localhost ~]# systemctl stop firewalld.s ...
- validation-api各注解的用法
入参用@Valid,要不下面实体类中的注解不生效 @AssertFalse 被注解的元素必须为false@AssertTrue 被注解的元素必须为True@DecimalMax(value) 被注解的 ...
- HDU1237
/************************************************************** 作者:陈新 邮箱:cx2pirate@gmail.com 用途:hdu1 ...
- MOS管应用概述(四):基本参数
mos管的基本参数,大家熟悉的必然是Ids电流,Ron导通电阻,Vgs的阈值电压,Cgs.Cgd.Cds这几项,然而在高速应用中,开关速度这个指标比较重要.<ignore_js_op> 上 ...
- java项目 在 linux ubuntu 上的部署相关
--------------------JDK在linux ubuntu上的安装------------------------------------------------------------ ...
- HashMap 的put方法
final V putVal(int hash, K key, V value, boolean onlyIfAbsent, boolean evict) { Node<K,V>[] ta ...
- ykit入门
init lint pack server watch 1.创建现有工程的ykit项目 在项目文件夹下 ykit init 2.lint 检查当前项目的代码质量 手动执行代码 可验证代码正误 yk ...
- jenkins问题整理
--------------------------------这是一个模板------------------------------------- 问题1:jenkins服务器上传jar包到指定服 ...
- 如何验证代理ip的正确性
python requests 使用代理的话: proxy_list = ["aabbcc.aabbcc.169.aabbcc:8080", ] ip_p = random.cho ...
- 2018-2019-2 20175224 实验一《Java开发环境的熟悉》实验报告
实验报告封面 实验内容与步骤 Java开发环境的熟悉-1 1.建立“自己学号exp1”的目录 2.在“自己学号exp1”目录下建立src,bin等目录 3.javac.java的执行在“自己学号exp ...