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

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下

直接引入vue的js文件进行页面渲染分页,不是vuex的哦,以下源码可以直接运行哟^_^

<!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>

    <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>

      

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/1002.html