vue2.0與bootstrap3實(shí)現(xiàn)列表分頁效果
更新時(shí)間：2017年11月28日 11:17:33 作者：At小小程序媛
這篇文章主要為大家詳細(xì)介紹了vue2.0與bootstrap3實(shí)現(xiàn)列表分頁效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Android九宮格圖片展示的具體代碼，供大家參考，具體內(nèi)容如下
直接引入vue的js文件進(jìn)行頁面渲染分頁，不是vuex的哦，以下源碼可以直接運(yùn)行喲^_^
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用vue2.0與bootstrap3進(jìn)行簡單列表分頁</title>
<link 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}}條，當(dāng)前顯示第
<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){//獲取數(shù)據(jù)，可使用各種語言替換^_^
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,//當(dāng)前頁碼
pageSize: 10,//每頁條數(shù)
total:0,//總數(shù)
pageData: {
curPage: 1,
pageSize: 10,
total: 0,
totalPage: 0,
pageIndex: [],
itemStart: 0,
itemEnd: 0
}
},
methods:{
listItems: function () {//列出需要的數(shù)據(jù)
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+'條數(shù)據(jù)！');
},
deleteItem:function ($id) {//這里可以刪除數(shù)據(jù)
alert('刪除第'+$id+'條數(shù)據(jù)！');
},
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頁以內(nèi)
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) {//跳轉(zhuǎn)頁
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>
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue中實(shí)現(xiàn)左右聯(lián)動(dòng)的效果
這篇文章主要介紹了vue中實(shí)現(xiàn)左右聯(lián)動(dòng)的效果，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-06-06
Vue 應(yīng)用中結(jié)合vux使用微信 jssdk的方法
今天小編就為大家分享一篇Vue 應(yīng)用中結(jié)合vux使用微信 jssdk的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue實(shí)現(xiàn)數(shù)字滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)數(shù)字滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
vue.js綁定事件監(jiān)聽器示例【基于v-on事件綁定】
這篇文章主要介紹了vue.js綁定事件監(jiān)聽器的方法,結(jié)合實(shí)例形式分析了vue.js基于v-on事件綁定響應(yīng)鼠標(biāo)點(diǎn)擊相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
vue-resource攔截器設(shè)置頭信息的實(shí)例
下面小編就為大家?guī)硪黄獀ue-resource攔截器設(shè)置頭信息的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
在編寫Vue代碼的時(shí)候,經(jīng)常會(huì)碰到各種權(quán)限問題,本文主要介紹了Vue按鈕權(quán)限的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2024-08-08
Vue3進(jìn)行樣式Scoped和Global的設(shè)置方法
在 Vue 3 中,組件化開發(fā)成為了我們提升前端開發(fā)效率的利器,其中,樣式的管理也是一個(gè)至關(guān)重要的部分,在 Vue 中,我們會(huì)經(jīng)常使用兩種樣式作用域：Scoped 樣式和 Global 樣式,本文將通過示例代碼來介紹Vue3如何進(jìn)行樣式Scoped和Global的設(shè)置,需要的朋友可以參考下2025-01-01
Vue + element實(shí)現(xiàn)動(dòng)態(tài)顯示后臺(tái)數(shù)據(jù)到options的操作方法
最近遇到一個(gè)需求需要實(shí)現(xiàn)selector選擇器中選項(xiàng)值options 數(shù)據(jù)的動(dòng)態(tài)顯示，而非寫死的數(shù)據(jù)，本文通過實(shí)例代碼給大家分享實(shí)現(xiàn)方法，感興趣的朋友一起看看吧2021-07-07
使用Vue調(diào)取接口,并渲染數(shù)據(jù)的示例代碼
今天小編就為大家分享一篇使用Vue調(diào)取接口,并渲染數(shù)據(jù)的示例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了VUE插件vue-treeselect的使用及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2023-07-07