Multiple table load issues
Multiple table load issues
stephensharp1216
Posts: 6Questions: 2Answers: 0
Good afternoon,
Just wondering if someone could point me in the right direction here. I've been looking through the forums and trying different things to no avail.
The issue I'm having is that I've got 6 tables on one page and some times when I load the page they all load fine, and other times one or more of the tables flags up an error that "DataTables warning: table id=manager - Ajax error. For more information about this error, please see http://datatables.net/tn/7".
In developer tools I'm getting "Failed to load resource: the server responded with a status of 500 (Internal Server Error)".
It looks like the data is coming through but just not displaying.
I'm using laravel 5.4 with SQL database. Each table is displayed in a separate blade view and brought into the main layout as a nested view.
An example of one of my blade templates is as follows:
<div class="row">
<div class="col-md-12">
<table id="site_has_employee" class="display nowrap" style="width:100%">
<thead>
<tr>
<th>View</th>
<th>Edit</th>
<th>Delete</th>
<th>Employee Number</th>
<th>First Name</th>
<th>Last Name</th>
<th>Company</th>
<th>Occupation</th>
<th>Date Inducted</th>
<th>Inducted By</th>
<th>FA</th>
</tr>
</thead>
</table>
</div>
</div>
<div id="sheModal" class="modal fade">
<div class="modal-dialog modal-sm" role="document">
<form method="post" id="she_form" enctype="multipart/form-data">
<div class="modal-content">
<div class="modal-header">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Employee Inducted</h4>
</div>
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label>Inductor</label>
<input type="text" name="inductor_id" id="inductor_id" class="form-control" required/>
<br />
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-6 col-sm-12 col-xs-12">
<label>Date Inducted</label>
<input type="text" name="date_inducted" id="date_inducted" class="form-control" required/>
<br />
</div>
</div>
<br>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
{{-- <label>Employee Qualification ID</label> --}}
<input type="hidden" name="id" id="id" />
{{-- <label>Employee ID</label> --}}
<input type="hidden" name="employee_id" id="employee_id" />
{{-- <label>Qualification ID</label> --}}
<input type="hidden" name="site_id" id="site_id" />
<input type="hidden" name="operation" id="operation" />
<input type="submit" name="action" id="action" class="btn btn-success" value="Add" />
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var oTableshe = $('#site_has_employee').DataTable({
processing: true,
serverSide: true,
lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
select: "multi",
searching: true,
info: true,
//"scrollY": "500px",
//"scrollX": true,
//"scrollCollapse": true,
paging: true,
//responsive: true,
ajax: "{{ route('sites-mgmt.shedatatable.getposts', ['id' => $site_id]) }}",
dom:
"<'row'<'col-sm-6'l><'col-sm-6'Bf>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>",
columns: [
{data: 'employee_id', name: 'employee_id', orderable: false, render: function ( data, type, row, meta )
{
if(type === 'display')
{
data = '<a href="/nstemployeedetail/' + data + '/"><button class="btn btn-xs btn-primary"><span class="glyphicon glyphicon-eye-open"></span> View</button></a>';
}
return data;
}},
{data: 'id', name: 'id', orderable: false, render: function ( data, type, row)
{
return "<button type='button' class='btn btn-xs btn-info sheupdate' id='id' name='id' > Edit </button>";
} },
{data: 'id', name: 'id', orderable: false, render: function ( data, type, row)
{
return "<button type='button' class='btn btn-xs btn-danger shedelete' id='id' name='id' > Delete </button>";
} },
{data: 'employee_number', name: 'employee_number'},
{data: 'firstname', name: 'firstname'},
{data: 'lastname', name: 'lastname'},
{data: 'company_name', name: 'company.name'},
{data: 'occupation', name: 'occupation'},
{data: 'date_inducted', name: 'date_inducted'},
{data: 'inductor_id', name: 'inductor_id'},
{data: 'fa', createdCell: function (td, cellData, rowData, row, col)
{
var now_date = new Date().getTime();
var qual_date = Date.parse($(td).text().replace(/(\d{2})\/(\d{2})\/(\d{4})/, '$2/$1/$3'));
var now_date_plus_two_mth = new Date((+new Date) + 5184000000);
if(qual_date < now_date)
{
$(td).append('<div class="led-red" id="led-red"></div>')
}
else if(qual_date > now_date && qual_date < now_date_plus_two_mth)
{
$(td).append('<div class="led-yellow" id="led-yellow"></div>')
}
else if(qual_date > now_date_plus_two_mth)
{
$(td).append('<div class="led-green" id="led-green"></div>')
}
else
{
$(td).append('<div class="led-black" id="led-black"></div>')
}
} },
]
});
});
</script>
Thanks in advance for any help or advice.
Kind regards
Stephen
This question has accepted answers - jump to:
This discussion has been closed.
Answers
That would be an error coming from your server. Your server logs should have details of what is causing the 500 error. Have you looked at your server logs?
Kevin
Thanks Kevin,
I appreciate the advice. I've had a look at the error logs and the access logs and nothing jumps out at me however to be honest I dont have a lot of experience with that side of things. It doesnt look like a problem with my requests as they all seem to be going through the same. I dont want to fill up this forum with non datatable related issues and will be trying to deploy the application in a couple of months. I will probably be using a different approach to WAMP that im using at the moment hence might be superfluous to worry about resolving it at present.
Thanks for the heads up though, gives me peace of mind.
Kind regards
Stephen
What script are you using to implement server-side processing? Another question to ask is if you really need server-side processing (it does complicate things a bit)?
Allan
Thanks for getting back.
I'm using the same as the examples on yajirabox.com (https://datatables.yajrabox.com/eloquent/has-many)
with eloquent has many relations. I'm expecting to have anything up to 10,000 employees in the database and each employee has qualifications, probably average about 10 per employee. This would give up to say 100,000 results in the employee qualifications relation table. I've tested with and without the server-side processing and it definitely makes a big difference.
I'm also using soft deletes however was having this problem prior to setting up soft deletes.
Kind regards
Stephen
Yup - with that many records, SSP will be the way to go.
I'm not sure I can add all that much at the moment, beyond what Kevin has already suggested. The 500 error indicates something going wrong at the server-side, but that could be anything from a syntax error to a database timeout. The best thing to do would be to enable all the logging you can for your server and check the error logs.
Allan
Thanks Allan,
I appreciate the advice. I'll give it a shot and see what I can find. I'll probably enlist some professional help at some point in the near future as I've only been developing since July and gradually getting more and more out my depth. I must say though the documentation on datatables is fantastic and the help and advice around is great. I'm really enjoying learning it and the functionality its giving to my project.
Kind regards
Stephen
Thank you