vue 分页
来源：互联网 发布：数控转塔冲床编程招聘 编辑：程序博客网 时间：2024/06/06 12:43
@{ Layout = "~/Views/Shared/_layout.cshtml";}<script src="~/Scripts/Home/index.js"></script><style> .table { margin-bottom: 0px; } .pagination { margin: 0; } .panel-title > * { height: 32px; left: 15px; } .keywords { width: 150px; } .panel-body { padding: 0; } .list-inline { line-height:25px; height:25px; display:block; padding:0; } .list-inline > li { line-height:25px; }</style><div class="row"> <div class="col-sm-1 col-sm-offset-1 col-md-1 col-md-offset-1"> <div class="thumbnail"> <img src="~/Icons/love.png"/> <div class="caption"> <p>dfdfdfdfddfdf</p> </div> </div> </div> <div class="col-sm-1 col-sm-offset-1 col-md-1 col-md-offset-1"> <div class="thumbnail"> <img src="~/Icons/love.png" /> <div class="caption"> <p>dfdfdfdfddfdf</p> </div> </div> </div> <div class="col-sm-1 col-sm-offset-1 col-md-1 col-md-offset-1"> <div class="thumbnail"> <img src="~/Icons/love.png" /> <div class="caption"> <p>dfdfdfdfddfdf</p> </div> </div> </div> <div class="col-sm-1 col-sm-offset-1 col-md-1 col-md-offset-1"> <div class="thumbnail"> <img src="~/Icons/love.png" /> <div class="caption"> <p>dfdfdfdfddfdf</p> </div> </div> </div> <div class="col-sm-1 col-sm-offset-1 col-md-1 col-md-offset-1"> <div class="thumbnail"> <img src="~/Icons/love.png" /> <div class="caption"> <p>dfdfdfdfddfdf</p> </div> </div> </div> <div class="col-sm-1 col-sm-offset-1 col-md-1 col-md-offset-1"> <div class="thumbnail"> <img src="~/Icons/love.png" /> <div class="caption"> <p>dfdfdfdfddfdf</p> </div> </div> </div></div><div class="row"> <div class="col-sm-1 col-sm-offset-1 col-md-1 col-md-offset-1"> <div class="thumbnail"> <img src="~/Icons/love.png" /> <div class="caption"> <p>dfdfdfdfddfdf</p> </div> </div> </div> <div class="col-sm-1 col-sm-offset-1 col-md-1 col-md-offset-1"> <div class="thumbnail"> <img src="~/Icons/love.png" /> <div class="caption"> <p>dfdfdfdfddfdf</p> </div> </div> </div> <div class="col-sm-1 col-sm-offset-1 col-md-1 col-md-offset-1"> <div class="thumbnail"> <img src="~/Icons/love.png" /> <div class="caption"> <p>dfdfdfdfddfdf</p> </div> </div> </div> <div class="col-sm-1 col-sm-offset-1 col-md-1 col-md-offset-1"> <div class="thumbnail"> <img src="~/Icons/love.png" /> <div class="caption"> <p>dfdfdfdfddfdf</p> </div> </div> </div> <div class="col-sm-1 col-sm-offset-1 col-md-1 col-md-offset-1"> <div class="thumbnail"> <img src="~/Icons/love.png" /> <div class="caption"> <p>dfdfdfdfddfdf</p> </div> </div> </div> <div class="col-sm-1 col-sm-offset-1 col-md-1 col-md-offset-1"> <div class="thumbnail"> <img src="~/Icons/love.png" /> <div class="caption"> <p>dfdfdfdfddfdf</p> </div> </div> </div></div><div class="panel panel-default" id="app"> <div class="panel-heading"> <div class="panel-title"> <select v-model="selectTypeId"> <option value="0">所有类型</option> <option v-for="row in rowsType" v-bind:value="row.TypeId">{{row.TypeName}}</option> </select> <input class="keywords" type="text" placeholder="输入关键字" v-model="temp.Content" /> <input type="button" value="查询" v-on:click="loadDataByKey(selectTypeId,temp.Content)" /> </div> </div> <div class="panel-body "> <table class="table table-bordered"> <tr v-for="row in rows"> <td class="col-sm-1 col-md-1"> <ul class="list-inline"> <li><img src="~/Icons/love.png" /></li> <li><a href="#">{{row.TypeName}}</a></li> </ul> </td> <td class="col-sm-11 col-md-11"> <ul> <li><a>{{row.Content}}</a></li> </ul> </td> </tr> </table> </div> <ul class="pagination pull-right list-group"> <li v-if="this.cur !== 1"><a v-on:click="upPage(selectTypeId,temp.Content)" class="list-group-item">上一页</a></li> <li v-for="index in indexs" v-bind:class="{ 'active': cur == index}"> <a v-on:click="btnClick(index,selectTypeId,temp.Content)" class="list-group-item">{{ index }}</a> </li> <li v-if="this.cur !== this.all"><a v-on:click="downPage(selectTypeId,temp.Content)" class="list-group-item">下一页</a></li> <li><a class="list-group-item">共<i>{{all}}</i>页</a></li> </ul></div>var data = { all: 1, //总页数 cur: 1,//当前页码 pageSize: minglib.pageSize, rows: [{ ContentId: "", TypeName: "", Content: "", CreateTime: "" }], rowsType: [{ TypeId: "", TypeName: "" }], temp: { ContentId: "", TypeName: "", Content: "", CreateTime: "" }, selectTypeId: 0};$(function () { var app = new Vue({ el: "#app", data: data, mounted: function () { $.ajax({ type: "POST", dataType: "json", data: { page: 1, pageSize: 15 }, url: "/Home/GetPublicInfoContent", success: function (result) { if (result.TypeModels != null) { data.rowsType = result.TypeModels; } if (result.ContentModels != null) { result.ContentModels.forEach(function (value) { value.CreateTime = minglib.changeDateFormat(value.CreateTime); }); data.rows = result.ContentModels; data.all = Math.ceil(result.Pages / data.pageSize); } } }); }, methods: { loadDataByKey: function (typeid, keys) { $.ajax({ type: "POST", dataType: "json", data: { typeId: typeid, key: keys, page: 1, pageSize: data.pageSize }, url: "/Home/GetPublicInfoContentByCondition", success: function (result) { if (result != null) { result.data.forEach(function (value) { value.CreateTime = minglib.changeDateFormat(value.CreateTime); }); data.all = Math.ceil(result.pages / data.pageSize); data.rows = result.data; } } }); }, btnClick: function (index,typeid,keys) { if (index != this.cur) { this.cur = index; $.ajax({ type: "post", dataType: "json", data: { typeId: typeid, key: keys, page: index, pageSize: data.pageSize }, url: "/Home/GetPublicInfoContentByCondition", success: function (result) { if (result != null) { result.data.forEach(function (value) { value.CreateTime = minglib.changeDateFormat(value.CreateTime); }); data.all = Math.ceil(result.pages / data.pageSize); data.rows = result.data; } } }); } }, upPage: function (typeid, keys) { this.cur--; $.ajax({ type: "post", dataType: "json", data: { typeId: typeid, key: keys, page: this.cur, pageSize: data.pageSize }, url: "/Home/GetPublicInfoContentByCondition", success: function (result) { if (result != null) { result.data.forEach(function (value) { value.CreateTime = minglib.changeDateFormat(value.CreateTime); }); data.all = Math.ceil(result.pages / data.pageSize); data.rows = result.data; } } }); }, downPage: function (typeid, keys) { this.cur++; $.ajax({ type: "post", dataType: "json", data: { typeId: typeid, key: keys, page: this.cur, pageSize: data.pageSize }, url: "/Home/GetPublicInfoContentByCondition", success: function (result) { if (result != null) { result.data.forEach(function (value) { value.CreateTime = minglib.changeDateFormat(value.CreateTime); }); data.all = Math.ceil(result.pages / data.pageSize); data.rows = result.data; } } }); } }, watch: { cur: function (oldValue, newValue) { } }, computed: { indexs: function () { var left = 1 var right = this.all var ar = [] if (this.all >= 6) { if (this.cur > 2 && this.cur < this.all - 2) { left = this.cur - 2 right = this.cur + 2 } else { if (this.cur <= 3) { left = 1 right = 5 } else { right = this.all left = this.all - 4 } } } while (left <= right) { ar.push(left) left++ } return ar }, showLast: function () { return this.cur !== this.all }, showFirst: function () { return this.cur !== 1; } } })})阅读全文
0 0
- vue 分页
- vue 分页
- Vue 分页
- 【VUE】vue分页插件share
- vue分页器
- Vue封装分页组件
- vue分页组件编写
- VUE+elementUI分页
- vue制作分页效果
- 使用vue制作分页
- VUE客户端分页
- Vue分页实例
- vue 简单分页组件
- vue分页组件table-pagebar
- Vue 分页组件 v2.0
- Vue实现web分页组件
- VUE分页组件table-pagebar
- Vue.js 实现分页查询
- 2017.10.20笔记：多表数据操作
- 关于编码的问题
- 链栈
- ubuntu Linux 设置记录
- C6748_UART轮询模式
- vue 分页
- 假设检验（Hypothesis Testing）
- 链表练习：多项式的加法和乘法
- java的自我总结
- hadoop编程(5)-MapReduce案例：通过MinimalMapReduce进一步了解MR的机制
- 队列
- java虚拟机详解
- 前端仿真实现之Mock
- 流式大数据处理的三种框架：Storm，Spark和Samza
