This is my first time trying to use DataTables. I don't know where to start debugging. This is a dataTable trying to display the values of deployedApplicants Table, for printing. Ajax was returning some SQL errors at first but I was able to debug them all, which finally displayed the DataTables Correctly, however it keeps returning as No Data Available
Controller:
public function records(Request $request)
{
if ($request->ajax()) {
if ($request->input('start_date') && $request->input('end_date')) {
$start_date = Carbon::parse($request->input('start_date'));
$end_date = Carbon::parse($request->input('end_date'));
if ($end_date->greaterThan($start_date)) {
$deployed_applicants = DB::table("deployed_applicants")
->join("job_posts", function($join){ $join; })
->join("users", function($join){
$join->on("deployed_applicants.jobseeker_id", "=", "users.id")
->where("deployed_applicants.job_post_id", "=", "job_posts.id");
})
->select("application_id", DB::raw("concat (users.first_name, ' ', users.last_name) AS `fullname`"), "job_posts.job_position", "deployed_applicants.created_at")
->whereBetween("deployed_applicants.created_at", [$start_date, $end_date])
->get();
} else {
$deployed_applicants = DB::table("deployed_applicants")
->join("job_posts", function($join){ $join; })
->join("users", function($join){
$join->on("deployed_applicants.jobseeker_id", "=", "users.id")
->where("deployed_applicants.job_post_id", "=", "job_posts.id");
})
->select("application_id", DB::raw("concat (users.first_name, ' ', users.last_name) AS `fullname`"), "job_posts.job_position", "deployed_applicants.created_at")
->orderBy("deployed_applicants.created_at","desc")
->get();
}
} else {
$deployed_applicants = DB::table("deployed_applicants")
->join("job_posts", function($join){
$join;
})
->join("users", function($join){
$join->on("deployed_applicants.jobseeker_id", "=", "users.id")
->where("deployed_applicants.job_post_id", "=", "job_posts.id");
})
->select("application_id", DB::raw("concat (users.first_name, ' ', users.last_name) AS `fullname`"), "job_posts.job_position", "deployed_applicants.created_at")
->orderBy("deployed_applicants.created_at","desc")
->get();
}
return response()->json([
'deployed_applicants' => $deployed_applicants
]);
} else {
abort(403);
}
}
HTML:
<div class="container my-5">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Deployed Applicants</h1>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-12 mt-3">
<div class="row">
<div class="col-md-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text bg-info text-white" id="basic-addon1"><i
class="fas fa-calendar-alt"></i></span>
</div>
<input type="text" class="form-control" id="start_date" placeholder="Start Date" readonly>
</div>
</div>
<div class="col-md-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text bg-info text-white" id="basic-addon1"><i
class="fas fa-calendar-alt"></i></span>
</div>
<input type="text" class="form-control" id="end_date" placeholder="End Date" readonly>
</div>
</div>
</div>
<div>
<button id="filter" class="btn btn-outline-info btn-sm">Filter</button>
<button id="reset" class="btn btn-outline-warning btn-sm">Reset</button>
</div>
<div class="row mt-3">
<div class="col-md-12">
<!-- Table -->
<div class="table-responsive">
<table class="table table-borderless display nowrap" id="deployed_list" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
<th>Date</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
JS:
<script>
$(function() {
$("#start_date").datepicker({
"dateFormat": "yy-mm-dd"
});
$("#end_date").datepicker({
"dateFormat": "yy-mm-dd"
});
});
// Fetch records
function fetch(start_date, end_date) {
$.ajax({
url: "{{ route('deployed_applicants/records') }}",
type: "GEt",
data: {
start_date: start_date,
end_date: end_date
},
dataType: "json",
success: function(data) {
// Datatables
var i = 1;
$('#deployed_list').DataTable({
"data": data.deployed_applicants,
// buttons
"dom": "<'row'<'col-sm-12 col-md-4'l><'col-sm-12 col-md-4'B><'col-sm-12 col-md-4'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
"buttons": [
'copy', 'pdf', 'print'
],
// responsive
"responsive": true,
"columns": [
{
"data": "application_id"
},
{
"data": "fullname",
},
{
"data": "job_position",
},
{
"data": "created_at",
"render": function(data, type, row, meta) {
return moment(row.created_at).format('DD-MM-YYYY');
}
}
]
});
}
});
}
fetch();
