✔ Laravel 5.7 Tutorial : Datatables Api With Example In Laravel 5.7

Laravel 5.7 Tutorial - How to use Datatables API in laravel 5.7? here i'll show you how to implementation Datatables using an Plugin yajra datatables. DataTables Ajax with yajra datatables package can display, shorting, searching data from database quickly.

Video Tutorial How to Use DataTable API in Laravel

Full Source code DataTables Project

First, we need to install Laravel Datatables Package

Install Laravel Datatables Package

  composer require yajra/laravel-datatables-oracle 

Next, Add Datatables Service Provider and Facade into config/app.php

 ... Yajra\Datatables\DatatablesServiceProvider::class, ... 

and

 ... 'Datatables' => Yajra\Datatables\Facades\Datatables::class, ... 

Next, publish the configuration file.

 php artisan vendor:publish

Controller

// use datatables use Yajra\Datatables\Datatables;

Method in Controller

  // show datatables page   public function datatables(){     return view('admin/posts/datatables');   }    // show all posts data   public function postsdata(){     return Datatables::of(\App\Posts::all())->make(true);   }

Routes

  // datatables route   Route::get('admin/posts/datatables', 'Auth\PostsController@datatables');   Route::get('admin/posts/postsdata', 'Auth\PostsController@postsdata');

Views

@extends('layouts.dashbord') @section('content')   <h2 class="sub-header">Simple DataTables in laravel 5.3</h2>   <div class="row">     <div class="col-md-9">       <a href="{{ url('admin/posts/new-post')}}" class="btn btn-primary btn-sm">Add New Post</a>     </div> <br>   </div>   <div class="table-responsive">     <table class="table table-striped" id="allposts">       <thead>       <tr>         <th>Id</th>         <th>Title</th>         <th>Description</th>         <th>Created</th>       </tr>     </thead>     <tbody>     </tbody>     </table>   </div> @stop  @push('scripts') <script type="text/j4vascript">   $(function(){     $('#allposts').DataTable({       processing: true,       serverSide: true,       ajax: '{!! URL::asset('admin/posts/postsdata') !!}',       columns : [         { data: 'id', name: 'id' },         { data: 'title', name: 'title' },         { data: 'description', name: 'description' },         { data: 'updated_at', name: 'updated_at' }       ]     });   }); </script> @endpush

Master Blade Template

<!-- jQuery --> <script src="//code.jquery.com/jquery.js"></script> <!-- DataTables --> <script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>  @stack('scripts') 

Follow our social media and see you next lessons. ..

Sumber http://scqq.blogspot.com

Share this post

Berlangganan update artikel terbaru via email: