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 ...
随机推荐
- 北航OO第一单元总结
我本着公平公开公正的态度作出以下评价: 1.面向对象真的很修身养性 2.有一个好的身体非常重要 3.互相hack可以暴露人的阴暗面 好了,步入正题. 一.作业分析 1.第一次作业分析 1.1类图 1. ...
- 下载RDO OpenStack RPM
先把http://mirrors.163.com/centos/7.2.1511/cloud/x86_64/openstack-newton/目录下的rpm包整理到一个文件rpmlist.txt中,然 ...
- [转载]关于laravel中表关系的一对一、一对多、多对一、多对多实践
这是转载的文章 出处:https://blog.csdn.net/weixin_38112233/article/details/79220535 作者:重新遇到 一.建表和插入测试数据 1.用户表建 ...
- Exploit-Exercises nebule 旅行日志（二）
接着上次的路程继续在ubuntu下对漏洞的探索练习,这次是level01了 先看下level01的问题描述: 目标还是要能运行getflag这个可执行的程序,但如果直接运行是不行的,会提示: getf ...
- java解析HTML之神器------Jsoup
背景:公司项目要对接第三方商城的商品到自己的商城来卖,商品详情给了个链接url,因为对方的商品详情有他们的物流说明,售后信息,所以要求去掉这部分的代码 @Test public void getIte ...
- listener介绍
当Web 应用在Web 容器中运行时, Web 应用内部会不断地发生各种事件: 如Web 应用被启动.Web 应用被停止,用户session 开始.用户session 结束.用户请求到达等, 通常来说 ...
- linux 清理几天前的日志或文件
执行清理1天前的 war 包 find . -ctime +1 -name "*.war" -exec rm {} \;
- 给大家介绍一个实用的RN神器DeviceEventEmitter
再不出来更新一下自己都感觉不到自己还存在了,这个监听最常用的地方莫过于单选和全选了,,当然远不止这个了,大家可以自己去多尝试几波,举个栗子 A组件全选所在 //全选 choose(bool){ //选 ...
- js图片库
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- oracle 数据库备份expdp、impdp
跳转查看:https://blog.csdn.net/qq_26230421/article/details/79382013 或 https://www.cnblogs.com/promise-x/ ...