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;} ...
随机推荐
- 三大统计相关系数：Pearson、Spearman秩相关系数、kendall等级相关系数
统计相关系数简介 由于使用的统计相关系数比较频繁,所以这里就利用几篇文章简单介绍一下这些系数. 相关系数:考察两个事物(在数据里我们称之为变量)之间的相关程度. 如果有两个变量:X.Y,最终计算出的相 ...
- leetcode python 041首个缺失正数
##限定时间复杂度O(n)num=[0,5,3,1,2,-2,4,8,5,6]num=set(num)d=1for i in range(1,len(num)+1): if d in num: ...
- 解决eclipse的自动换行问题。
安装方法:使用Eclipse 的自动升级功能,菜单栏选Help → install new Software 点解Add按钮,在“ Name ”中填入“ wordwrap ”,“ URL ”中填入“ ...
- SQL语句：如何让字符串转化数字
和前端联调的时候,突然出现一个状况,新增数据的时候,一直报系统错误,写下此文,留以后反复温习.菜鸟程序员一名~ 项目内容:新增产品信息 具体实现:1 获取基础信息,创建产品(调用接口传入的产品类型,如 ...
- Windows挂载NFS共享盘
Centos7添加NFS方法请见如下链接: https://www.cnblogs.com/jackyzm/p/10285845.html 一:添加NFS服务 1.1:此电脑-右键-管理-window ...
- Thread线程join方法自我理解
Thread线程join方法自我理解 thread.join():等待thread线程运行终止,指的是main-thread(main线程)必须等待thread线程运行结束,才能继续thread.jo ...
- SpringMVC云题库错题及答案汇总
试题分析:D,BeanNameViewResolver:这个视图解析器跟XmlViewResolver基本相同,它是通过把返回的逻辑视图名称去匹配定义好的视图bean对象 @ModelAttribut ...
- Eclipse个人快捷键设置及常用快捷键
Eclipse中字母自动提示的快捷键设置,具体如下图所示,加上大写字母A-Z 二.常用快捷键设置 (1)在java代码中按 ctrl+O 快速查看类的属性和方法列表如下所示 (2)在java代码中选中 ...
- Leet Code 3. Longest Substring Without Repeating Characters
Given a string, find the length of the longest substring without repeating characters. Examples: Giv ...
- L362 When to Bring up Salary During the Job Interview Process
Money is an awkward topic of conversation for many professionals—even more so when you’re busy tryin ...