Monday, September 30, 2019

JavaScript Data Table Search.


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);
},


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)
            });
        });
    });
  },
}


created(){

_this.datatables();

}

No comments:

Post a Comment

Ajax load lage with laravel.

 step-1:  HTML <div class="row">                     <div class="col-lg-12">                           <d...