Laravel - How to have two datatables in one blade view - laravel

I am a laravel beginner. I currently have a project in progressing which need to have two data tables in one page. In my past project, I only know how to make just a datatable to display ine one view page. For now, I need to have Branch Manager Table and Bus Driver Table to be displayed in one view page. For now I only know to display only one data table.
This is the view page
<table id="example1" class="table table-striped first" style="width:100%">
<thead>
<tr>
<th>Branch Manager Name</th>
<th>Contact Number</th>
<th class="col-md-2">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<table id="example2" class="table table-striped first" style="width:100%">
<thead>
<tr>
<th>Bus Driver Name</th>
<th>Contact Number</th>
<th class="col-md-2">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
This is the ajax for Branch Manager
<script type="text/javascript">
$(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var table = $('#example1').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('branchManager.list') }}",
columns: [{
data: 'branch_manager_name',
name: 'branch_manager_name'
},
{
data: 'contact_number',
name: 'contact_number'
},
{
data: 'action',
name: 'action',
orderable: true,
searchable: true
},
]
});
});
</script>
This is controller for Branch Manager
public function branchManager(Request $request)
{
$branchManagers = BranchManager::latest()->get();
if ($request->ajax()) {
$data = BranchManager::latest()->get();
return Datatables::of($data)
->addIndexColumn()
->addColumn('action', function($row){
$btn = 'Edit';
$btn = $btn.' <i class="far fa-trash-alt btn-outline-danger"></i>';
return $btn;
})
->rawColumns(['action'])
->make(true);
}
return view('admin.employee', compact('branchManagers'));
}
This is the route
Route::get('/employee', [BranchManagerController::class, 'branchManager'])->name('branchManager.list');
Can anyone explain to me how to make it. Like how many controllers do I need? Isit I need to create one more controller for Bus Driver ? Or two tables are just used in one controller? Besides, if it is needed to create one more controller, how the route would looks like? Thanks

Related

sweet alert destroy method returns null blank page with no request

i am using sweet alert method framework to show the alert when deleting but when i do this at destroy method return Request() or return $request it returns blank page with no requests or results i don't know why please help
here is my code
my route
Route::resource('brands',App\Http\Controllers\backend\brandController::class);
my table to view brands
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>brand name en</th>
<th>brand name ar</th>
<th>image</th>
<th>action</th>
</tr>
</thead>
<tbody>
#foreach ($brands as $brand)
<tr>
<td>{{$brand->brand_name_ar}}</td>
<td>{{$brand->brand_name_en}}</td>
<td>{{$brand->image}}</td>
<td>edit
<a href="{{route('brands.destroy',$brand->id)}}" id="delete"
class="btn btn-danger">delete</a>
</td>
</tr>
#endforeach
</tbody>
</table>
my sweet alert javascript code
<script>
$(document).ready(function(){
$(function (){
$(document).on('click','#delete',function(e){
e.preventDefault();
var link = $(this).attr('href');
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.isConfirmed) {
window.location.href = link
Swal.fire(
'Deleted!',
'Your file has been deleted.',
'success'
)
}
});
});
});
});
</script>
my destroy method
public function destroy($id,Request $request)
{
return Request();
$brand = Brand::find($id);
}

Can i store database tables to a data table?

i want to store my database table in a data table is that possible?
my controller
$tablemonth = \DB::select("SHOW TABLES WHERE Tables_in_database LIKE '%Month_Report_%'");
my blade without data table
<table id="listoftable" class="table table-bordered">
<thead class="thead-dark">
<tr>
<th>File Name</th>
</tr>
</thead>
<tbody>
#foreach($tablemonth as $table)
<tr>
<td>
{{$table->Tables_in_database}}
</td>
</tr>
#endforeach
</tbody>
</table>
Trying to achieve like this
<script>
$(function() {
var table = $('#listoftable').DataTable({
processing: false,
serverSide: true,
ajax: '{!! route('admin.get.table') !!}',
columns: [
{ data: {{tablemonth}}, name: {{$tablemonth}} },
]
});
});
</script>
Database table
I suggest looking into https://github.com/yajra/laravel-datatables, which allows to use the following result as input for the DataTables:
$data = \DB::select("SHOW TABLES WHERE Tables_in_database LIKE '%Month_Report_%'");
return Datatables::of($data)->addIndexColumn()->make(true);
Create a controller using the snippet above and consume it via the following DataTables initialization:
<script>
$(function() {
$('#listoftable').DataTable({
processing: true,
serverSide: true,
ajax: '{{ route('API-route-name') }}',
columns: [
{ data: 'Tables_in_database', name: 'Table name' }
]
});
});
</script>
See https://www.itsolutionstuff.com/post/laravel-58-datatables-tutorialexample.html for a tutorial.

