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

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"  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.

CodePudding user response：

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

Here is the code example:

<table id="stockmovement"  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>

CodePudding user response：

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