Create Datatable in Laravel
Step 1:- Install Yajra Datatable Package
You can install Yajra Datatable package by following command.
composer require yajra/laravel-datatables-oracle
Step 2:- Add Alias and provider to the app.php
config/app.php
'providers' => [
Yajra\DataTables\DataTablesServiceProvider::class,
]
'aliases' => [
'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]
Step 3:- Define Route
In this we define routes to for view file and getting data and for doing this we need to go web.php
routes\web.php
Route::get('products', ['uses'=>'ProductController@alldata', 'as'=>'products.alldata']);
or
Route::get('products', 'ProductController@alldata')->name('products.alldata');
Step 4:- Define Controller
In this step we create a controller as ProductController to display layout, handel request and send responce to view page.
app/http/controllers/ProductController.php
<?php
namespace App\Http\Controllers;
use App\Product;
use Illuminate\Http\Request;
use DataTables;
class ProductController extends Controller
{
public function alldata(Request $request)
{
if ($request->ajax()) {
$data = Product::latest()->get();
return Datatables::of($data)
->addIndexColumn()
->addColumn('action', function($row){
$btn = '<a href="javascript:void(0)" class="edit btn btn-primary btn-sm">View</a>';
return $btn;
})
->rawColumns(['action'])
->make(true);
}
return view('alldata');
}
}
Step 5:- Define View
In this final step create alldata view template as alldata.blade.php in
resources/views/alldata.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Product List</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
<div class="container">
<h1>Product List</h1>
<table class="table table-bordered data-table">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th width="100px">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
<script type="text/javascript">
$(function () {
var table = $('.data-table').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('products.alldata') }}",
columns: [
{data: 'DT_RowIndex', name: 'DT_RowIndex'},
{data: 'name', name: 'name'},
{data: 'action', name: 'action', orderable: false, searchable: false},
]
});
});
</script>
</html>
You can see your output
Comments
Post a Comment