suchen

Heim >Web-Frontend >js-Tutorial >So implementieren Sie Listen-Paging in vue2.0 und Bootstrap3

So implementieren Sie Listen-Paging in vue2.0 und Bootstrap3

亚连
亚连Original
2018-06-23 17:40:201320Durchsuche

Dieser Artikel stellt hauptsächlich den Listen-Paging-Effekt von vue2.0 und Bootstrap3 im Detail vor. Er hat einen gewissen Referenzwert.

Das Beispiel dieses Artikels teilt Ihnen den spezifischen Code mit Der spezifische Inhalt für die Jiugongge-Bildanzeige lautet wie folgt: Führen Sie die js-Datei von vue direkt zum Rendern und Paginieren ein. Der folgende Quellcode kann nicht direkt ausgeführt werden 🎜>

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

    <p 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>
              <p id="pagelist">
                  <p class="row">
                    <p class="col-sm-6" style="line-height: 80px">
                      <p 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>
                        条
                      </p>
                    </p>
                    <p class="col-sm-6">
                      <p 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>
                      </p>
                    </p>
                  </p>
              </p>
            </td>
          <tr>
        </tbody>
      </table>
    </p>


    <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:&#39;name&#39;+$i
        });
      }
      var $returnData = {&#39;data&#39;:$data,&#39;total&#39;:103};
      return $returnData;
    }

    var vm = new Vue({
      el: &#39;#table&#39;,
      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[&#39;total&#39;];
          this.setPageList(this.total, this.page, this.pageSize);
        },
        editItem:function ($id) {//编辑操作在这儿哟
          alert(&#39;编辑第&#39;+$id+&#39;条数据！&#39;);
        },
        deleteItem:function ($id) {//这里可以删除数据
          alert(&#39;删除第&#39;+$id+&#39;条数据！&#39;);
        },
        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(&#39;Hello World!&#39;);
     vm.listItems();
    }; 
    </script>
  </body>
</html>

Das oben Gesagte habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Detaillierte Einführung in die Verwendung der Vue-Ereignismodifikatorerfassung

So ändern Sie den Avatar im Knoten

404-Problem tritt auf, wenn die Seite im React-Router aktualisiert wird

So implementieren Sie die Objektverwaltung der URL in js

So verwenden Sie Generator in JavaScript

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Listen-Paging in vue2.0 und Bootstrap3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript JS 对象 事件 android
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So implementieren Sie einen benutzerdefinierten Toast im WeChat-MiniprogrammNächster Artikel：So implementieren Sie einen benutzerdefinierten Toast im WeChat-Miniprogramm

In Verbindung stehende Artikel

Mehr sehen