vue2.0与bootstrap3实现列表分页效果
程序员文章站
2022-04-09 20:56:29
本文实例为大家分享了android九宫格图片展示的具体代码，供大家参考，具体内容如下
直接引入vue的js文件进行页面渲染分页，不是vuex的哦，以下源码可以直接运行哟^...
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。