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();

}

How to use components in v-html in laravel & vue js.

Example:-


Ex:#1
<span v-html="value.qty"></span>

Ex:#2
v-html=" country.name +' ('+ country.calling_code +')' "

Laravel Simple CRUD with best Example.

Route:-

Route::resource('user','User\UserController',['parameters'=> ['user'=>'id']]);


UserController:-

------------------------------Index---------------------------------------------------------------------------
public function index()
    {
        return view('backend.user.manage_user');
    }

-----------------------------Insert--------------------------------------------------------------------------
public function store(Request $request)
    {
        $input                           = $request->all();
        $input['password']       = Hash::make($input['password']);
        $input['created_by']    = Auth::user()->id;
        $input['modified_by'] = Auth::user()->id;
        $imageData                =$request->file('photo');

        if($imageData){

            $fileName = md5(str_random(30).time().'_'.$request->file('photo')).'.'.$request->file('photo')->getClientOriginalExtension();
            $request->file('photo')->move('uploads/userPhoto/',$fileName);
            $FilePath= url('/'). "/uploads/userPhoto/".$fileName;
            $input['photo'] = $FilePath;
        }

        try {
            User::create($input);
            $bug = 0;
        } catch (\Exception $e) {
            $bug = $e->errorInfo[1];
        }
        if ($bug == 0) {
            return redirect('user')->with('successMsg', 'User Inserted Successfully.');
        }elseif ($bug == 1062) {
            return redirect('user')->with('errorMsg', 'User is Found Duplicate');
        }
        else {
            return redirect()->back()->with('errorMsg', 'Something Error Found !, Please try again.');
        }
    }

-----------------------------Edit-----------------------------------------------------------------------------
public function edit($id)
    {
        $editModeData = User::FindOrFail($id);
        $roleList = $this->commonRepositories->selectRoleList();
        return view('backend.user.add_user',compact('editModeData','roleList'));
    }

----------------------------Update--------------------------------------------------------------------------
public function update(Request $request, $id)
    {
        $data = User::findOrFail($id);

        $input                           = $request->all();
        $image                         =$request->file('photo');
        $input['created_by']     = Auth::user()->id;
        $input['modified_by']  = Auth::user()->id;


        if($image){
            $imgName= md5(str_random(30).time().'_'.$request->file('photo')).'.'.$request->file('photo')->getClientOriginalExtension();

            $request->file('photo')->move('uploads/userPhoto/',$imgName);
            if(file_exists('uploads/userPhoto/'.$data->photo) AND !empty($data->photo)){
                unlink('uploads/userPhoto/'.$data->photo);
            }
            $FilePath = url('/'). "/uploads/userPhoto/".$imgName;
            $input['photo']= $FilePath;
        }

        if(isset($request->password)){
            $input['password'] = Hash::make($input['password']);
        }

        try {
            $data->update($input);
            $bug = 0;
        } catch (\Exception $e) {
            $bug = $e->errorInfo[1];
        }
        if ($bug == 0) {
            return redirect('user')->with('successMsg', 'User Updated Successfully.');
        }elseif ($bug == 1062) {
            return redirect('user')->with('errorMsg', 'User is Found Duplicate');
        }
        else {
            return redirect()->back()->with('errorMsg', 'Something Error Found !, Please try again.');
        }
    }


-------------------------Delete-------------------------------------------------------------------------------
public function destroy($id)
    {
        $data = User::FindOrFail($id);
        if(file_exists('uploads/userPhoto/'.$data->photo) AND !empty($data->photo)){
            unlink('uploads/userPhoto/'.$data->photo);
        }

        try{

            $data->delete();
            $bug = 0;
        }
        catch(\Exception $e){
            $bug = $e->errorInfo[1];
        }

        if($bug==0){
            echo "success";
        }else{
            echo 'error';
        }
    }