I'm trying to use datatables in Laravel for the first time, and I came across Yajra lib. I'm using Laravel Framework 5.8.34, mySQL database. I'm following this tutorial. Im failing to make it display the search, pagination etc, like on their example:
When using PHP I know this to be a JS issue, but here is my blade:
@extends('layouts.app')
@section('content')
<head>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<link rel="stylesheet" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<!-- jQuery -->
<script src="//code.jquery.com/jquery.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12">
<div class="card">
<div class="card-header">Dashboard</div>
<div class="card-body">
@if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
@endif
<div >
<div class="panel">
<div class="panel-header">
<h2 align="center">{{AUth::user()->name}} - {{AUth::user()->paynumber}}</h2>
<hr>
</div>
<div class="panel-body">
@if (session('status'))
<div class="alert alert-success">
{{ session('status') }}
</div>
@endif
<div >
<div class="col-md-4">
<div class="form-group">
<select name="filter_type_of_leave" id="filter_type_of_leave" class="form-control" required>
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="form-group">
<select name="filter_applied_by" id="filter_applied_by" class="form-control" required>
<option value="">Select Leave Requestor</option>
@foreach($leaveslist as $requestor)
<option value="{{ $requestor->applied_by }}">{{ $requestor->applied_by }}</option>
@endforeach
</select>
</div>
<div class="form-group" align="center">
<button type="button" name="filter" id="filter" class="btn btn-info">Filter</button>
<button type="button" name="reset" id="reset" class="btn btn-default">Reset</button>
</div>
</div>
<div class="table-responsive">
<table id="leave_data" class="table table-bordered table-striped">
<thead>
<tr>
<th>Pay Number</th>
<th>Type of Leave</th>
<th>Days taken</th>
<th>Date From</th>
<th>Date To</th>
<th>Applied By</th>
</tr>
</thead>
<tbody>
@foreach ($leaveslist as $ileave)
<tr>
<td>{{ $ileave->paynumber }}</td>
<td>{{ $ileave->type_of_leave }}</td>
<td>{{ $ileave->days_taken }} </td>
<td>{{ $ileave->date_from }}</td>
<td>{{ $ileave->date_to }}</td>
<td>{{ $ileave->applied_by }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
<script>
$(document).ready(function(){
fill_datatable();
function fill_datatable(filter_type_of_leave = '', filter_applied_by = '')
{
var dataTable = $('#leave_data').DataTable({
processing: true,
serverSide: true,
ajax:{
url: "{{ route('dashboard.index') }}",
data:{filter_type_of_leave:filter_type_of_leave, filter_applied_by:filter_applied_by}
},
columns: [
{
data:'paynumber',
name:'paynumber'
},
{
data:'type_of_leave',
name:'type_of_leave'
},
{
data:'days_taken',
name:'days_taken'
},
{
data:'days_from',
name:'days_from'
},
{
data:'days_to',
name:'days_to'
},
{
data:'applied_by',
name:'applied_by'
}
]
});
}
$('#filter').click(function(){
var filter_type_of_leave = $('#filter_type_of_leave').val();
var filter_applied_by = $('#filter_applied_by').val();
if(filter_type_of_leave != '' && filter_type_of_leave != '')
{
$('#leave_data').DataTable().destroy();
fill_datatable(filter_type_of_leave, filter_applied_by);
}
else
{
alert('Select Both filter option');
}
});
$('#reset').click(function(){
$('#filter_type_of_leave').val('');
$('#filter_applied_by').val('');
$('#leave_data').DataTable().destroy();
fill_datatable();
});
});
</script>
Here is my Controller:
public function index(Request $request)
{
if(request()->ajax())
{
if(!empty($request->filter_type_of_leave))
{
$data = DB::table('leaves')
->select('paynumber', 'type_of_leave', 'applied_by', 'days_taken')
->where('type_of_leave', $request->filter_type_of_leave)
->where('applied_by', $request->filter_applied_by)
->get();
}
else
{
$data = DB::table('leaves')
->select('paynumber', 'type_of_leave', 'applied_by', 'days_taken')
->get();
//dd(datatables()->of($data)->make(true));
}
return datatables()->of($data)->make(true);
}
$leaveslist = DB::table('leaves')
->select('paynumber', 'type_of_leave', 'days_taken','date_from','date_to','applied_by')
->orderBy('created_at', 'DESC')
->get();
//dd($leaveslist);
return view('dashboard', compact('leaveslist'));
}
There are some errors coming up from Firefox Console but I do not think that they affect anything:
Any help is greatly appreciated. I have tried this , this and this , with no luck, perharps I missed something.
UPDATE: 1. I have removed the foreach statements. 2. Made sure jQuery loaded, loaded 1st before the datatables as i was getting an error if they load after any other JS. 3. set a section as suggested.
Now the data is loading but its squashed together, must be Bootstrap??, now working on that
The issue was a matter of conflicting JS and CSS.
(answered by asker in the comments)
知道了,这是JS和CSS冲突的问题
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.