vue2.0与bootstrap3实现列表分页效果

本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下
直接引入vue的js文件进行页面渲染分页，不是vuex的哦，以下源码可以直接运行哟^_^
<Meta charset="utf-8"> 使用vue2.0与bootstrap3进行简单列表<a href="https://www.jb51.cc/tag/fenye/" target="_blank" class="keywords">分页</a>
<div class="bs-example" id="table"&gt;
  <table class="table table-striped"&gt;
    <thead>
      <tr&gt;
        <th>#</th>
        <th><a href="https://www.jb51.cc/tag/mingcheng/" target="_blank" class="keywords">名称</a></th>
        <th>操作</th>
      </tr&gt;
    </thead>
    <tbody>
      <tr v-if="listData.length>0" v-for="item in listData"&gt;
        <th scope="row"&gt;{{item.id}}</th>
        <td&gt;{{item.name}}</td&gt;
        <td&gt;
          <button v-on:click="editItem(item.id)" class="btn btn-default" >编辑</button>
          <button v-on:click="deleteItem(item.id)" class="btn btn-default" ><a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a></button>
        </td&gt;
      </tr&gt;
      <tr&gt;
        <td colspan=3>
          <div id="pagelist"&gt;
              <div class="row"&gt;
                <div class="col-sm-6" style="line-height: 80px"&gt;
                  <div class="dataTables_info" id="sample-table-2_info"&gt;
                    共{{pageData.total}}条，当前<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>第
                    <span v-if="pageData.pageSize==1 || pageData.total == 0 || pageData.total == 1"&gt;
                    {{pageData.itemStart}}</span>
                    <span v-else>{{pageData.itemStart}}-{{pageData.itemEnd}}</span>
                    条
                  </div>
                </div>
                <div class="col-sm-6"&gt;
                  <div class="dataTables_paginate paging_bootstrap"&gt;
                    <ul class="pagination"&gt;
                      <li v-if="pageData.curPage == 1 || pageData.total == 0 || pageData.total == 1" class="prev disabled"&gt;
                        <a>首页</a>
                      </li>
                      <li v-else class="prev"&gt;
                        <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);"&gt;
                          首页
                        </a>
                      </li>
                      <li v-if="pageData.curPage == 1 || pageData.total == 0 || pageData.total == 1" class="prev disabled"&gt;
                        <a>上一页</a>
                      </li>
                      <li v-else class="prev"&gt;
                        <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);"&gt;
                          上一页</i>
                        </a>
                      </li>
                      <li v-if="pageData.totalPage > 5 && pageData.curPage > 3" class="next disabled"&gt;
                        <a>...</a>
                      </li>
                      <template v-for="pageItem in pageData.pageIndex"&gt;
                        <li v-if="pageData.curPage == pageItem" class="active"&gt;
                          <a>{{pageItem}}</a>
                        </li>
                        <li v-else>
                          <a href="javascript:void(0)" rel="external <a href="https://www.jb51.cc/tag/nofollow/" target="_blank" class="keywords">nofollow</a>" rel="external <a href="https://www.jb51.cc/tag/nofollow/" target="_blank" class="keywords">nofollow</a>" rel="external <a href="https://www.jb51.cc/tag/nofollow/" target="_blank" class="keywords">nofollow</a>" rel="external <a href="https://www.jb51.cc/tag/nofollow/" target="_blank" class="keywords">nofollow</a>" rel="external <a href="https://www.jb51.cc/tag/nofollow/" target="_blank" class="keywords">nofollow</a>" rel="external <a href="https://www.jb51.cc/tag/nofollow/" target="_blank" class="keywords">nofollow</a>" v-on:click="changeCurPage(pageItem,pageData.pageSize);"&gt;
                            {{pageItem}}
                          </a>
                        </li>
                      </template>
                      <li v-if="pageData.totalPage > 5 && pageData.curPage < pageData.totalPage-2" class="next disabled"&gt;
                        <a>...</a>
                      </li>
                      <li v-if="pageData.curPage == pageData.totalPage || pageData.total == 0 || pageData.total == 1" class="next disabled"&gt;
                        <a>下一页</i></a>
                      </li>
                      <li v-else class="next"&gt;
                        <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);"&gt;
                          下一页</i>
                        </a>
                      </li>
                      <li v-if="pageData.curPage == pageData.totalPage || pageData.total == 0 || pageData.total == 1" class="next disabled"&gt;
                        <a>末页</a>
                      </li>
                      <li v-else class="next"&gt;
                        <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);"&gt;
                          末页
                        </a>
                      </li>
                      <template v-if="pageData.totalPage > 5" class="next disabled"&gt;
                        <li>
                          <input value="" ref="goPage" class="input-mini" type="text" style="height: 32px;width:40px;margin:auto 5px auto 20px;line-height: 24px;"&gt;
                          <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)"&gt;Go</a></label>
                        </li>
                      </template>
                    </ul>
                  </div>
                </div>
              </div>
          </div>
        </td&gt;
      <tr&gt;
    </tbody>
  </table&gt;
</div>


<script type="text/javascript"&gt;

function getData($page,$pageSize){//<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>数据，可使用各种语言替换^_^
  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 + 3];
        } else if (curPage == totalPage - 1) {
          pageIndex = [curPage - 3,curPage - 2,curPage - 1,totalPage];
        } else if (curPage == totalPage) {
          pageIndex = [curPage - 4,curPage - 3,curPage];
        } else {
          pageIndex = [curPage - 2,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) {//@R_262_<a href="https://www.jb51.cc/tag/404/" target="_blank" class="keywords">404</a>@
    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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
vue2.0与bootstrap3实现列表分页效果

猜你在找的Bootstrap相关文章
