Step1:
Execute this command "composer require maatwebsite/excel"
Add Service Provider and Facade on config/app.php.
Maatwebsite\Excel\ExcelServiceProvider::class,
'Excel' => Maatwebsite\Excel\Facades\Excel::class,
execute this command :
php artisan vendor:publish --provider=Maatwebsite\Excel\ExcelServiceProvider
Step2:
Create a controller for DataTables application using Artisan.
php artisan make:controller DatatablesController
namespace App\Http\Controllers;
use App\Http\Requests;
use App\User;
use Yajra\Datatables\Datatables;
class DatatablesController extends Controller
{
public function getIndex()
{
return view('datatables.index');
}
public function anyData()
{
return Datatables::of(User::query())->make(true);
}
}
Step:3
Register export routes in app\Htpp\routes.php
Route::get('datatables/{type}', 'DatatablesController@export_users');
***********************************************************
Step:4
Create a view file and add the below code.
<!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</title>
<!-- Bootstrap CSS -->
<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">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
body {
padding-top: 40px;
}
</style>
<!-- jQuery -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- DataTables -->
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- App scripts -->
</head>
<body>
<div class="container">
<div class="pull-right"> <a class="btn btn-primary" href="{{ url('users/csv') }}">Export to Csv </a> </div>
<table class="table table-bordered" id="users-table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Created At</th>
<th>Updated At</th>
</tr>
</thead>
</table>
</div>
<script>
$(function() {
$('#users-table').DataTable({
processing: true,
serverSide: true,
ajax: "{!! route('datatables.data') !!}",
columns: [
{ data: 'id', name: 'id' },
{ data: 'name', name: 'name' },
{ data: 'email', name: 'email' },
{ data: 'created_at', name: 'created_at' },
{ data: 'updated_at', name: 'updated_at' }
]
});
});
</script>
</body>
</html>
Execute this command "composer require maatwebsite/excel"
Add Service Provider and Facade on config/app.php.
Maatwebsite\Excel\ExcelServiceProvider::class,
'Excel' => Maatwebsite\Excel\Facades\Excel::class,
execute this command :
php artisan vendor:publish --provider=Maatwebsite\Excel\ExcelServiceProvider
Step2:
Create a controller for DataTables application using Artisan.
php artisan make:controller DatatablesController
namespace App\Http\Controllers;
use App\Http\Requests;
use App\User;
use Yajra\Datatables\Datatables;
class DatatablesController extends Controller
{
public function getIndex()
{
return view('datatables.index');
}
public function anyData()
{
return Datatables::of(User::query())->make(true);
}
}
Step:3
Register export routes in app\Htpp\routes.php
Route::get('datatables/{type}', 'DatatablesController@export_users');
***********************************************************
Step:4
Create a view file and add the below code.
<!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</title>
<!-- Bootstrap CSS -->
<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">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
body {
padding-top: 40px;
}
</style>
<!-- jQuery -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- DataTables -->
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- App scripts -->
</head>
<body>
<div class="container">
<div class="pull-right"> <a class="btn btn-primary" href="{{ url('users/csv') }}">Export to Csv </a> </div>
<table class="table table-bordered" id="users-table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Created At</th>
<th>Updated At</th>
</tr>
</thead>
</table>
</div>
<script>
$(function() {
$('#users-table').DataTable({
processing: true,
serverSide: true,
ajax: "{!! route('datatables.data') !!}",
columns: [
{ data: 'id', name: 'id' },
{ data: 'name', name: 'name' },
{ data: 'email', name: 'email' },
{ data: 'created_at', name: 'created_at' },
{ data: 'updated_at', name: 'updated_at' }
]
});
});
</script>
</body>
</html>
No comments:
Post a Comment