asked on
I'm using Bootstrap DataTables and I'm not getting any data. Why?
I'm trying to implement the "datatables" feature that's a part of Bootstrap 3.
I'm using Laravel and the instructions seem simple enough, but I'm missing something and I don't know what.
Bottom line: The functionality seems to be working, but I'm not getting any data despite having been able to successfully retrieve data when I was using Kyslik prior to deciding to reconfigure things and use DataTables.
Here's my Model:
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class CeuOrder extends Model
{
protected $table="datatables_data";
}
Here's my Controller:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\CeuUser;
use App\CeuOrder;
use Illuminate\Support\Facades\DB;
use View;
use Redirect;
use App\Http\Requests\UpdateCustomerRequest;
use App\Http\Requests\UpdateOrderRequest;
use App\Http\Requests\CreateOrderRequest;
/*
the CeuUser and the CeuOrder models might look a little redundanct given the fact the we have a CeuController. The thing is, that Controller is all about the quizzes and the campus. Here they're utilized for the sake of listing orders, editing access periods and being able to give away product.
*/
class CustomerController extends Controller
{
public function __construct() {
$this->middleware('checkRole: admin');
}
//this first block of code deals with orders
public function listOrders() {
$orders = CeuOrder::orderBy('name', 'asc');
return view('admin/listOrders', compact('orders'));
}
Here's my View:
<div class="row">
<div class="col-xs-12">
<table class="table table-bordered" id="table">
<thead>
<tr>
<th style=" background-color:#ea7fea; color:#fff; text-align:center; font-weight:bold;">#</th>
<th style=" background-color:#ea7fea; color:#fff; text-align:center; font-weight:bold;">Date</th>
<th style=" background-color:#ea7fea; color:#fff; text-align:center; font-weight:bold;">Name</th>
<th style=" background-color:#ea7fea; color:#fff; text-align:center; font-weight:bold;">Item Name</th>
<th style="width:25%; background-color:#ea7fea; color:#fff; text-align:center; font-weight:bold;">edit / delete</th>
</tr>
</thead>
<tbody>
<?php $count=1;?>
@foreach($orders as $order)
<tr>
<td style="vertical-align:middle;">{{ $count }}</td>
<td style="vertical-align:middle;"><?php echo date("m/d/Y", strtotime($order->datetime));?></td>
<td style="vertical-align:middle;" nowrap>{{ $order->name }}</td>
<td style="vertical-align:middle;">{{ $order->itemname }}</td>
<td style="vertical-align:middle; text-align:center;"><a href="{{ url('/admin/show/order/' .$order->id) }}">edit</a> | <a data-toggle="modal" href="#deletePostModal-{{ $order->orderno }}">delete</a></td>
</tr>
<?php $count=$count+1;?>
@endforeach
</tbody>
</table>
</div>
</div>
And I'm calling the appropriate JQuery function with...
<script>
$(document).ready(function() {
$('#table').DataTable();
} );
</script>
The result is...
I can't tell you how fired up I am about seeing the "search" functionality displayed as that was the whole reason for the switch.
But I'm missing something, as far as as why I'm not getting any data.
I did do a "composer dump-autoload" in an effort to ensure I was working with a clean slate, as far as my Model was concerned, but I'm still running into difficulties.
Any suggestions?
public function listOrders() {
$orders = CeuOrder::orderBy('name', 'asc');
return var_dump($orders);
//return view('admin/listOrders', compact('orders'));
}
If you get data that way and not in your view.
Probably has nothing to do with this, but in your line 17
<td style="vertical-align:middle;"><?php echo date("m/d/Y", strtotime($order->datetime));?></td>
Shouldn't that be
<td style="vertical-align:middle;">@php echo date("m/d/Y", strtotime($order->datetime)); @endphp</td>
The date will also work like
<td style="vertical-align:middle;">{{ date("m/d/Y", strtotime($order->datetime)) }}</td>
One you have this working, if you have a lot of data you are working with, go directly to the datatables documentation and view the serverside example https://datatables.net/examples/server_side/simple.html. It is using an ajax request but tracks what page you are on so you don't have to load a lot of data all at one. On the php portion, you would just rewire that to use your controller. For ajax you would need to have a separate route. This is does add too many factors for now, just get this working example done first.
If you do a view source of the page and search for id="table" - does the underlying HTML have any records
No table - that is your answer.
If there is a table (i.e. rows are present) check your console for errors.
Sidebar: Bootstrap 3 is a little bit in the dark ages - is there a reason you are not running with a later release?
I'm using Datatables everyday and yes it has learning curve..
I recommend to use this method as it will be a lot easier to work with Datatables plugins especialy Yadcf.
var table1= $('#mytable').DataTable({ .................... });
*Don't use inline CSS with Datatables as it can break the table, instead use Datatables options and classeshttps://datatables.net/manual/styling/classes#Cell-classes
Datatables work very well with BS3
I recommend to use it in combinaison with Responsive extension so it will display large table on small view.
https://datatables.net/extensions/responsive/
As Datatables is using localstorage make sure there is no settings saved that may hide the result.
You can disable localstorage or you can clear your browser cache.
So you can also change statSave to false during the tests
"stateSave": false,
For example, if you do a search and result echo no result "the nothing found" message will be displayed using Datatables or Yadcf this result will be saved into the localstorage and this will be kept in localstorage, so next time you go to the page it echo nothing based on the latest search / filter. But this not mean there is not results it just mean there is no result displayed based on the table criteria.
I usually have 2 reset buttons, one to reset the table preferences and one to reset only the table result from search this keep the table preferences (order, column, pagination etc).
Here is the way I investigate:
- Clear the browser cache.
- Check browser console : right click inspect using Chrome (let this open during your tests).
Sometimes Ajax call or Datatables errors can be the culprit
- Make sure the method return data (check MyQL query using PHPMyAdmin or any source depending of the case).
- I echo the result in plain table and comment all Datatables code.
If the problem is still there and no problem found during the investigation this maybe related to user role and other code condition.
->get();
Good catch as usual Chris!
ASKER
so remove/comment that line
$('#table').DataTable();
step 1, display the table unformatted by DataTable,
so you should first see the table build by the loop : @foreach($orders as $order)
else check :
Open in new window