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 ...
随机推荐
- mvc route .html 后缀 404
<system.webServer> <validation validateIntegratedModeConfiguration="false" /&g ...
- c++数组传参
最近感觉老是碰到数组传参的问题,特别是二维的数组,每次报错都感觉头疼,烦躁:这里必须总结一下了,先把暂时能解决的问题写在这吧,以便以后碰到查看! 先看一个一维数组传参:这样用数组传参是很不安全的:会输 ...
- vim学习纪要
普通模式 根据屏幕行上下移动. gj gk g0 g^ g$ 移动到行首第一个非空字符 ^ 反向移动到上一单词的词尾 ge 插入模式 粘贴寄存器中内容 <C-r> 可视模式 移动光标的起始 ...
- jquery添加属性使用attr、prop。
之前页面为标签添加属性都是使用的attr,删除使用removeAttr. 今天给checkbox添加checked属性时出现代码显示添加成功,但是页面不勾选内容. 后来查询发现checked是chec ...
- 用java代码作日历
import java.util.Calendar; public class CalendarBean { String day[]; int year=2005,month=0; public v ...
- axios，vue-axios在项目中的应用
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 关于axios的功能: 1,从浏览器中创建XMLHttpRequests 2,从node.js常见Htt ...
- Python第三章（北理国家精品课 嵩天等）
一.数字类型及其操作 整数:pow(x,y),想算多大,就算多大:以0b或0B开头表示二进制:以0o或0O开头表示八进制:以0x或0X开头表示十六进制. 浮点数:取值范围-10^308至10^308, ...
- 2017-10-5模拟赛T2 小Z爱排序(sorting.*)
Description Solution 比赛时找到了规律,但是没有证出来……(当然最后还是AC了……) 显然没有被操作的数在排好序的序列中一定是连续的一段. 所以,没有被操作的数一定从左到右连续地递 ...
- Docker多主机互联最佳实践
在公司使用docker多主机互联时碰到了各种坑.搞清楚后才发现如此简单,以下是根据实际经验的总结. 版本信息 Client: Version: 18.09.0 API version: 1.39 Go ...
- 使用context关闭协程以及协程中的协程
package main import ( "sync" "context" "fmt" "time" ) var wg ...