vue2.0与bootstrap3实现列表分页效果
本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下
直接引入vue的js文件进行页面渲染分页，不是vuex的哦，以下源码可以直接运行哟^_^
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用vue2.0与bootstrap3进行简单列表分页</title>
<link href="http://v3.bootcss.com/dist/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cn.vuejs.org/js/vue.js"></script>
</head>
<body>
<div class="bs-example" id="table">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>名称</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-if="listData.length>0" v-for="item in listData">
<th scope="row">{{item.id}}</th>
<td>{{item.name}}</td>
<td>
<button v-on:click="editItem(item.id)" class="btn btn-default" >编辑</button>
<button v-on:click="deleteItem(item.id)" class="btn btn-default" >删除</button>
</td>
</tr>
<tr>
<td colspan=3>
<div id="pagelist">
<div class="row">
<div class="col-sm-6" style="line-height: 80px">
<div class="dataTables_info" id="sample-table-2_info">
共{{pageData.total}}条，当前显示第
<span v-if="pageData.pageSize==1 || pageData.total == 0 || pageData.total == 1">
{{pageData.itemStart}}</span>
<span v-else>{{pageData.itemStart}}-{{pageData.itemEnd}}</span>
条
</div>
</div>
<div class="col-sm-6">
<div class="dataTables_paginate paging_bootstrap">
<ul class="pagination">
<li v-if="pageData.curPage == 1 || pageData.total == 0 || pageData.total == 1" class="prev disabled">
<a>首页</a>
</li>
<li v-else class="prev">
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="changeCurPage(1,pageData.pageSize);">
首页
</a>
</li>
<li v-if="pageData.curPage == 1 || pageData.total == 0 || pageData.total == 1" class="prev disabled">
<a>上一页</a>
</li>
<li v-else class="prev">
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="changeCurPage(pageData.curPage-1,pageData.pageSize);">
上一页</i>
</a>
</li>
<li v-if="pageData.totalPage > 5 && pageData.curPage > 3" class="next disabled">
<a>...</a>
</li>
<template v-for="pageItem in pageData.pageIndex">
<li v-if="pageData.curPage == pageItem" class="active">
<a>{{pageItem}}</a>
</li>
<li v-else>
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="changeCurPage(pageItem,pageData.pageSize);">
{{pageItem}}
</a>
</li>
</template>
<li v-if="pageData.totalPage > 5 && pageData.curPage < pageData.totalPage-2" class="next disabled">
<a>...</a>
</li>
<li v-if="pageData.curPage == pageData.totalPage || pageData.total == 0 || pageData.total == 1" class="next disabled">
<a>下一页</i></a>
</li>
<li v-else class="next">
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="changeCurPage(pageData.curPage+1,pageData.pageSize);">
下一页</i>
</a>
</li>
<li v-if="pageData.curPage == pageData.totalPage || pageData.total == 0 || pageData.total == 1" class="next disabled">
<a>末页</a>
</li>
<li v-else class="next">
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="changeCurPage(pageData.totalPage,pageData.pageSize);">
末页
</a>
</li>
<template v-if="pageData.totalPage > 5" class="next disabled">
<li>
<input value="" ref="goPage" class="input-mini" type="text" style="height: 32px;width:40px;margin:auto 5px auto 20px;line-height: 24px;">
<label><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="goPage(pageData.pageSize,pageData.totalPage)">Go</a></label>
</li>
</template>
</ul>
</div>
</div>
</div>
</div>
</td>
<tr>
</tbody>
</table>
</div>
<script type="text/javascript">
function getData($page,$pageSize){//获取数据，可使用各种语言替换^_^
var $data = [];
for (var $i=($page-1)*$pageSize+1; $i <=$page*$pageSize ; $i++) {
$data.push( {
id:$i,
name:'name'+$i
});
}
var $returnData = {'data':$data,'total':103};
return $returnData;
}
var vm = new Vue({
el: '#table',
data: {
listData:[],
page: 1,//当前页码
pageSize: 10,//每页条数
total:0,//总数
pageData: {
curPage: 1,
pageSize: 10,
total: 0,
totalPage: 0,
pageIndex: [],
itemStart: 0,
itemEnd: 0
}
},
methods:{
listItems: function () {//列出需要的数据
var returnData =getData(this.page,this.pageSize);
this.listData = returnData.data;
this.total=returnData['total'];
this.setPageList(this.total, this.page, this.pageSize);
},
editItem:function ($id) {//编辑操作在这儿哟
alert('编辑第'+$id+'条数据！');
},
deleteItem:function ($id) {//这里可以删除数据
alert('删除第'+$id+'条数据！');
},
setPageList: function (total, page, pageSize) {
total = parseInt(total);
var curPage = parseInt(page);
pageSize = parseInt(pageSize);
var totalPage = Math.ceil(total / pageSize);
var itemStart = (curPage - 1) * pageSize + 1;
if (curPage == totalPage) {
itemEnd = total;
} else {
itemEnd = curPage * pageSize;
}
var pageIndex = [];
if (curPage >= 1 && curPage <= totalPage) {
if (totalPage < 5) {//5页以内
for (var $i = 1; $i <= totalPage; $i++) {
pageIndex.push($i);
}
} else {//大于5页
if (curPage == 1) {
pageIndex = [curPage, curPage + 1, curPage + 2, curPage + 3, curPage + 4];
} else if (curPage == 2) {
pageIndex = [curPage - 1, curPage, curPage + 1, curPage + 2, curPage + 3];
} else if (curPage == totalPage - 1) {
pageIndex = [curPage - 3, curPage - 2, curPage - 1, curPage, totalPage];
} else if (curPage == totalPage) {
pageIndex = [curPage - 4, curPage - 3, curPage - 2, curPage - 1, curPage];
} else {
pageIndex = [curPage - 2, curPage - 1, curPage, curPage + 1, curPage + 2];
}
}
}
this.pageData.curPage = curPage;
this.pageData.pageSize = pageSize;
this.pageData.total = total;
this.pageData.totalPage = totalPage;
this.pageData.pageIndex = pageIndex;
this.pageData.itemStart = itemStart;
this.pageData.itemEnd = itemEnd;
},
changeCurPage: function (page, pageSize) {//换页
this.page = page;
this.pageSize = pageSize;
this.listItems();
},
goPage: function (pageSize, totalPage) {//跳转页
var pageIndex = this.$refs.goPage.value;
if (pageIndex <= 0) {
pageIndex = 1;
this.$refs.goPage.value = 1;
} else if (pageIndex >= totalPage) {
pageIndex = totalPage;
this.$refs.goPage.value = totalPage;
}
this.changeCurPage(pageIndex, pageSize);
}
}
});
window.onload = function(){
console.log('Hello World!');
vm.listItems();
};
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
您可能感兴趣的文章:
- VUEJS实战之构建基础并渲染出列表（1）
- Vuejs第一篇之入门教程详解（单向绑定、双向绑定、列表渲染、响应函数）
- Vue.js Ajax动态参数与列表显示实现方法
- vue.js学习笔记之绑定style样式和class列表
- vue实现列表的添加点击
- 利用VUE框架，实现列表分页功能示例代码
- Vue.js bootstrap前端实现分页和排序
- Vue.js结合bootstrap实现分页控件
- Vue Cli与BootStrap结合实现表格分页功能
相关推荐
-
Vue.js bootstrap前端实现分页和排序
写之前先抱怨几句.本来一心一意做.net开发的,渐渐地成了只做前端.最近项目基本都用java做后台,我们这些.net的就成了前端,不是用wpf做界面,就是用html写web页面. 深知自己前端技术不足,以前虽说用asp.net前后台都做,但是,对于前端都是用现成的js库和页面模板,对于vue.js等框架基本没有接触过. 只怪自己不会写java,最近做一个项目,负责前端,后台传来数据不分页,前端收到所有数据后自己分页.我尽是无语. 正好最近在看vue.js.这个页面就用它来实现吧.顺便总结下. 效
-
vue实现列表的添加点击
本文实例为大家分享了vue实现列表的添加点击,供大家参考,具体内容如下 使用指令:v-on v-for v-on v-bind v-model html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue.js</title> <style> body {font-family: &quo
-
Vue Cli与BootStrap结合实现表格分页功能
1.首先需要在vue-cli项目中配置bootstrap,jquery 2. 然后新建vue文件,如index.vue,index.vue内容如下: 3.配置路由即可运行实现. <template> <div class="tTable container body-content"> <div class="form-group"> <div class="form-group"> <div
-
Vuejs第一篇之入门教程详解（单向绑定、双向绑定、列表渲染、响应函数）
什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 接下来给大家介绍vuejs单向绑定.双向绑定.列表渲染.响应函数基础知识,具体详情如下所示: (一)单向绑定 <div id="app"> {{ message }} </div> <sc
-
Vue.js Ajax动态参数与列表显示实现方法
Vue.js简介 vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 一.动态参数显示 ajax异步请求后,接收到返回的data参数并显示在前端 1.1 引入js,也加入了jQuery <script type="text/javascript" src="/js/vue.min.js"></script> <script type="text/javascript&
-
利用VUE框架，实现列表分页功能示例代码
先来看一下效果图: 功能描述: 1. 点击页面序号跳转到相应页面: 2. 点击单左/单右,向后/向前跳转一个页面: 3. 点击双左/双右,直接跳转到最后一页/第一页: 4. 一次显示当前页面的前三个与后三个页面: 5. 始终显示最后一个页面: HTML: <!-- 分页开始 --> <div class="u-pages" style="margin-bottom:20px; margin-top:10px;"> <ul> <
-
VUEJS实战之构建基础并渲染出列表（1）
前言 我的JavaScript水平比较一般.好吧,是相当的一般.因此,对于最新的前端框架技术,实在是有点困难,但现实让我必须面对.因此,学习是唯一的出路. 纵向比较了N款前端框架,最终选择了VUE,为什么呢?理由如下: 1.angular 前途不明,1.x学习曲线高,并且好像被放弃了,而2则还没有正式推出. 2.react 比较厉害,但是没接触. 3.VUE简单,通过上手,比较适合我的思维和水平. 4.vue有中文文档,我看起来比较舒服. 既然决定学习vue,那么最好的学习方法就是实战.
-
Vue.js结合bootstrap实现分页控件
本文为大家分享了使用vue.js结合bootstrap 开发的分页控件,供大家参考,具体内容如下 效果如下 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit
-
vue.js学习笔记之绑定style样式和class列表
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 一.绑定Class属性. 绑定数据用v-bind:命令,简写成: 语法:<div v-bind:class="{ active: isActive }&q
-
vue2.0与bootstrap3实现列表分页效果
本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 直接引入vue的js文件进行页面渲染分页,不是vuex的哦,以下源码可以直接运行哟^_^ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用vue2.0与bootstrap3进行简单列表分页</title> <link href="http:
-
基于vue2.0实现仿百度前端分页效果附实现代码
前言 上篇文章中,已经使用vue实现前端分页效果,这篇文章我们单独将分页抽离出来实现一个分页组件 先看实现效果图 代码实现 按照惯例,我们在冻手实现的时候还是先想一想vue实现组件的思路 1.需要提前设定哪些参数需要暴露出来给父组件传递 <Paging :name="name" @change="onPageChange" :page-size="size" :total="total" layout="jum
-
jQuery实现仿腾讯视频列表分页效果的方法
本文实例讲述了jQuery实现仿腾讯视频列表分页效果的方法.分享给大家供大家参考.具体如下: 这里使用jQuery仿腾讯视频列表分页效果,无刷新分页特效,点击分页按钮,无刷新进入下一页内容列表. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&q
-
vue2.0 中使用transition实现动画效果使用心得
实践 这里将通过四个实践小案例来体验和学习css过渡,css动画,javascript钩子,列表过渡的应用.至于案例用到的知识点就请自行学习官网文档. 1.css过渡–实践 先来看看demo效果: 这个案例其实很简单,通过一个transition来触发多个子元素的过渡效果,我们只需要定义元素对应的过渡效果就可以,其他事情vue会帮我们搞定,由此可以扩展出其他酷炫的过渡场景效果.先来看看这个简单案例的代码实现: <template> <div class="app"&g
-
Unity3D实现列表分页效果
本文实例为大家分享了Unity3D实现列表分页效果的具体代码,供大家参考,具体内容如下 using System.Collections.Generic; using UnityEngine; public class Page : MonoBehaviour { public List<string> Tips = new List<string>(); public Texture2D DetailImg1; public Texture2D DetailImg2; priva
-
Vue组件库ElementUI实现表格列表分页效果
ElementUI实现表格列表分页效果教程,供大家参考,具体内容如下 Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助网站快速成型 <el-pagination>加上@size-change="handleSizeChange.@current-change="handleCurrentChange"处理当前页和当前页数的改变事件 <!--
-
vue2.0实现的tab标签切换效果（内容可自定义）示例
本文实例讲述了vue2.0实现的tab标签切换效果.分享给大家供大家参考,具体如下: 这里利用vue2.0 实现tab标签切换效果 比较实用 初学vue,练习写了一个demo 网上有很多同样的例子,但都只是改text数据,如果我想加入图片或者复杂的dom结构就不实用,今天这个就刚好可以. 先上代码: html部分 [记得引入vue文件哦] <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g
-
Vue2.0实现简单分页及跳转效果
用Vue2.0实现一个数据的分页及页数的跳转,代码如下: 数据绑定:{{...}} <a v-on:click="btnClick(item)">{{item}}</a> 事件绑定:v-on <a v-on:click="cur--,pageClick()">上一页</a> 判断:v-if <li v-if="cur==1">&
-
vue2.0实现分页组件的实例代码
最近使用vue2.0重构项目, 需要实现一个分页的表格, 没有找到合适的分页组件, 就自己写了一个, 效果如下: 该项目是使用 vue-cli搭建的, 如果你的项目中没有使用webpack,请根据代码自己调整: 首先新建pagination.vue文件, 所有组件的代码都写在这里, 写这样的组件并没有什么太大的难度, 主要是解决父子组件之间值传递的问题 <template> <nav> <ul class="pagination"> <li :
-
基于Vue2.0的分页组件
本文实例为大家分享了Vue2.0分页组件的具体实现代码,供大家参考,具体内容如下 整个示例打包了,有需要的可以下载,有不对的地方欢迎指出:vue分页组件 组件部分代码: Vue.component('zpagenav', { template: `<nav class="zpagenav">` + `<ul class="page-ul">` + `<li v-bind:key="index" v-for="