vue_filter_paging

by Francesco Frustaci

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<div class="inner-page container-fluid">
    <div class="container">
        <ol class="breadcrumb">
            <li><a href="/Pagine/default.aspx">Home</a></li>
            <li class="active">Lista Applicazioni</li>
        </ol>
    </div>
</div>
<div id="app1">
  <div class="search-wrapper">
   <input type="text" v-model="search" placeholder="Search title.."/>

  </div> 

  <ul>
    <li v-for="item in paginateList">{{ item.title}}</li>
  </ul>
   <button type="button" class="btn btn-sm btn-outline-secondary" v-show="pages.length > 5" v-if="page != 1" @click="page--"> &lt;&lt; </button>
            <button type="button" v-show="pages.length > 1" class="btn btn-sm btn-outline-secondary" v-for="(pageNumber, i) in pages.slice(page-1, page+5)" :key="i" @click="page = pageNumber"> {{pageNumber}} </button>
            <button type="button" @click="page++" v-show="pages.length > 5" v-if="page < pages.length" class="btn btn-sm btn-outline-secondary"> &gt;&gt; </button> 
</div>

JavaScript

var a= new Vue({
    el: "#app1",
    data: {
        search: '',
        items: [],
        page: 1,
        perPage: 4,
                 
    },
    methods: {
        getListData: function(){
         var endPointUrl = "https://jsonplaceholder.typicode.com/posts";           
            var vm = this;
            axios.get(endPointUrl).then(function (response){
               console.log(response.data);

               vm.items= response.data

                            });
        },
       
        paginate:function(items) {
            var page = this.page;
            var _this = this;
            var  perPage = this.perPage;
            var from = (page * perPage) - perPage;
            var to = (page * perPage);
            return  items.slice(from, to);
        },
        
    },
	computed: {
	paginateList:function() {
		return this.paginate(this.filteredList);
        },
 
    filteredList: function () {
      var _this = this;
      return this.items.filter(function (item) {
        return item.title.toLowerCase().match(_this.search.toLowerCase());
      });
    },
    pages() {
    	let arr = [];
      var  numberOfPages = Math.ceil(this.filteredList.length / this.perPage);
            for (var index = 1; index <= numberOfPages; index++) {
                arr.push(index);
            }
    return arr;
    }
     
    
    },
    watch: {
    	search() {
      	this.page = 1;
      }
    },
    created: function(){
        this.getListData();
    }
        
});