Vue v1 Search and Pagination
How do I make an vue v1 search and pagination?
Vue search and pagination, only render viewed data in the table.. What is a vue v1 search and pagination? How do you make a vue v1 search and pagination? This script and codes were developed by Dzulfikar Adi Putra on 06 September 2022, Tuesday.
Vue v1 Search and Pagination - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vue v1 Search and Pagination</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.1/css/bulma.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app" class="container"> <h3 class="title is-3">Vue v1 Search and Pagination</h3> <h5 class="subtitle is-5"> credit : <a href="http://bulma.io/">bulma</a>, <a href="https://vuejs.org/">vuejs</a>, <a href="http://chancejs.com/">chancejs</a>, <a href="http://lodash.com/">lodash</a> </h5> <div class="box m-form"> <label class="label">Search Person Name</label> <div class="control is-grouped"> <p class="control is-expanded"> <input class="input" v-model="searchItem" v-on:keyup="searchInTheList(searchItem)" type="text" placeholder="Find a person"> <span class="help is-dark"><strong>{{filteredItems.length | numeral}}</strong> of {{items.length | numeral}} person found</span> </p> <p class="control"> <a class="button is-info" v-on:click="clearSearchItem" v-bind:class="{'is-disabled': searchItem==''}"> Clear </a> </p> </div> </div> <div class="box m-tags"> <span><strong>{{selectedItems.length}}</strong> person selected</span> <div class="m-tags-items"> <a v-for="item in selectedItems" v-on:click="removeSelectedItem(item)" class="tag is-dark is-small"> {{item.name}} <button class="delete is-small"></button> </a> </div> </div> <nav class="pagination m-pagination"> <a class="button" v-on:click="selectPage(this.pagination.currentPage-1)" v-bind:class="{'is-disabled': this.pagination.currentPage==this.pagination.items[0] || this.pagination.items.length==0}">Previous</a> <a class="button" v-on:click="selectPage(this.pagination.currentPage+1)" v-bind:class="{'is-disabled': this.pagination.currentPage==this.pagination.items[this.pagination.items.length-1] || this.pagination.items.length==0}">Next page</a> <ul> <li> <a class="button" v-on:click="selectPage(pagination.items[0])" v-bind:class="{'is-disabled': this.pagination.currentPage==this.pagination.items[0] || this.pagination.items.length==0}"> First </a> </li> <li class="is-space"></li> <li v-for="item in pagination.filteredItems"> <a class="button" v-on:click="selectPage(item)" v-bind:class="{'is-info': item == pagination.currentPage}">{{item | numeral}}</a> </li> <li class="is-space"></li> <li> <a class="button" v-on:click="selectPage(pagination.items[pagination.items.length-1])" v-bind:class="{'is-disabled': this.pagination.currentPage==this.pagination.items[this.pagination.items.length-1] || this.pagination.items.length==0}"> Last </a> </li> </ul> </nav> <div class="m-table"> <table class="table is-bordered is-striped is-narrow"> <tr> <th class="m-table-index">#</th> <th>Name</th> <th>Email</th> <th>Address</th> <th>Phone</th> <th></th> </tr> <tr v-for="item in paginatedItems"> <td>{{item.key}}</td> <td>{{item.name}}</td> <td>{{item.email}}</td> <td>{{item.address}}</td> <td>{{item.phone}}</td> <td><a class="button is-info is-outlined" v-on:click="selectItem(item)">Select</a></td> </tr> </table> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.4/chance.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/numeral.js/1.5.3/numeral.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Vue v1 Search and Pagination - Script Codes CSS Codes
#app { padding: 40px 0;
}
.m-pagination .is-space { width: 20px;
}
.m-table { margin-top: 20px;
}
.m-table tr th { background: #c0c0c0; color: #393939;
}
.m-table-index { width: 20px;
}
.m-tags-items { margin-top: 5px; height: 60px; overflow-y: scroll;
}
.m-tags-items .tag { margin-bottom: 5px; margin-right: 3px;
}
Vue v1 Search and Pagination - Script Codes JS Codes
'use strict';
var items = [];
for (var i = 0; i < 20000; i++) { items.push({ key: i + 1, ssn: chance.ssn(), // SSN as person ID name: chance.name(), email: chance.email(), address: chance.address(), phone: chance.phone(), selected: false });
}
Vue.filter('numeral', function (value) { return numeral(value).format('0,0');
});
new Vue({ el: '#app', data: { searchItem: '', items: items, filteredItems: [], paginatedItems: [], selectedItems: [], pagination: { range: 5, currentPage: 1, itemPerPage: 8, items: [], filteredItems: [] } }, ready: function ready() { this.filteredItems = this.items; this.buildPagination(); this.selectPage(1); }, methods: { clearSearchItem: function clearSearchItem() { this.searchItem = undefined; this.searchInTheList(''); }, searchInTheList: function searchInTheList(searchText, currentPage) { if (_.isUndefined(searchText)) { this.filteredItems = _.filter(this.items, function (v, k) { return !v.selected; }); } else { this.filteredItems = _.filter(this.items, function (v, k) { return !v.selected && v.name.toLowerCase().indexOf(searchText.toLowerCase()) > -1; }); } this.filteredItems.forEach(function (v, k) { v.key = k + 1; }); this.buildPagination(); if (_.isUndefined(currentPage)) { this.selectPage(1); } else { this.selectPage(currentPage); } }, buildPagination: function buildPagination() { var numberOfPage = Math.ceil(this.filteredItems.length / this.pagination.itemPerPage); this.pagination.items = []; for (var i = 0; i < numberOfPage; i++) { this.pagination.items.push(i + 1); } }, selectPage: function selectPage(item) { var _this = this; this.pagination.currentPage = item; var start = 0; var end = 0; if (this.pagination.currentPage < this.pagination.range - 2) { start = 1; end = start + this.pagination.range - 1; } else if (this.pagination.currentPage <= this.pagination.items.length && this.pagination.currentPage > this.pagination.items.length - this.pagination.range + 2) { start = this.pagination.items.length - this.pagination.range + 1; end = this.pagination.items.length; } else { start = this.pagination.currentPage - 2; end = this.pagination.currentPage + 2; } if (start < 1) { start = 1; } if (end > this.pagination.items.length) { end = this.pagination.items.length; } this.pagination.filteredItems = []; for (var i = start; i <= end; i++) { this.pagination.filteredItems.push(i); } this.paginatedItems = this.filteredItems.filter(function (v, k) { return Math.ceil((k + 1) / _this.pagination.itemPerPage) == _this.pagination.currentPage; }); }, selectItem: function selectItem(item) { item.selected = true; this.selectedItems.push(item); this.searchInTheList(this.searchItem, this.pagination.currentPage); }, removeSelectedItem: function removeSelectedItem(item) { item.selected = false; this.selectedItems.$remove(item); this.searchInTheList(this.searchItem, this.pagination.currentPage); } }
});
Developer | Dzulfikar Adi Putra |
Username | superpikar |
Uploaded | September 06, 2022 |
Rating | 3.5 |
Size | 4,859 Kb |
Views | 46,552 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
SVG Animation Follow Path - d3js | 3,068 Kb |
Ionic Alphabetical List | 3,136 Kb |
Image Map | 4,096 Kb |
Ionic - Wordpress REST API starter | 2,961 Kb |
Expand and collapse element using jquery expander | 1,854 Kb |
D3js animation along path | 3,128 Kb |
Centering Image and Icon in Semantic-UI card | 2,546 Kb |
A Pen by Dzulfikar Adi Putra | 8,016 Kb |
JS Tree Example JSON Data | 2,435 Kb |
Play and Pause Bootstrap 3 Button | 2,255 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Flower expansion | Sreucherand | 3,425 Kb |
Drag and Drop Quiz | Cgspicer | 3,837 Kb |
Basic jQuery Filter list | Mtedwards | 2,464 Kb |
Starting out with Ember.JS | Cfleschhut | 4,808 Kb |
Lazy Load for Background Images | The_ruther4d | 2,977 Kb |
Dice | Fraina | 5,026 Kb |
Sitemap generator for Sharepoint | Gyusza | 2,518 Kb |
Bootstrap 3 Price Table | Honglio | 2,655 Kb |
Fluid Layout with Float | Jxqr97 | 1,785 Kb |
Clock with full screen background | Owebboy | 2,415 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!