vue day8 table page
@{
ViewBag.Title = "Home Page";
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>分页</title>
<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><input type="checkbox" v-model="checkall" v-on:click='checkAll'></th>
<th>商品名称</th>
<th>商品单价</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in tableData">
<td><input type="checkbox" v-model="checked" :value="item.id" /> </td>
<td>{{ item.name }}</td>
<td>{{ item.address }}</td>
<td>{{ item.date }}</td>
@*<td><button @click="handleRemove(index)">移除</button></td>*@
</tr>
</tbody>
</table>
<div>{{checked}}</div>
</div>
<ul class="pagination" id="page-break" v-if="seen">
<li v-if="cur>5">
<a v-on:click="cur=1,pageClick()" style="cursor:pointer">««</a>
</li>
<li v-if="cur>1">
<a v-on:click="cur--,pageClick()" style="cursor:pointer">«</a>
</li>
<li v-if="cur-5>0">
<a style="cursor:not-allowed">...</a>
</li>
<li v-for="item in indexs" v-bind:class="{'active':cur==item}">
<a v-on:click="btnClick(item), pageClick()" style="cursor:pointer">{{item}}</a>
</li>
<li v-if="all-cur-4>0">
<a style="cursor:not-allowed">...</a>
</li>
<li v-if="cur!=all">
<a v-on:click="cur++,pageClick()" style="cursor:pointer">»</a>
</li>
<li v-if="cur!=all && all>10 && all-cur-4>0">
<a v-on:click="cur=all,pageClick()" style="cursor:pointer">»»</a>
</li>
<li><a>Page {{cur}} of {{all}}</a></li>
</ul>
<script>
var app = new Vue({
el: '#app-4',
data: {
tableData: [
],
checkall:false,
checked:[]
},
methods: {
handleRemove: function(index){
this.tableData.splice(index,);
},
checkAll: function () {
var _this = this
if (this.checkall) {
// 实现反选
this.checked = []
} else {
// 实现全选
this.checked = []
this.tableData.forEach(function (item) {
_this.checked.push(item.id)
})
}
if (this.checked.length === this.tableData.length) {
this.checkall = true
// console.log(this.checkall)
// console.log(this.checked)
}
}
}
});
var app1=new Vue({
el: '#page-break',
data: {
seen: true,
cur: ,
all: 2
},
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);
},
},
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 {id=,date= "2016-05-02", name= "王小虎",address="上海市普陀区金沙江路 1518 弄"},
new {id=,date= "2016-04-02", name= "王小虎2",address="上海市普陀区金沙江路 1518 弄"},
new {id=,date= "2016-06-02", name= "王小虎3",address="上海市普陀区金沙江路 1518 弄"},
new {id=,date= "2016-07-02", name= "王小虎4",address="上海市普陀区金沙江路 1518 弄"},
new {id=,date= "2016-08-02", name= "王小虎5",address="上海市普陀区金沙江路 1518 弄"},
new {id=,date= "2016-09-02", name= "王小虎6",address="上海市普陀区金沙江路 1518 弄"},
new {id=,date= "2016-10-02", name= "王小虎7",address="上海市普陀区金沙江路 1518 弄"},
new {id=,date= "2016-11-02", name= "王小虎8",address="上海市普陀区金沙江路 1518 弄"},
new {id=,date= "2016-11-02", name= "王小虎8",address="上海市普陀区金沙江路 1518 弄"},
new {id=,date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"},
new {id=,date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"},
new {id=,date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"},
new {id=,date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"},
new {id=,date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"},
new {id=,date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"},
new {id=,date= "2016-11-02", name= "王小虎89",address="上海市普陀区金沙江路 1518 弄"},
new {id=,date= "2016-11-02", name= "王小虎81",address="上海市普陀区金沙江路 1518 弄"},
new {id=,date= "2016-11-02", name= "王小虎81",address="上海市普陀区金沙江路 1518 弄"},
}; return Json(new { total = product.Count(), rows = product.Skip((pageIndex - ) * pageSize).Take(pageSize).ToList() }, JsonRequestBehavior.AllowGet);
}
vue day8 table page的更多相关文章
- 关于【vue + element-ui Table的数据多选，多页选择数据回显，分页记录保存选中的数据】的优化
之前写的[vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据]这篇博客.功能虽然实现了相对应的功能.但是用起来很不爽.所以进行了优化. 备注:最近可能没时 ...
- vue day7 table checkbox 全选
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- vue day4 table
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- vue+ element table如何给指定的单元格添加点击事件？
今天使用vue,以及element-ui这个框架时,发现业务需要在表格里加一个连接跳转,当时立刻打开element的官网,进行查看http://element-cn.eleme.io/#/zh-CN/ ...
- vue.js table组件封装
table组件 和 分页组件来自iview,在这里我根据公司业务再次做了一次封装,使用slot进行内容分发,可以随意放置input输入框和button按钮 ,再使用props向子组件传递参数,使用em ...
- vue导出table内容至excel——转
一:在项目中需要安装2个依赖项,如下命令: npm install --save file-saver xlsx 二:在vue文件中如下使用即可: <template> <div c ...
- vue的table组件
一个vue-table的组件 说明: 1.基于element-ui开发的vue表格组件. 功能: 1.支持树形数据的展示 2.行拖拽排序 3.单元格拖拽排序 github 使用方法: 1.下载npm包 ...
- ant design for vue 关于table的一些问题
1.为table添加分页: :pagination="pagination" pagination: { defaultPageSize: 10, showTotal: (tota ...
- vue的table切换
HTML: <div id="box"> <ul> <li v-for="(item,index) in items" v-tex ...
随机推荐
- CEPH集群操作入门--配置
参考文档:CEPH官网集群操作文档 概述 Ceph存储集群是所有Ceph部署的基础. 基于RADOS,Ceph存储集群由两种类型的守护进程组成:Ceph OSD守护进程(OSD)将数据作为对象 ...
- 关于L1和L2的直观解释
https://blog.csdn.net/jinping_shi/article/details/52433975
- iis7 设置http 自动跳转到https
https://www.cnblogs.com/wxbug/p/7054972.html
- Problem 8: Largest product in a series
先粘实现代码,以后需要再慢慢补充思路 s = ''' 73167176531330624919225119674426574742355349194934 9698352031277450632623 ...
- 简单理解 SVM
SVM,中文名叫支持向量机. 在深度学习出现以前,它是数据挖掘的宠儿: SVM具有十分完整的数据理论证明,但同时理论也相当复杂. 初识SVM 同其他分类算法一样,SVM分类也是寻找合适的决策边界,为 ...
- 根据图片URL获取图片的尺寸【Swift语言实现】
import UIKit extension UIImage { /// 获取网络图片尺寸 /// /// - Parameter url: 网络图片链接 /// - Returns: 图片尺寸siz ...
- tomcat 内存溢出处理方案
找到tomcat7w.exe 在java 页 java options 最后添加 -XX:PermSize=256m-XX:MaxPermSize=512m
- java并发中的Semaphore
什么是Semaphore Semaphore可以控制某个资源可被同时访问的个数(locks和synchronized锁,在任何时刻只允许一个任务访问一个资源),通过acquire()获取一个许可,如果 ...
- 常用oracle可重复执行的脚本模板
为保证脚本的可重复执行以及丢失,涉及到数据库环境的移植等,就会使用可重复执行脚本,此处仅提供相关一些模板 说明下:该脚本需要在命令窗口执行,而不是在SQL窗口执行 创建序的脚本 /** * 作者:zk ...
- Filter 中空指针错误
Filter 是过滤器,凡是通过servlet JSP 的请求需要filter 进行过滤或者拦截操作,保证数据的合法或者逻辑正确性 但是写第一个filter 配置完成后,发现jsp 文件进不去了,直 ...