Vuejs and Laravel insert update delete with Pagination Component

Vuejs and Laravel insert update delete with Pagination Component

In this Post We Will Explain About is Vuejs and Laravel insert update delete with Pagination Component With Example and Demo.

Welcome on infinityknow.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Laravel 5 Ajax CRUD with Pagination example and demo from scratch

In this post we will show you Best way to implement Laravel Jquery Ajax Pagination Example From Scratch, hear for How to Laravel 5 and Vue JS CRUD with Pagination example and demo from scratch with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Step 1: Laravel Installation

[php]
composer create-project –prefer-dist laravel/laravel live24u
[/php]

Step 2: Create products table and model

[php]
php artisan make:migration create_products_table
[/php]

After this simple command we will find more or one file in following simple laravel path Like as a database/migrations and we have to simple put bellow source code in your created migration file for new create products table.

[php]
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateItemsTable extends Migration
{

public function up()
{
Schema::create(‘products’, function (Blueprint $table) {
$table->increments(‘id’);
$table->string(‘title’);
$table->text(‘comments’);
$table->timestamps();
});
}

public function down()
{
Schema::drop(“products”);
}
}
[/php]
app/product.php
[php]
namespace App;

use Illuminate\Database\Eloquent\Model;

class product extends Model
{

public $fillable = [‘title’,’comments’];

}
[/php]

Step 3: Add Route and Controller

app/Http/routes.php
[php]
Route::get(‘manage-vue’, ‘VueProductController@manageVue’);
Route::resource(‘vueproducts’,’VueProductController’);
[/php]

app/Http/Controllers/VueProductController.php

[php]
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\product;

class VueProductController extends Controller
{

public function manageVue()
{
return view(‘manage-vue’);
}

public function index(Request $request)
{
$products = product::latest()->paginate(5);

$results_data = [
‘custom_pagination’ => [
‘total’ => $products->total(),
‘rec_perpage’ => $products->perPage(),
‘this_page’ => $products->currentPage(),
‘last_cusom_page’ => $products->lastPage(),
‘from’ => $products->firstItem(),
‘to’ => $products->lastItem()
],
‘data’ => $products
];

return results_data()->json($results_data);
}

public function store(Request $request)
{
$this->validate($request, [
‘title’ => ‘required’,
‘comments’ => ‘required’,
]);

$create = product::create($request->all());

return results_data()->json($create);
}

public function update(Request $request, $id)
{
$this->validate($request, [
‘title’ => ‘required’,
‘comments’ => ‘required’,
]);

$edit = product::find($id)->update($request->all());

return results_data()->json($edit);
}

public function destroy($id)
{
product::find($id)->delete();
return results_data()->json([‘done’]);
}
}
[/php]

Step 4: Create Blade File

resources/views/manage-vue.blade.php
[php]

http://jquery.min.js
http://bootstrap.min.js
http://toastr.min.js

http://vue.min.js
http://vue-resource.min.js
/js/product.js

[/php]

Step 5: Create JS File

public/js/product.js
[php]
Vue.http.headers.common[‘X-CSRF-TOKEN’] = $(“#token”).attr(“value”);

new Vue({

el: ‘#manage-vue’,

data: {
products: [],
custom_pagination: {
total: 0,
rec_perpage: 2,
from: 1,
to: 0,
this_page: 1
},
offset: 4,
formErrors:{},
live_form_array:{},
cnewproducts : {‘title’:”,’comments’:”},
pro_item : {‘title’:”,’comments’:”,’id’:”}
},

computed: {
isActived: function () {
return this.custom_pagination.this_page;
},
pagesNumber: function () {
if (!this.custom_pagination.to) {
return [];
}
var from = this.custom_pagination.this_page – this.offset;
if (from = this.custom_pagination.last_cusom_page) {
to = this.custom_pagination.last_cusom_page;
}
var vue_pagesarr = [];
while (from {
this.$set(‘products’, results_data.data.data.data);
this.$set(‘custom_pagination’, results_data.data.custom_pagination);
});
},

createProduct: function(){
var input = this.cnewproducts;
this.$http.post(‘/vueproducts’,input).then((results_data) => {
this.changePage(this.custom_pagination.this_page);
this.cnewproducts = {‘title’:”,’comments’:”};
$(“#create-product”).modal(‘hide’);
toastr.success(‘product Created Successfully.’, ‘Success Alert’, {timeOut: 5000});
}, (results_data) => {
this.formErrors = results_data.data;
});
},

remove_item: function(product){
this.$http.delete(‘/vueproducts/’+product.id).then((results_data) => {
this.changePage(this.custom_pagination.this_page);
toastr.success(‘product Deleted Successfully.’, ‘Success Alert’, {timeOut: 5000});
});
},

live_edit: function(product){
this.pro_item.title = product.title;
this.pro_item.id = product.id;
this.pro_item.comments = product.comments;
$(“#edit-product”).modal(‘show’);
},

custm_liveupdate: function(id){
var input = this.pro_item;
this.$http.put(‘/vueproducts/’+id,input).then((results_data) => {
this.changePage(this.custom_pagination.this_page);
this.pro_item = {‘title’:”,’comments’:”,’id’:”};
$(“#edit-product”).modal(‘hide’);
toastr.success(‘product Updated Successfully.’, ‘Success Alert’, {timeOut: 5000});
}, (results_data) => {
this.live_form_array = results_data.data;
});
},

changePage: function (custom_page) {
this.custom_pagination.this_page = custom_page;
this.getVueProducts(custom_page);
}

}

});
[/php]

Example

I hope you have Got Laravel 5 and Vue JS CRUD with Pagination example and demo from scratch And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.