Come implementare Datatables con Vuejs e Laravel

Blog

Come implementare Datatables con Vuejs e Laravel

In questo tutorial, voglio condividere con te come implementare i datatable con vue js laravel. condividerò un semplice esempio di vue datatable nell'applicazione laravel 5.8 utilizzando vuejs-datatable npm. useremo il componente vuejs-datatable per vue datatables nell'app laravel.



cos'è il blocco display?

Datatable è la libreria più popolare in Javascript. Tabella dati fornire ricerca, ordinamento, impaginazione ecc. con un layout intuitivo. quindi vuoi anche implementare i datatable con l'app vuejs laravel, questo esempio ti aiuterà.

In questo esempio, creeremo la tabella degli utenti con l'aggiunta di alcuni record fittizi, quindi creeremo un percorso per ottenere tutti gli utenti. in vuejs codice installeremo il pacchetto vuejs-datatable e utilizzando axios get request per ottenere tutti gli utenti. Usando vuejs-datatable mostreremo in table.



Creeremo passo dopo passo l'implementazione di visto datatable utilizzando il pacchetto npm vuejs-datatable con laravel . puoi vedere la seguente schermata. Puoi anche scaricare il codice e controllare anche la demo.

Anteprima:



Passaggio 1: installa l'app Laravel Fresh

Ecco, saremo freschi Laravel 5.8 applicazione utilizzando il comando muggito, quindi apri il tuo terminale O il prompt dei comandi ed esegui il comando muggito:

composer create-project --prefer-dist laravel/laravel blog

Passaggio 2: crea percorso

In questo passaggio, creeremo un percorso get e restituiremo tutti i dati degli utenti. Quindi, aggiungiamo un nuovo percorso su quel file.

route/web.php

Route::get('users','UserController@index');

Passaggio 3: crea un nuovo controller

in questo passaggio, ora abbiamo creato UserController con il metodo index, in questo metodo restituiremo tutti i dati degli utenti. Quindi creiamo il controller:

app/Http/Controllers/UserController.php

json(User::get()); } }

Passaggio 4: configurazione e installazione di NPM vuejs-datatable

In questo passaggio, dobbiamo prima aggiungere l'installazione di vue js e quindi installare npm, quindi eseguiamo il comando qui sotto nel tuo progetto.

Vista installazione:

come acquistare criptovaluta di cera
php artisan preset vue

Installa npm:

npm install

Installa vuejs-datatable:

npm install vuejs-datatable

Passaggio 5: aggiornamento dei componenti

Qui, scriveremo il codice sui componenti, quindi aggiorniamo il file e inseriamo il codice seguente:

resource/assets/js/components/ExampleComponent.vue

Laravel Vue Datatables Component Example - ItSolutionStuff.com import DatatableFactory from 'vuejs-datatable'; export default { components: { DatatableFactory }, mounted() { console.log('Component mounted.') }, data(){ return { columns: [ {label: 'id', field: 'id'}, {label: 'Name', field: 'name'}, {label: 'Email', field: 'email'} ], rows: [], page: 1, per_page: 10, } }, methods:{ getUsers: function() { axios.get('/users').then(function(response){ this.rows = response.data; }.bind(this)); } }, created: function(){ this.getUsers() } }

Passaggio 6: aggiorna welcome.blade.php

All'ultimo passaggio, aggiorneremo il nostro file welcome.blade.php. in questo file useremo il file app.js e lo useremo, quindi aggiorniamo.

risorse/viste/benvenuto.blade.php

Laravel Vue Datatables Component Example - ItSolutionStuff.com

Ora devi eseguire il comando seguente per aggiornare il file app.js:

npm run dev

Ora puoi controllare il nostro esempio e anche controllare la demo e scaricare il codice gratuito.

Abbiamo usato il pacchetto npm vuejs-datatable, puoi ottenere maggiori informazioni da qui: vuejs-datatable .

Puoi scaricare il codice da git qui

#database #laravel #vue #vuejs

kishu inu come acquistare