DataTable implements but does not work in for my data in Laravel?-CodePudding

I implemented DataTables for my Admin Users Dashboard, but it was working like Search, Order, Show and Entries Buttons are Displaying but not working.

Like it was only displaying but not working for my data.

For Example, if we search anything it was showing no data available even through the data was there, and even with the Entites ( there are 100 data if I go for show only 10 data it does not work )

What I am going to say is, everything appear but does not work ...

Below is my code

<link href="{{ asset('assets\admin\vendor\datatables\dataTables.bootstrap4.min.css') }}" rel="stylesheet">

<script src="{{ asset('assets\admin\vendor\jquery\jquery.min.js') }}"></script>
<script src="{{ asset('assets\admin\vendor\datatables\jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets\admin\vendor\datatables\dataTables.bootstrap4.min.js') }}"></script>

<script type="text/javascript">
$(document).ready(function() {
  $('#example').DataTable( {
  } );
} );
</script>

In Blade

<div class="table-responsive">
<table id="example" class="display table table-bordered" width="100%" cellspacing="0">
<thead>
  <tr>
    <th>Id</th>
    <th>Name</th>
    <th>Email</th>
    <th>Role</th>
    <th>Created At</th>
    <th>Updated At</th>
    <th></th>
  </tr>
</thead>

@foreach ($users as $user)
  
  <tbody>
    <tr>
      <td>{{ $user->id }}</td>
      <td class="text-capitalize">{{ $user->name}}</td>
      <td>{{ $user->email }}</td>
      <td class="text-capitalize">{{ $user->role}}</td>
      <td>{{ $user->created_at->diffForHumans() }}</td>
      <td>{{ $user->updated_at->diffForHumans() }}</td>
      <td>
        <div class="btn-group">
          <button class="btn btn-success btn-sm rounded-0" type="button" data-toggle="modal" data-target="#update{{ $user->id }}" data-toggle="tooltip" data-placement="left" title="Edit"><i class="fa fa-edit"></i></button>
          <button class="btn btn-danger btn-sm rounded-0 ml-2" type="button" data-toggle="modal" data-target="#delete{{ $user->id }}" data-toggle="tooltip" data-placement="top" title="Delete"><i class="fa fa-trash"></i></button>
        </div>
      </td>
    </tr>
  </tbody>
  
@endforeach

CodePudding user response：

Can you try this instead,

<div class="table-responsive">
<table id="example" class="display table table-bordered" width="100%" cellspacing="0">
<thead>
  <tr>
    <th>Id</th>
    <th>Name</th>
    <th>Email</th>
    <th>Role</th>
    <th>Created At</th>
    <th>Updated At</th>
    <th></th>
  </tr>
</thead>

  <tbody>
    @foreach ($users as $user)
    <tr>
      <td>{{ $user->id }}</td>
      <td class="text-capitalize">{{ $user->name}}</td>
      <td>{{ $user->email }}</td>
      <td class="text-capitalize">{{ $user->role}}</td>
      <td>{{ $user->created_at->diffForHumans() }}</td>
      <td>{{ $user->updated_at->diffForHumans() }}</td>
      <td>
        <div class="btn-group">
          <button class="btn btn-success btn-sm rounded-0" type="button" data-toggle="modal" data-target="#update{{ $user->id }}" data-toggle="tooltip" data-placement="left" title="Edit"><i class="fa fa-edit"></i></button>
          <button class="btn btn-danger btn-sm rounded-0 ml-2" type="button" data-toggle="modal" data-target="#delete{{ $user->id }}" data-toggle="tooltip" data-placement="top" title="Delete"><i class="fa fa-trash"></i></button>
        </div>
      </td>
    </tr>
    @endforeach
  </tbody>

I think gonna be great question if you can share the screenshoot, since we only able to imagine the error.

Note : What I do is change to position of your loop, because now you're looping the table's body instead of the tr (table row), which I think what you really want to achieve, since as far as I know, Datatables doesn't allow multiple table body tag inside of it