Home > Article > Web Front-end > How to implement list paging in vue2.0 and bootstrap3
How to implement list paging in vue2.0 and bootstrap3
- 亚连Original
- 2018-06-23 17:40:201280browse
This article mainly introduces the list paging effect of vue2.0 and bootstrap3 in detail. It has a certain reference value. Interested friends can refer to it.
The example of this article shares with you Android The specific code for the Jiugongge picture display is for your reference. The specific content is as follows
Directly introduce vue’s js file for page rendering and paging, not vuex. The following source code can be run directly ^_^
<!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>
<p 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>
<p id="pagelist">
<p class="row">
<p class="col-sm-6" style="line-height: 80px">
<p 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>
条
</p>
</p>
<p class="col-sm-6">
<p 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>
</p>
</p>
</p>
</p>
</td>
<tr>
</tbody>
</table>
</p>
<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>The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
Detailed introduction to the use of Vue event modifier capture
How to change the avatar in node
404 problem occurs when refreshing the page in react-router
How to implement object management of url in js
How to use Generator methods in JavaScript
The above is the detailed content of How to implement list paging in vue2.0 and bootstrap3. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to implement custom toast in WeChat mini programNext article：How to implement custom toast in WeChat mini program
Related articles
See more- An in-depth analysis of the Bootstrap list group component
- Detailed explanation of JavaScript function currying
- Complete example of JS password generation and strength detection (with demo source code download)
- Angularjs integrates WeChat UI (weui)
- How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills