web-dev-qa-db-ja.com

VueJsリミッターと範囲でページネーションを行う方法..？

私はこのようなコードを持っています：

var demoList = new Vue({
  el: '#demoList',
  data: {
    items: [{
      "id": 1,
      "name": "Tom"
    }, {
      "id": 2,
      "name": "Kate"
    }, {
      "id": 3,
      "name": "Jack"
    }, {
      "id": 4,
      "name": "Jill"
    }, {
      "id": 5,
      "name": "aa"
    }, {
      "id": 6,
      "name": "bb"
    }, {
      "id": 7,
      "name": "cc"
    }, {
      "id": 8,
      "name": "dd"
    }, {
      "id": 1,
      "name": "Tom"
    }, {
      "id": 2,
      "name": "Kate"
    }, {
      "id": 3,
      "name": "Jack"
    }, {
      "id": 4,
      "name": "Jill"
    }, {
      "id": 5,
      "name": "aa"
    }, {
      "id": 6,
      "name": "bb"
    }, {
      "id": 7,
      "name": "cc"
    }, {
      "id": 8,
      "name": "dd"
    }, ],
    loading: false,
    order: 1,
    searchText: null,
    ccn: null,
    currentPage: 0,
    itemsPerPage: 2,
    resultCount: 0
  },
  computed: {
    totalPages: function() {
      console.log(Math.ceil(this.resultCount / this.itemsPerPage) + "totalPages");
      return Math.ceil(this.resultCount / this.itemsPerPage);

    }
  },
  methods: {
    setPage: function(pageNumber) {
      this.currentPage = pageNumber;
      console.log(pageNumber);
    }
  },
  filters: {
    paginate: function(list) {
      this.resultCount = this.items.length;
      console.log(this.resultCount + " Result count");
      console.log(this.currentPage + " current page");
      console.log(this.itemsPerPage + " items per page");
      console.log(this.totalPages + " Total pages 2");
      if (this.currentPage >= this.totalPages) {
        this.currentPage = Math.max(0, this.totalPages - 1);
      }
      var index = this.currentPage * this.itemsPerPage;
      console.log(index + " index");
      console.log(this.items.slice(index, index + this.itemsPerPage));
      return this.items.slice(index, index + this.itemsPerPage);
    }
  }
});
a {
  color: #999;
}
.current {
  color: red;
}
ul {
  padding: 0;
  list-style-type: none;
}
li {
  display: inline;
  margin: 5px 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<div id="demoList">
  <div class="containerTable">
    <table class="table">
      <thead>
        <tr class="header">
          <th>
            <div><a @click="sortvia('provider_name')">Provider</a>
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items | paginate">
          <td>{{item.name}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <ul>
    <li v-for="pageNumber in totalPages">
      <a href="#" @click="setPage(pageNumber)">{{ pageNumber+1 }}</a>
    </li>
  </ul>
</div>

私はvuejsでページャーを作成しようとして立ち往生しているので、「1-2-3-4-5 ... 55」が可能であれば、誰かがこのようなページャーを作成する方法の例を任命できるかどうか疑問に思いました。もう一度助けてください。

javascriptjquerylaravel-4paginationvue.js
23
b4dQuetions

このコードを確認してください：

https://jsfiddle.net/os7hp1cy/48/

html：

<ul>
    <li v-for="pageNumber in totalPages" 
        v-if="Math.abs(pageNumber - currentPage) < 3 || pageNumber == totalPages - 1 || pageNumber == 0">
    <a href="#" @click="setPage(pageNumber)"  
       :class="{current: currentPage === pageNumber, last: (pageNumber == totalPages - 1 && Math.abs(pageNumber - currentPage) > 3), first:(pageNumber == 0 && Math.abs(pageNumber - currentPage) > 3)}">
       {{ pageNumber+1 }}</a>
    </li>
</ul>

css：

a.first::after {
  content:'...'
}

a.last::before {
  content:'...'
}

基本的に、現在のページから2ページ以内のページネーションのみを表示します。次に、ページ1と最後のページも表示され、"..." CSSを使用した数値の前後。したがって、10ページ目にいる場合は、次のように表示されます。

1... 8 9 10 11 12 ...21

33
Jeff

@Jeffのコードを分岐して、Vue 2のこのバージョンのフィルター移行のための作業バージョンを作成しました https://vuejs.org/v2/guide/migration.html#Filters -Outside-Text-Interpolations-removed 。

paginateメソッドは計算済みに移動されます。

paginate: function() {
        if (!this.users || this.users.length != this.users.length) {
            return
        }
        this.resultCount = this.users.length
        if (this.currentPage >= this.totalPages) {
          this.currentPage = this.totalPages
        }
        var index = this.currentPage * this.itemsPerPage - this.itemsPerPage
        return this.users.slice(index, index + this.itemsPerPage)
    }

警告：テキストフィルターを適用せず、ページネーションを最初に適用しました。

https://jsfiddle.net/c1ghkw2p/

2
deathemperor