vue2.0與bootstrap3實現列表分頁效果

2024-05-06 15:24:03

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了Android九宮格圖片展示的具體代碼，供大家參考，具體內容如下

直接引入vue的js文件進行頁面渲染分頁，不是vuex的哦，以下源碼可以直接運行喲^_^

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>使用vue2.0與bootstrap3進行簡單列表分頁</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}}條，當前顯示第                        <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){//獲取數據，可使用各種語言替換^_^      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>

上一篇：AngularJs 禁止模板緩存的方法

下一篇：weebox彈出窗口不居中顯示的解決方法