Laravel vuejs table pagination CRUD Package

vuejs-laravel-table-paginate-crud

This CRUD Vue.js package offers an easy displaying Bootstrap/Laravel table tool. This package also allows pagination and sorting with an easy configuration.

Dependencies

• Laravel >=5.8. Required.
• Vue.js. Required.
• Bootstrap (CSS). Required.
• Vue-js-modal. Required. (https://www.npmjs.com/package/vue-js-modal)
• Vue-js Dialog. Required. (https://www.npmjs.com/package/vuejs-dialog)
• Fontawesome. Optional. (https://fontawesome.com/)

Installing

Install with npm:

npm i vuejs-laravel-table-pagination-crud

Import globally in app.js:

/*
 * Import vuejs dialog (confirm, prompt...)
 */
import VuejsDialog from 'vuejs-dialog';
import VuejsDialogMixin from 'vuejs-dialog/dist/vuejs-dialog-mixin.min.js'; // only needed in custom components
import 'vuejs-dialog/dist/vuejs-dialog.min.css';
window.Vue.use(VuejsDialog);

/*
 * Import vuejs modal
 */
import VModal from 'vue-js-modal';
window.Vue.use(VModal);

/*
 * Import vuejs-laravel-table-pagination-crud
 */
import PaginationVue from 'vuejs-laravel-table-pagination-crud/src/PaginationVue.vue';
import CustomButtonVue from 'vuejs-laravel-table-pagination-crud/src/CustomButtonVue.vue';
import ModalVue from 'vuejs-laravel-table-pagination-crud/src/ModalVue.vue';
import FilterVue from 'vuejs-laravel-table-pagination-crud/src/FilterVue.vue';

Vue.component('pagination-vue', PaginationVue);
Vue.component('custom-button-vue', CustomButtonVue);
Vue.component('modal-vue', ModalVue);
Vue.component('filter-vue', FilterVue);

Example Usage

<template>
    <pagination-vue v-if="load_data"  
    v-bind:columns="columns" 
    v-bind:results="results" 
    v-bind:numberPerPage="number_per_page" 
    v-bind:createButton="create_button"
    v-bind:filters="filters"
    ></pagination-vue>

    <div v-else class="text-center">
        <i class="fas fa-circle-notch fa-spin"></i> Loading...
    </div>
</template>

<script>
    export default {
        data: function(){
        	return {
                load_data: false,
        		columns: [],
	            data: [],
	            results: [],
                number_per_page: [],
                filters: [],
        	}
        },
        method: {

        },
        mounted: function() {
            const self = this;
            axios.get('your url')
            .then(function (resp) {

                // Get result of request
                self.results = [{
                    'id': 1,
                    'name': 'Vader',
                    'firstname': 'Darth',
                    'age': '55',
                    'planete': 'Mustafar'
                },{
                    'id': 2,
                    'name' : 'Kenobi',
                    'firstname': 'Obi Wan',
                    'age': '60',
                    'planete': 'Tatoine'
                },{
                    'id': 3,
                    'name' : 'Bings',
                    'firstname': 'Jar Jar',
                    'age': '120',
                    'planete': 'Naboo'
                }];

                // Filters
                let planetes = ['Mustafar', 'Tatoine', 'Naboo'];
                self.filters = [
                {
                    data: planetes,
                    name: 'planete', // name of key in results
                    type: 'select', // (select or searchBar)
                },
                {
                    data: '',
                    name: '',
                    type: 'searchBar', // If searchBar, no data/name
                },
                ]

                // Number per page
                self.number_per_page = [10,20,50];

                self.create_button = {
                    button: true,
                    href: false,
                    text: 'Add User',
                    class_button: 'btn btn-primary text-white',
                    action: 'modal',
                    url: base_url + 'users',
                    icon: 'fas fa-plus-circle',
                    modal: {
                        modal: true,
                        name: 'create_modal',
                        modal_title: 'Add User',
                        action: 'create',
                        url: base_url + '/users',
                        method: 'POST',
                        modal_inputs: [{
                            type: 'text',
                            label: 'Name',
                            name: 'name',
                            id: 'name',
                            required: true,
                        }]
                    },

                }

                self.columns = [
                    {
                        title: 'Name',
                        key: 'name',
                        style: false,
                        class: false,
                    },
                    {
                        title: 'Edit',
                        key: false,
                        button: true,
                        href: true,
                        text: false,
                        class_button: 'btn btn-primary',
                        action: 'edit',
                        url: base_url + '/users',
                        modal: {
                            modal: true,
                            name: 'edit_modal',
                            modal_title: 'Edit',
                            action: 'edit',
                            url: base_url + '/users',
                            method: 'PUT',
                            modal_inputs: [{
                                type: 'text',
                                label: 'Name',
                                name: 'name',
                                id: 'name',
                                required: true,
                            },{
                                type: 'text',
                                label: 'First Name',
                                name: 'firstname',
                                id: 'firstname',
                                required: true,
                            }, {
                                type: 'text',
                                label: 'Age',
                                name: 'age',
                                id: 'age',
                                required: true,
                            }]
                        },
                        icon: 'fas fa-edit',
                        style: 'width:10%',
                        class: 'text-center',
                    },
                    {
                        title: 'Delete',
                        key: false,
                        button: true,
                        href: false,
                        text: false,
                        class_button: 'btn btn-danger',
                        action: 'destroy',
                        modal: {
                            modal: false,
                            name: false,
                        },
                        url: base_url + '/users',
                        icon: 'fas fa-trash-alt',
                        style: 'width:10%',
                        class: 'text-center',
                        alert: 'Are you sure ?',
                    },
                ];

                self.results = resp.data['users'];
                self.load_data = true;
            })
            .catch(function (resp) {
                alert("Error");
            });
        },
    };
</script>

Configuration

Note

In the head of app :

<meta name="csrf-token" content="{{ csrf_token() }}"> 

(optional)

<script type="text/javascript">
    var base_url = "{!! url('/') !!}";
</script> 

Results

self.results = resp.data[‘your_data’];

Number Per Page

Number of element displaying

self.number_per_page = [10,20,50];

Columns

self.columns = [
    {
        title: 'Name', // Name of column
        key: 'name', // name of column in yout database
        style: false, // add custom css
        class: false, // add boostrap class
    },
    {
        title: 'Age',
        key: 'age',
        style: false,
        class: false,
    },
    // Add button
    {
        title: 'Edit',  // Name of column
        key: false, // (true, false) - false if the column don't exist in your Database
        button: true, // Default : false - (true or false) for displaying button
        href: true, // Default : false - (true or false) True if <a href="">
        text: false,  // Default : false - (string) Text of button 
        class_button: 'btn btn-primary', // Default : false - (string) bootstrap class button
        action: 'edit', // (create, edit, destroy) - Laravel CRUD action
        url: base_url + '/users', // Default : false - url which will be generated
        icon: 'fas fa-edit', // Default : false - Class of fontawesome icon
        style: 'width:10%', // Custom css style
        class: 'text-center', // Boostrap class

        // if you want modal
        modal: {
            modal: true,// Default : false - (true or false) for displaying modal
            name: 'edit_modal', // Default : false - name of modal
            modal_title: 'Edit', // Default : false - modal title
            action: 'edit', // (create, edit) - Laravel CRUD action
            url: base_url + '/users', // Default : false - url which will be generated
            method: 'POST', // Default : false - form method

            // You can add inputs for forms generation
            modal_inputs: [{
                type: 'text',
                label: 'Name',
                name: 'name',
                id: 'name',
                required: true,
            }]
        },

    },
    {
        title: 'Delete',
        key: false,
        button: true,
        href: false,
        text: false,
        class_button: 'btn btn-danger',
        action: 'destroy',
        modal: {
            modal: false,
            name: false,
        },
        url: base_url + '/users',
        icon: 'fas fa-trash-alt',
        style: 'width:10%',
        class: 'text-center',
        alert: 'Are you sure ?', //Default: false - (false, string) You can add custom confirm alert
    },
];

Create Button

If you want a create button, just declare self.create_button in mounted() function :

self.create_button = {
    button: true, // Default : false - (true or false) for displaying button
    href: false, // Default : false - (true or false) True if <a href="">
    text: 'Add Users',  // Default : false - (string) Text of button 
    class_button: 'btn btn-primary text-white', // Default : false - (string) bootstrap class button
    action: 'modal', // Default : false - (create, edit, destroy, url, modal)

    // Declare the type of CRUD action, url or modal if you wants that appear in a modal window
    url: base_url + 'users', // Default : false - url which will be generated
    icon: 'fas fa-plus-circle', // Default : false - Class of fontawesome icon

    // if you want modal
    modal: {
        modal: true, // Default : false - (true or false) for displaying modal
        name: 'create_modal', // Default : false - name of modal
        modal_title: 'Add users', // Default : false - modal title
        action: 'create', // (create, edit) - Laravel CRUD action
        url: base_url + '/users', // Default : false - url which will be generated
        method: 'POST', // Default : false - form method

        // You can add inputs for forms generation
        modal_inputs: [{
            type: 'text', // (string) - Type of input
            label: 'Name', // (string) - Label of input
            name: 'name', // (string) - Name of input
            id: 'name', // (string) - Id of input
            required: true, // Default : false - if input must be required
        }]
    },
}

Download Details:

Author: nahmey

Source Code: https://github.com/nahmey/vuejs-laravel-table-paginate-crud

#vuejs #vue #javascript #laravel

What is GEEK

Buddha Community

Pagination Example In Laravel

In this post I will show you pagination example in laravel, as we all know pagination is very common feature in all websites, if we want to display specific number of details or images then we can use pagination.

aravel provide paginate method and it will automatically takes care of setting the proper limit and offset based on the current page being viewed by the user.here i will show you how to use pagination in laravel, So I have try paginate method in laravel.

Pagination Example In Laravel

https://websolutionstuff.com/post/pagination-example-in-laravel

#pagination example in laravel #laravel #pagination #paginate method #how to use pagination in laravel #pagination in laravel

Laravel AJAX CRUD Example Tutorial

Hello Guys,

Today I will show you how to create laravel AJAX CRUD example tutorial. In this tutorial we are implements ajax crud operation in laravel. Also perform insert, update, delete operation using ajax in laravel 6 and also you can use this ajax crud operation in laravel 6, laravel 7. In ajax crud operation we display records in datatable.

Read More : Laravel AJAX CRUD Example Tutorial

https://www.techsolutionstuff.com/post/laravel-ajax-crud-example-tutorial

---

Read Also : Read Also : Laravel 6 CRUD Tutorial with Example

https://techsolutionstuff.com/post/laravel-6-crud-tutorial-with-example

#laravel ajax crud example tutorial #ajax crud example in laravel #laravel crud example #laravel crud example with ajax #laravel #php

How to alter tables in production when records are in millions

As a developer, I have experienced changes in app when it is in production and the records have grown up to millions. In this specific case if you want to alter a column using simple migrations that will not work because of the following reasons:

It is not so easy if your production servers are under heavy load and the database tables have 100 million rows. Because such a migration will run for some seconds or even minutes and the database table can be locked for this time period – a no-go on a zero-downtime environment.

In this specific case you can use MySQL’s algorithms: Online DDL operations. That’s how you can do it in Laravel.

First of all create migration. For example I want to modify a column’s name the traditional migration will be:

Schema::table('users', function (Blueprint $table) {
            $table->renameColumn('name', 'first_name');
        });

Run the following command php artisan migrate –pretend this command will not run the migration rather it will print out it’s raw sql:

ALTER TABLE users CHANGE name first_name VARCHAR(191) NOT NULL

Copy that raw sql, remove following code:

Schema::table('users', function (Blueprint $table) {
            $table->renameColumn('name', 'first_name');
        });

Replace it with following in migrations up method:

\DB::statement('ALTER TABLE users CHANGE name first_name VARCHAR(191) NOT NULL');

Add desired algorithm, in my case query will look like this:

\DB::statement('ALTER TABLE users CHANGE name first_name VARCHAR(191) NOT NULL, ALGORITHM=INPLACE, LOCK=NONE;');

#laravel #mysql #php #alter heavy tables in production laravel #alter table in production laravel #alter tables with million of records in laravel #how to alter heavy table in production laravel #how to alter table in production larave #mysql online ddl operations

Laravel 8 CRUD Operation Example

Hello Friend,

As you know Laravel 8 already officially released and today I will show you how to create CRUD operation in laravel 8, I have already perform many CRUD operations in my previous post like CRUD operation in ajax, CRUD operation in laravel 6 etc. So, today I will give you laravel 8 CRUD application example.

Laravel 8 CRUD Operation Example

https://websolutionstuff.com/post/laravel-8-crud-operation-example

#laravel #php #laravel 8 crud operation example #crud operation #laravel 8 crud tutorial #crud operation in laravel 8

Php how to delete multiple rows through checkbox using ajax in laravel

First thing, we will need a table and i am creating products table for this example. So run the following query to create table.

CREATE TABLE `products` (
 `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
 `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
 `description` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
 `created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
 `updated_at` datetime DEFAULT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

Next, we will need to insert some dummy records in this table that will be deleted.

INSERT INTO `products` (`name`, `description`) VALUES

('Test product 1', 'Product description example1'),

('Test product 2', 'Product description example2'),

('Test product 3', 'Product description example3'),

('Test product 4', 'Product description example4'),

('Test product 5', 'Product description example5');

Now we are redy to create a model corresponding to this products table. Here we will create Product model. So let’s create a model file Product.php file under app directory and put the code below.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    protected $fillable = [
        'name','description'
    ];
}

Step 2: Create Route

Now, in this second step we will create some routes to handle the request for this example. So opeen routes/web.php file and copy the routes as given below.

routes/web.php

Route::get('product', 'ProductController@index');
Route::delete('product/{id}', ['as'=>'product.destroy','uses'=>'ProductController@destroy']);
Route::delete('delete-multiple-product', ['as'=>'product.multiple-delete','uses'=>'ProductController@deleteMultiple']);

#laravel #delete multiple rows in laravel using ajax #laravel ajax delete #laravel ajax multiple checkbox delete #laravel delete multiple rows #laravel delete records using ajax #laravel multiple checkbox delete rows #laravel multiple delete