vue2.0與bootstrap3實(shí)現(xiàn)列表分頁(yè)效果
本文實(shí)例為大家分享了Android九宮格圖片展示的具體代碼,供大家參考,具體內(nèi)容如下
直接引入vue的js文件進(jìn)行頁(yè)面渲染分頁(yè),不是vuex的哦,以下源碼可以直接運(yùn)行喲^_^
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用vue2.0與bootstrap3進(jìn)行簡(jiǎn)單列表分頁(yè)</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>首頁(yè)</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);"> 首頁(yè) </a> </li> <li v-if="pageData.curPage == 1 || pageData.total == 0 || pageData.total == 1" class="prev disabled"> <a>上一頁(yè)</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);"> 上一頁(yè)</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>下一頁(yè)</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);"> 下一頁(yè)</i> </a> </li> <li v-if="pageData.curPage == pageData.totalPage || pageData.total == 0 || pageData.total == 1" class="next disabled"> <a>末頁(yè)</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);"> 末頁(yè) </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ù),可使用各種語(yǔ)言替換^_^ 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)前頁(yè)碼 pageSize: 10,//每頁(yè)條數(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) {//編輯操作在這兒?jiǎn)? 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頁(yè)以內(nèi) for (var $i = 1; $i <= totalPage; $i++) { pageIndex.push($i); } } else {//大于5頁(yè) 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) {//換頁(yè) this.page = page; this.pageSize = pageSize; this.listItems(); }, goPage: function (pageSize, totalPage) {//跳轉(zhuǎn)頁(yè) 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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue實(shí)例中生命周期created和mounted的區(qū)別詳解
這篇文章主要給大家介紹了關(guān)于Vue實(shí)例中生命周期created和mounted區(qū)別的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08vue3中$attrs的變化與inheritAttrs的使用詳解
$attrs現(xiàn)在包括class和style屬性。?也就是說(shuō)在vue3中$listeners不存在了,vue2中$listeners是單獨(dú)存在的,在vue3?$attrs包括class和style屬性,?vue2中?$attrs?不包含class和style屬性,這篇文章主要介紹了vue3中$attrs的變化與inheritAttrs的使用?,需要的朋友可以參考下2022-10-10淺談vue中改elementUI默認(rèn)樣式引發(fā)的static與assets的區(qū)別
下面小編就為大家分享一篇淺談vue中改elementUI默認(rèn)樣式引發(fā)的static 與assets的區(qū)別,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02Vue3+ElementUI 多選框中復(fù)選框和名字點(diǎn)擊方法效果分離方法
這篇文章主要介紹了Vue3+ElementUI 多選框中復(fù)選框和名字點(diǎn)擊方法效果分離方法,文中補(bǔ)充介紹了VUE-Element組件 CheckBox多選框使用方法,需要的朋友可以參考下2024-01-01使用Vue?Query實(shí)現(xiàn)高級(jí)數(shù)據(jù)獲取的示例詳解
構(gòu)建現(xiàn)代大規(guī)模應(yīng)用程序最具挑戰(zhàn)性的方面之一是數(shù)據(jù)獲取,這也是?Vue?Query?庫(kù)的用途所在,下面就跟隨小編一起學(xué)習(xí)一下如何利用Vue?Query實(shí)現(xiàn)高級(jí)數(shù)據(jù)獲取吧2023-08-08vue轉(zhuǎn)react useEffect的全過(guò)程
這篇文章主要介紹了vue轉(zhuǎn)react useEffect的全過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09elementUI多選框反選的實(shí)現(xiàn)代碼
這篇文章主要介紹了elementUI多選框反選的實(shí)現(xiàn)代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04vue中的get方法\post方法如何實(shí)現(xiàn)傳遞數(shù)組參數(shù)
這篇文章主要介紹了vue中的get方法\post方法如何實(shí)現(xiàn)傳遞數(shù)組參數(shù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04