How to showing data on table with datatables 'yajra'

I following this tutorial : How to route in Laravel DataTables
its so simple , but i cant do it . after i set my controller and my route and view , its not showing data and and table. in the table i have a button like'action' how i can take this comand to this button ?
can you check my faulth query
Route::get('user/show1', 'userController#show')->name('usershow1');
Route::get('user/show1-dt', 'userController#indexDataTables')->name('usershow1dt');
controller
public function show()
{
$pemeliharaan = Pemeliharaan::with(['user','alat'])->where('status','harian')->get();
return view('users.view_harian',['pemeliharaan' => $pemeliharaan]);
}
public function indexDataTables()
{
$pemeliharaan = Pemeliharaan::query();
// return DataTables::eloquent($pemeliharaan)->toJson();
return Datatables::of($pemeliharaan)->make(true);
}
and i have a view like this . the page number,search and pagination is showing at view ,but this data not showing. can you correctted this view ?
<div class="box-body table-responsive no-padding">
<table class="table table-hover" id="table">
<tbody><tr>
<th>No</th>
<th>Nama Alat</th>
<th>status</th>
<th>User Input</th>
<th>Action</th>
<th>Tanggal</th>
</tr>
{{-- #php ---> before i suing datatables my view like that
$no=0;
#endphp
#foreach ($pemeliharaan as $i)
<tr>
<td>{{ ++$no }} </td>
<td>{{ $i->alat->nama_alat}}</td>
<td>{{ $i->status}}</td>
<td>{{ $i->user->name}}</td>
<td> Lihat Data</span> </td>
<td>{{ $i->created_at}}</td>
</tr>
#endforeach --}}
</tbody></table>
</div>
.
.
#endsection
#push('scripts')
<script>
$(function() {
$('#table').DataTable({
processing: true,
serverSide: true,
ajax: '{!! route('usershow1dt') !!}',
columns: [
{ data: 'nama_alat', name: 'nama_alat'},
{ data: 'status', name: 'status'},
{ data: 'User Input', name: 'nama'},
{ data: 'Action', name: 'name'},//here my button
{ data: 'Tanggal', name: 'created_at'},
],
});
})
</script>
#endpush
Try This:
public function show() {
$pemeliharaan = Pemeliharaan::where('user','alat')->where('status','harian')->get();
return view('users.view_harian',['pemeliharaan' => $pemeliharaan]);
}

JSON showing instead of Datatable following Ajax call to Laravel Controller

I’m fairly new to ajax and json and would really appreciate some help.
I’m making an Ajax call to a Laravel Controller to return some fields from a database table called "subjects" and display them in a DataTable in a Laravel View. The problem is that when I open the view, what is see is JSON rather than the Datatable.
Here’s what’s returned in the view subjects/index:
{"draw":0,"recordsTotal":8,"recordsFiltered":8,"data":[{"id":"1","name":"Biology"},{"id":"3","name":"English Language"},{"id":"4","name":"Physics"},{"id":"5","name":"Chemistry"},{"id":"6","name":"Mathematics"},{"id":"7","name":"Mathematics"},{"id":"8","name":"English Language"},{"id":"9","name":"French"}],"queries":[{"query":"select count(*) as aggregate from (select '1' as `row_count` from `subjects`) count_row_table","bindings":[],"time":4.65},{"query":"select `id`, `name` from `subjects`","bindings":[],"time":0.41}],"input":[]}
Here’s the HTML in the view /subjects/index
<table id="subjects_table" class="table table-bordered" style="width:100%">
<thead>
<tr>
<th>Id</th>
<th>Subject</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Here’s the code in the Laravel Controller:
class SubjectsController extends Controller
{
public function index()
{
$subjects = Subject::select('id', 'name');
return Datatables::of($subjects)->make(true);
}
}
Here’s the code making the Ajax call:
$('#subjects_table').DataTable({
"processing": true,
"serverSide": true,
"ajax": "{{route('subjects.index')}}",
"columns":[
{"data": "id"},
{"data": "name"}
]
});
Here’s the route definition in web.php:
Route::get('subjects/', 'SubjectsController#index')->name('subjects.index');
Any help you can provide would be really appreciated
You should try this:
Routes
Route::get('subjects', 'SubjectsController#index')->name('subjects.index');
Route::get('getsubjects', 'SubjectsController#getSubjects')->name('subjects.get');
SubjectsController
class SubjectsController extends Controller
{
public function index()
{
return view('subjects.index');
$subjects = Subject::select('id', 'name');
return Datatables::of($subjects)->make(true);
}
public function getSubjects()
{
return \DataTables::of(Subject::query())->make(true);
}
}
View
<table id="subjects_table" class="table table-bordered" style="width:100%">
<thead>
<tr>
<th>Id</th>
<th>Subject</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#subjects_table').DataTable({
processing: true,
serverSide: true,
ajax: '{{ route('subjects.get') }}',
columns: [
{data: 'id', name: 'id'},
{data: 'name', name: 'name'},
{data: 'email', name: 'email'},
]
});
});
</script>

