Using DataTables in Laravel without aJax - No data available in table

Question

I have a regular Laravel view that renders a table. When I try to use Datatables on it, it does render the table but it seems to want to format it before the table is actually rendered. I'm confused because, by the time the view is rendered, the server-side work is already done. The only thing it's doing is to render the table with the object passed from the controller.

<table id="stockmovement" class="table table-hover" style="width:100%">
  <tbody>
    <thead>
      <th>Material</th>
      <th>Tipo</th>
      <th>Quantidade</th>
      <th>Valor total</th>
      <th>Data</th>
      <th>Ordem</th>
      <th colspan="3"></th>
    </thead>
    @foreach($ordercontents as $ordercontent)
      <tr>
        <td>{{ $ordercontent->material_name }}</td>
        <td>{{ $ordercontent->type }}</td>
        <td>{{ $ordercontent->oc_weight }}</td>
        <td>{{ number_format($ordercontent->oc_weight * $ordercontent->material_price, 2) }}</td>
        <td>{{ $ordercontent->order_date }}</td>
        <td>{{ $ordercontent->order_name }}</td>
      </tr>
    @endforeach
  </tbody>
</table>

$(document).ready(function() { 
  $('#stockmovement').DataTable(); 
})

This is what I end up with:

I don't want to use AJAX to form my table. I've used plenty of vanilla PHP and DataTables instances before where it works just fine. I would appreciate any pointers on what I may be missing.

nayeemdev · Accepted Answer · 2022-01-22 20:42:33Z

3

You have placed <tbody> in the wrong place. <tbody> should use under the </thead>.

Here is the code example:

<table id="stockmovement" class="table table-hover" style="width:100%">
    <thead>
      <th>Material</th>
      <th>Tipo</th>
      <th>Quantidade</th>
      <th>Valor total</th>
      <th>Data</th>
      <th>Ordem</th>
    </thead>
    <tbody>
    @foreach($ordercontents as $ordercontent)
      <tr>
        <td>{{ $ordercontent->material_name }}</td>
        <td>{{ $ordercontent->type }}</td>
        <td>{{ $ordercontent->oc_weight }}</td>
        <td>{{ number_format($ordercontent->oc_weight * $ordercontent->material_price, 2) }}</td>
        <td>{{ $ordercontent->order_date }}</td>
        <td>{{ $ordercontent->order_name }}</td>
      </tr>
    @endforeach
  </tbody>
</table>

answered Jan 22, 2022 at 20:42

nayeemdev

1,2411 gold badge14 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Paulo Hgo Over a year ago

Yes, thank you. I should remember that almost every time that Datatables doesn't do what you want it's because of a mal-formed table (it expects all the elements in the right place). Thank you.

Bold · Accepted Answer · 2022-01-22 20:46:15Z

1

Add tr tag inside the thead tag. The foreach loop should be in the opening and closing tbody tag.

It should look like this:

<table id="stockmovement" class="table table-hover" style="width:100%">
    <thead>
        <tr>
            <th>Material</th>
            <th>Tipo</th>
            <th>Quantidade</th>
            <th>Valor total</th>
            <th>Data</th>
            <th>Ordem</th>
        </tr>
    </thead>
    <tbody>
        @foreach($ordercontents as $ordercontent)
        <tr>
            <td>{{ $ordercontent->material_name }}</td>
            <td>{{ $ordercontent->type }}</td>
            <td>{{ $ordercontent->oc_weight }}</td>
            <td>{{ number_format($ordercontent->oc_weight * $ordercontent->material_price, 2) }}</td>
            <td>{{ $ordercontent->order_date }}</td>
            <td>{{ $ordercontent->order_name }}</td>
        </tr>
        @endforeach
    </tbody>
</table>

answered Jan 22, 2022 at 20:46

Bold

3131 gold badge6 silver badges16 bronze badges

1 Comment

Paulo Hgo Over a year ago

Thanks, this would work too but it did work without the <tr> inside the <thead>.

Collectives™ on Stack Overflow

Using DataTables in Laravel without aJax - No data available in table

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related