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 ...
随机推荐
- 洛谷P1993 小K的农场
思路是差分约束+dfs版SPFA. 首先来思考差分约束的过程,将题目给出的式子进行转化: 农场a比农场b至少多种植了c个单位的作物, SPFA我们考虑跑最短路,那么要让SPFA中满足的式子就是if(d ...
- cdh日常维护常见问题及解决方案
为数据节点添加新硬盘 - 挂载硬盘到指定文件夹.如`/dfs_diskb`: - 打开cloudera manager -> hdfs -> 配置 -> DataNode -> ...
- Altium designer 新建快捷键
示例: 1.按下Ctrl: 2.点击需要建立快捷键的图标:点击交互式布线图标,然后在选择性输入要用到的快捷键:
- spring cloud + spring boot + springmvc+mybatis分布式微服务云架构
做一个微服务架构需要的技术整理: View: H5.Vue.js.Spring Tag.React.angularJs Spring Boot/Spring Cloud:Zuul.Ribbon.Fei ...
- RAID配置多阵列
感谢: https://www.cnblogs.com/hystj/articles/8672029.html
- mybatis分页查询的万能模板
分页查询项目里太多了,而这种分页查询,在mybatis里面的配置几乎一模一样,今天就整理一个比较好和实用的模板,供以后直接Ctrl+C <select id="queryMember& ...
- cscope和ctags自动更新
1.写一个shell脚本,定时更新数据库文件,命名为auto_load_cscope.sh,在/usr/local/bin里设置软链接为autocs #!/bin/bash cd $1 while : ...
- Jsの练习-数组常用方法 -forEach()
forEach() : 对数组进行遍历循环,对数组中的每一项运行给定函数. 格式: arr.forEach(function(value,index){}) <!DOCTYPE html> ...
- mongo的runCommand与集合操作函数的关系
除了特殊注释外,本文的测试结果均基于 spring-data-mongodb:1.10.6.RELEASE(spring-boot-starter:1.5.6.RELEASE),MongoDB 3.0 ...
- RobotFramework之Run Keyword的使用
RobotFramework之Run Keyword的使用 在之前写的RobotFramework(二)中有提到过这个Run Keyword关键字的使用,但是再做检查判断的时候,发现它的 ...