Bind Vue click function on dynamically created content from jquery

First of all I am new to vuejs., currently working on a project made using Laravel. I am using Vue where ever I feel the need for it. On a certain page I am using datatable to load list of machine requests
$list = LicenceRequests::orderBy('allocated')->with('users.userDetails')->where('users_id', '!=', 1)->get();
return Datatables::of($list)
->addColumn('actions', function ($list) {
return '<button data-id="'.$list->id.'" class="btn btn-success" #click="allocateEvent">Allocate</button>';
})
->addIndexColumn()
->rawColumns(['actions'])
->make(true);
I have added a click function so that When the datatable is rendered, a Vue function can be called. In the blade template, I am using the following html code :
<div id="content" class="content">
<div class="block">
<div class="block-content">
<table class="table table-bordered table-striped " id="requestList">
<thead>
<tr>
<th>Sr. No</th>
<th class="hidden-xs" >Name</th>
<th class="hidden-xs" >Email</th>
<th class="hidden-xs" >Requests</th>
<th class="hidden-xs" >Allocated</th>
<th class="hidden-xs" >Date requested</th>
<th class="hidden-xs" >Machine address</th>
<th class="text-center">Actions</th>
</tr>
</thead>
</table>
</div>
</div>
</div>?
For the datatable, I am calling it on the page load function as follows :
$(function (){
$('#requestList').dataTable({
processing: false,
serverSide: true,
ajax: '{!! route('admin.getLicenceRequests') !!}',
columns: [
{data: 'DT_Row_Index', orderable: false, searchable: false},
{ data: 'users.user_details.name', name: 'name' },
{ data: 'users.email', name: 'email' },
{ data: 'number', name: 'number' },
{ data: 'allocated', name: 'allocated' },
{ data: 'request_generated_on', name: 'request_generated_on' },
{ data: 'machine_address', name: 'machine_address' },
{ data: 'actions', name: 'actions',orderable: false, searchable: false }
],
lengthMenu: [[ 10, 15, 20], [ 10, 15, 20]]
});
});
I am initializing Vue on the same page
var vm = new Vue({
el: '#content',
methods: {
allocateEvent: function() {
console.log("hello");
}
}
})
The problem is that the function is not called when I press the button on the rendered html of datatable. If I bind the function to any otehr element fn the page it will work. Is there something I am missing or some Vue related code that I am not adding?
P.S I know this is not how Vue should be used with laravel blade. I just wanted to know why the above code is not working when it should.
Thanks
I don't think you can create a binding with dynamically rendered content like this. The problem is the vue application is created first and the content with the #click binding is rendered afterwards.
Here is a comment by Evan Yu regarding dynamic content:
https://forum-archive.vuejs.org/topic/151/vue-js-not-listening-to-dynamically-created-elements
It's suggested to use $compile(html) and appendChild when working with dynamic content.

Resources