Step#01:
<template>
<div class="row">
<div class="item-show-limit col-md-8"><span>Show</span>
<select name="per_page" class="per_page" @change="changePerPage" v-model="perPage">
<option value="10">10</option>
<option value="20">20</option><option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</select>
<span>Entries</span>
</div> <div class="col-md-4">
<div class="m-input-icon m-input-icon--left">
<input type="text" class="form-control m-input" placeholder="Search..." id="inputSearch"><span class="m-input-icon__icon m-input-icon__icon--left"><span><i class="la la-search"></i></span> </span>
</div>
</div>
</div>
</template>
Step#02:
methods: {
changePerPage(){
var vm = this;
vm.index(1,vm.perPage);
},
var vm = this;
vm.index(1,vm.perPage);
},
datatables(){
$(document).ready(function () {
$("#inputSearch").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#dataTable tr").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
},
$(document).ready(function () {
$("#inputSearch").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#dataTable tr").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
},
}
created(){
_this.datatables();
}
No comments:
Post a Comment