Link to home
Start Free TrialLog in
Avatar of Bruce Gust
Bruce GustFlag for United States of America

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"; }

Open in new window

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'));    }    

Open in new window

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>

Open in new window

And I'm calling the appropriate JQuery function with...

<script>
  $(document).ready(function() {
    $('#table').DataTable();
} );
</script>


The result is...


User generated image

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?      

Avatar of leakim971
leakim971
Flag of Guadeloupe image

forget DataTable, go in two step,
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 :
<?php var_dump($orders); ?>
<div class="row"> // your line 1

Open in new window



To what Leakim is saying, In your controller do your var_dump. Make sure you have data

 public function listOrders() {
      $orders = CeuOrder::orderBy('name', 'asc');
       return var_dump($orders);
      //return view('admin/listOrders', compact('orders'));
   }

Open in new window


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>

Open in new window


Shouldn't that be
<td style="vertical-align:middle;">@php echo date("m/d/Y", strtotime($order->datetime)); @endphp</td>

Open in new window


The date will also work like
<td style="vertical-align:middle;">{{ date("m/d/Y", strtotime($order->datetime)) }}</td>

Open in new window


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. 
Easier than dumping your data - check the underlying HTML

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?
ASKER CERTIFIED SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Hi,

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({ .................... });

Open in new window

*Don't use inline CSS with Datatables as it can break the table, instead use Datatables options and classes
https://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,

Open in new window


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!
Avatar of Bruce Gust

ASKER

It's amazing how obvious something can be once you're looking at it!