Ad

Searching, Sorting And Paging Not Working For Datatable Laravel

- 1 answer

So I'm trying to use the datatable as seen in my code written below. Unfortunately for some unknown reasons the functions for sorting, searching and paging does not work. May I know what did I missed out or the reason for it not working?

@extends('app')
@section('header')
<link target="_blank" rel="nofollow noreferrer" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link target="_blank" rel="nofollow noreferrer" href="https://cdn.datatables.net/1.10.10/css/dataTables.bootstrap.min.css" rel="stylesheet">
@stop
@section('content')

<h1 class="page-header">View Log Information</h1>
<br/>

<div class="container">
    <div class="col-xs-12 col-md-12" style="overflow:auto">
    <table class="table table-hover" id="logTable">
        <thead>
        <tr>
            <th>
                User
            </th>

            <th>
                Log Description
            </th>
            <th>
                Time Stamp
            </th>
        </tr>
        </thead>
        @foreach ($logs as $log)
        <tbody>
            <tr>
                <td>
                    {{ App\User::find($log->user_id)->name }}
                </td>

                <td>
                    {{ $log->log_description }}
                </td>
                <td>
                    {{ date("F d Y - g:i a",strtotime("$log->created_at")) }}
                </td>
            </tr>
        </tbody>
        @endforeach
    </table>
    </div>
</div>

@stop

@section('scripts')
    <!-- Bootstrap Based Data Table Plugin Script-->
    <script src="http://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js" type="text/javascript"></script>
    <script>
    $(document).ready(function() {
        $('#logTable').DataTable();
    } );
    </script>
@stop
Ad

Answer

try this:

<table class="table table-hover" id="logTable">
    <thead>
    <tr>
        <th>
            User
        </th>

        <th>
            Log Description
        </th>
        <th>
            Time Stamp
        </th>
    </tr>
    </thead>

    <tbody>
        @foreach ($logs as $log)
        <tr>
            <td>
                {{ App\User::find($log->user_id)->name }}
            </td>

            <td>
                {{ $log->log_description }}
            </td>
            <td>
                {{ date("F d Y - g:i a",strtotime("$log->created_at")) }}
            </td>
        </tr>
        @endforeach
    </tbody> 
</table>

Move the @foreach statement under tbody. It's not working because you keep duplicating the tbody instead of <tr> inside the <tbody>.

And this is just a suggestion. Don't do the query at view. it's not a good practice. Do all the query inside controller. You can use Laravel Relationship for App\User::find($log->user_id)->name.

Ad
source: stackoverflow.com
Ad