CODEWITHSUNDEEP
phpjquerylaraveldatatables
Paulo Hgo
Paulo Hgo

Reputation: 860

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

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:

enter image description here

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.

Upvotes: 2

Views: 2536

Answers (2)

Bold
Bold

Reputation: 283

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>

Upvotes: 1

nayeemdev
nayeemdev

Reputation: 1241

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>

Upvotes: 3

Related Questions