이 글은 주로 vue2.0과 bootstrap3의 목록 페이징 효과를 자세히 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.
이 글의 예시는 안드로이드 9각형 그리드의 구체적인 코드를 공유합니다. picture display. , 참고로 구체적인 내용은 다음과 같습니다
vuex가 아닌 페이지 렌더링 및 페이징을 위한 vue의 js 파일을 직접 도입합니다. 다음 소스 코드는 직접 실행할 수 있습니다 ^_^
<!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>위는 제가 컴파일한 것입니다. 모두에게 앞으로 도움이 되길 바랍니다. 모두가 도움이 됩니다.
관련 기사:
404 반응 라우터에서 페이지를 새로 고칠 때 발생하는 문제
어떻게 들어가나요? Node.js 객체 기반 URL 관리 구현
JavaScript에서 Generator를 사용하는 방법
위 내용은 vue2.0 및 bootstrap3에서 목록 페이징을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
