Jquery php/laravel datatable

Jquery php/laravel datatable

If you have hundreds of thousands of records or even millions of records you don’t want to load it at once to your HTML as we do in our previous example because it could slow your server performance. But using ajax you don’t need to load all the records to your Datatable because it is paginated and you only show what we need.

cmd:

composer require yajra/laravel-datatables-oracle
OR
composer require yajra/laravel-datatables-oracle:"^10.0"
config/app.php

'providers' => [
....
....
Yajra\DataTables\DataTablesServiceProvider::class,
]
'aliases' => [
....
....
'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]
php artisan vendor:publish --
provider="Yajra\DataTables\DataTablesServiceProvider"
controller.php

public function index()
{
if(\request()->ajax()){
$data = Product::latest()->get();
return DataTables::of($data)
->addIndexColumn()
->addColumn('action', function($row){
$actionBtn = '<a href="javascript:void(0)" class="edit btn btn-success btn-sm">Edit</a> <a href="javascript:void(0)" class="delete btn btn-danger btn-sm">Delete</a>';
return $actionBtn;
})
->rawColumns(['action'])
->make(true);
}
return view('products.index');
}
<!DOCTYPE html>
<html>
<head>
    <title>Laravel Datatables Tutorial</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"/>
    <link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet">
</head>
<body>
    
<div class="container mt-5">
    <h2 class="mb-4">Laravel Yajra Datatables Example</h2>
    <table id="myTable" class="table table-bordered">
        <thead>
            <tr>
                <th>No</th>
                <th>Kode Barang</th>
                <th>Nama Barang</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
   
</body>
<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.21/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript">
    $(function () {
          var table = $('#myTable').DataTable({
              processing: true,
              serverSide: true,
              ajax: "{{ route('products.index') }}",
              columns: [
                  {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                  {data: 'product_code', name: 'product_code'},
                  {data: 'product_name', name: 'product_name'},
              ]
          });        });
</script>
</html>

OR

cdn

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"/>
<link href="https://cdn.datatables.net/2.0.1/css/dataTables.dataTables.min.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> 
<script src="https://cdn.datatables.net/2.0.1/js/dataTables.min.js"></script>


web.php

Route::view('/datatable', 'users.index');
Route::get('/datatable/get', [Crudcontroller::class, 'datatable'])->name('datatable');

controller

function datatable(Request $request){
  $data = DB::table('users')->get();
  return view('users.index')->withData ( $data );
}


view

<div class="container mt-5">
<h2 class="mb-4">Laravel Datatables Example</h2>
<table id="myTable" class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
</thead>

</table>
</div>

<script type="text/javascript">

$(document).ready(function(){
$('#myTable').DataTable({
processing: true,
serverSide: true,
ajax: "{{route('datatable')}}",
columns: [
{ data: 'name', name: 'name' },
{ data: 'email', name: 'email' },
]
});
});

</script>
</html>


controller

function datatable(Request $request){
return Datatables::of(DB::table('users')->get())->make(true);
}


 








	Tags: , , , , , , , , , , , , , , , , , , , 




	

	







	
	
		

		
Leave a Reply