Heim > Artikel > Web-Frontend > So implementieren Sie Listen-Paging in vue2.0 und Bootstrap3
So implementieren Sie Listen-Paging in vue2.0 und Bootstrap3
- 亚连Original
- 2018-06-23 17:40:201250Durchsuche
Dieser Artikel stellt hauptsächlich den Listen-Paging-Effekt von vue2.0 und Bootstrap3 im Detail vor. Er hat einen gewissen Referenzwert.
Das Beispiel dieses Artikels teilt Ihnen den spezifischen Code mit Der spezifische Inhalt für die Jiugongge-Bildanzeige lautet wie folgt: Führen Sie die js-Datei von vue direkt zum Rendern und Paginieren ein. Der folgende Quellcode kann nicht direkt ausgeführt werden 🎜>
<!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>Das oben Gesagte habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein. Verwandte Artikel:
Detaillierte Einführung in die Verwendung der Vue-Ereignismodifikatorerfassung
So ändern Sie den Avatar im Knoten
404-Problem tritt auf, wenn die Seite im React-Router aktualisiert wird
So implementieren Sie die Objektverwaltung der URL in js
So verwenden Sie Generator in JavaScript
Das obige ist der detaillierte Inhalt vonSo implementieren Sie Listen-Paging in vue2.0 und Bootstrap3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So implementieren Sie einen benutzerdefinierten Toast im WeChat-MiniprogrammNächster Artikel：So implementieren Sie einen benutzerdefinierten Toast im WeChat-Miniprogramm
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse