DataTables features not working

Hi Guys,

Can anyone point me in the right direction the issue I'm facing now. I tried to use DataTable on my project but it does not display the record as it should be. If the column is more than two in the table. All features on datatable are disappeared like search-bar, sorting, and pagination.

This is the one that working.

Name Height @foreach($infrastructures as $infrastructure) {{ $infrastructure->inf_name }} {{ $infrastructure->inf_height }} @endforeach

But I want to use this one instead

<table id="infrastructures-table" class="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Height</th>
            <th>Width</th>
            <th>Type</th>
            <th>Island</th>
            <th>Start Date</th>
            <th>Completion Date</th>
            <th>Survey Date</th>
            <th>Lat</th>
            <th>Long</th> 
            <th colspan="3">Action</th>
        </tr>
    </thead>
    <tbody>
    @foreach($infrastructures as $infrastructure)
        <tr>
            <td>{{ $infrastructure->inf_name }}</td>
            <td>{{ $infrastructure->inf_height }}</td>
            <td>{{ $infrastructure->inf_width }}</td>
            <td>{{ $infrastructure->typ_id }}</td>
            <td>{{ $infrastructure->island_id }}</td>
            <td>{{ $infrastructure->start_date }}</td> 
            <td>{{ $infrastructure->cmplt_date }}</td>
            <td>{{ $infrastructure->inf_lifspan }}</td>
            <td>{{ $infrastructure->inf_lat }}</td>
            <td>{{ $infrastructure->inf_long }}</td>
            <td>
                {!! Form::open(['route' => ['infrastructures.destroy', $infrastructure->id], 'method' => 'delete']) !!}
                <div class='btn-group'>
                    <a href="{{ route('infrastructures.show', [$infrastructure->id]) }}" class='btn btn-default btn-xs'><i class="glyphicon glyphicon-eye-open"></i></a>
                    <a href="{{ route('infrastructures.edit', [$infrastructure->id]) }}" class='btn btn-default btn-xs'><i class="glyphicon glyphicon-edit"></i></a>
                    {!! Form::button('<i class="glyphicon glyphicon-trash"></i>', ['type' => 'submit', 'class' => 'btn btn-danger btn-xs', 'onclick' => "return confirm('Are you sure?')"]) !!}
                </div>
                {!! Form::close() !!}
            </td>
        </tr>  
    @endforeach
    </tbody>
</table>