How to use Dynamic Datatable in laravel?

using the Datatables package by yajra with the javascript (jquery) ajax search method. Datatables also provide default server-side pagination

This package is created to handle server-side processing of DataTables jQuery Plugin via AJAX option by using Eloquent ORM, Fluent Query Builder or Collection.

Install Laravel datatables package

composer require yajra/laravel-datatables-oracle

Add Datatables Service Provider and Facade on config/app.php.

File name : app.php

'providers' => [
...
Yajra\Datatables\DatatablesServiceProvider::class,
]

'aliases' => [
...
'Datatables' => Yajra\Datatables\Facades\Datatables::class,
]

publish the config file.

php artisan vendor:publish --provider="Yajra\DataTables\DataTablesServiceProvider"

The above command will publish configuration file under config/datatables.php

view files

File name : master.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel DataTables Tutorial - Desertebs</title>


<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">

<style>
body {
padding-top: 40px;
}
</style>
</head>
<body>
<div class="container">
@yield('content')
</div>


<script src="//code.jquery.com/jquery.js"></script>

<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>

<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

@stack('scripts')
</body>
</html>

File name : index.php

php artisan make:controller admin/DatatablesController

File name : index.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Yajra\Datatables\Datatables;
use App\Category;

class DatatablesController extends Controller
{
public function index()
{
return view('index');
}

public function categoryData()
{
return Datatables::of(Category::query())->make(true);
}
}

File name : index.blade.php

@extends('layouts.master')

@section('content')
<table class="table table-bordered" id="category-table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Slug</th>
<th>Created At</th>
<th>Updated At</th>
</tr>
</thead>
</table>
@stop
@push('scripts')
<script>
$(function() {
$('#category-table').DataTable({
processing: true,
serverSide: true,
ajax: '{!! route('datatables.category') !!}',
columns: [
{ data: 'id', name: 'id' },
{ data: 'name', name: 'name' },
{ data: 'slug', name: 'slug' },
{ data: 'created_at', name: 'created_at' },
{ data: 'updated_at', name: 'updated_at' }
]
});
});
</script>
@endpush

Route

File name : web.php

Route::get('category', 'DatatablesController@index');
Route::get('get-category-data', 'DatatablesController@categoryData')->name('datatables.category');

Previous Next

Review & Rating

0.0 / 5

0 Review

(0)

Most Popular Tutorials

How to use Dynamic Datatable in laravel?

File name : app.php

File name : master.blade.php

File name : index.php

File name : index.php

File name : index.blade.php

File name : web.php

PHP

PHP OOPs

Codeigniter

Laravel

NODE.JS

Javascript

0.0 / 5

0 Review

Write Review Here

Most Popular Tutorials

Important Link