DataTables is not sorted or filtered, it only changes form of tables, Laravel 5.2

Question

DataTables is not sorted or filtered, it only changes form of tables, Laravel 5.2

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have a problem, with a view in laravel I am trying to use Datatables to perform the pagination and search, but the table changed with the data is not shown, also missing the paging and search. Attached the view: indexEstado.blade.php

  @extends('layouts.principal')
  @section('script')
   <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
 @stop
 @section('content')
{!! Alert::render() !!}
 <div class="container-fluid">
<div class="row">
        <h2>Estados</h2>
    </div>
</div>

<div class="container-fluid tablaLugar">
<div class="row">
    <div class="col-lg-11 col-lg-offset-0 ">            
        <table id="myTable" class="table table-bordered table-condensed">
            <thead>
                <th id="textoLugar">País</th>
                <th id="textoLugar">Nombre</th>
                <th id="textoLugar">Tipo</th>
                <th id="textoLugar">Ver ciudades</th>
                <th id="textoLugar">Acciones</th>
            </thead>
            @foreach($estado as $lugar)
            <tbody class="well">        
            @if($lugar->tipo=='estado')
                    <td style="display:none;" id="">{{$lugar->idLugar}}</td>
                    @foreach ($pais as $lugar2)
                        @if($lugar->Lugar == $lugar2->idLugar)  
                        <td>{{$lugar2->nombre}}</td>
                        @endif
                    @endforeach                     
                    <td>{{$lugar->nombre}}</td>
                    <td>{{$lugar->tipo}}</td>
                    <td>
                        <select name="Ciudad" id="">
                            <option selected value="">Ciudades de {{$lugar->nombre}}</option>
                                @foreach($ciudad as $lugar3)
                                    @if(($lugar->idLugar == $lugar3->Lugar))
                                        <option value="{{$lugar3->idLugar}}">{{$lugar3->nombre}}</option>
                                    @endif
                                @endforeach
                        </select>
                    <td>
                    <a href="{{ route('lugar.edit',$lugar->idLugar) }}"><button class="btn btn-primary">Editar</button></a>
                    <a href="{{ route ('eliminarbyIndex', $lugar->idLugar)}}" onclick="return confirm('Estas Seguro de Eliminar el Estado {{$lugar->nombre}}?')"><button class="btn btn-danger">Eliminar</button></a>
                    </td>                   
                @endif
            </tbody>
            @endforeach
        </table>
        <td> <a href = "{{route('agregarEstado')}}"> <button type="button" class="btn btn-primary" > Nuevo </button> </a> </td>

        <p></p>
    </div>
</div>
@stop
@section('scriptFooter')
@stop

 @section('DespuesBody')

<script src="http://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script>
    $('.myTable').DataTable({
    });
</script>
@stop

jquery datatables laravel

asked by Adrian Rama 27.11.2017 в 19:53

source

2 answers

0

  @extends('layouts.principal')
  @section('script')
  <link rel="stylesheet" type="text/css" href="/css/jquery.dataTables.min.css">
  <script src="/js/jquery.dataTables.min.js" type="text/javascript"</script> <!-- Recuerda que esto va en el <head> -->
  @endsection
  @section('content')
   {!! Alert::render() !!}
  <div class="container-fluid">
   <div class="row">
    <h2>Estados</h2>
 </div>
</div>

<div class="container-fluid tablaLugar">
<div class="row">
<div class="col-lg-11 col-lg-offset-0 ">            
    <table id="myTable" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th id="">País</th>
                <th id="">Nombre</th>
                <th id="">Tipo</th>
                <th id="">Ver ciudades</th>
                <th id="">Acciones</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th id="">País</th>
                <th id="">Nombre</th>
                <th id="">Tipo</th>
                <th id="">Ver ciudades</th>
                <th id="">Acciones</th>
            </tr>           
        </tfoot>
        <tbody>
            @foreach($estado as $lugar)
                <tr>
                    @foreach($pais as $lugar2)
                        @if($lugar->Lugar == $lugar2->idLugar)  
                            <td>{{$lugar2->nombre}}</td>
                        @endif
                    @endforeach
                    <td>{{$lugar->nombre}}</td>
                    <td>{{$lugar->tipo}}</td>
                    <td>
                        <select name="Ciudad" id="">
                            <option selected value="">Ciudades de {{$lugar->nombre}}</option>
                                @foreach($ciudad as $lugar3)
                                    @if(($lugar->idLugar == $lugar3->Lugar))
                                        <option value="{{$lugar3->idLugar}}">{{$lugar3->nombre}}</option>
                                    @endif
                                @endforeach
                        </select>
                    </td>
                    <td>
                    <a href="{{ route('lugar.edit',$lugar->idLugar) }}"><button class="btn btn-primary">Editar</button></a>
                    <a href="{{ route ('eliminarbyIndex', $lugar->idLugar)}}" onclick="return confirm('Estas Seguro de Eliminar el Estado {{$lugar->nombre}}?')"><button class="btn btn-danger">Eliminar</button></a>
                    </td> 
                </tr>
            @endforeach
        </tbody>
    </table>
    <td> <a href = "{{route('agregarEstado')}}"> <button type="button" class="btn btn-primary" > Nuevo </button> </a> </td>

    <p></p>
  </div>
</div>
@endsection
@section('scriptFooter')
@endsection

@section('DespuesBody')
 <script>
    $('#myTable').DataTable();
 </script>
@endsection

answered by 27.11.2017 в 23:25

Non-zero exit code (1) Python PyCharm I want to validate focus out in a QtableWidgetItem in PyQt 5?

score 0 · Accepted Answer

Analyzing your code this is what I see:

The id of your <table> is myTable and in the script you are capturing it as if it were a class.

The line where you import the Datatables library would be better if you put it on the <head> of your site

If you are not going to configure the library, if you are not going to leave it as it is by default it is not necessary to use {} within ()

You have several errors in the structure of the table:

4.1. You failed to close a <td> in <tbody>

4.2. The number of columns must be the same for both <thead> as for <tbody> . In your <thead> you have 5 columns and in your <tbody> you have 6, even though one of the 6 columns is stylish display:none this could generate failures.

4.3. You are entering the <tbody> tag in foreach() ... this should be the other way around.

4.4. DataTables requires that the structure of the table be respected, so the <tr> tags must be added to both the <thead> and the <tbody>

Here I leave the code as it should be:

<script src="http://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" type="text/javascript"></script> <!-- Recuerda que esto va en el <head> -->


@extends('layouts.principal')
@section('script')
   <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
@stop
@section('content')
{!! Alert::render() !!}
 <div class="container-fluid">
<div class="row">
        <h2>Estados</h2>
    </div>
</div>

<div class="container-fluid tablaLugar">
<div class="row">
    <div class="col-lg-11 col-lg-offset-0 ">            
        <table id="myTable" class="table table-bordered table-condensed">
            <thead>
                <tr>
                    <th id="textoLugar">País</th>
                    <th id="textoLugar">Nombre</th>
                    <th id="textoLugar">Tipo</th>
                    <th id="textoLugar">Ver ciudades</th>
                    <th id="textoLugar">Acciones</th>
                </tr>
            </thead>
            <tbody class="well">
                @foreach($estado as $lugar)
                    @if($lugar->tipo=='estado')
                        <tr>
                            @foreach ($pais as $lugar2)
                                @if($lugar->Lugar == $lugar2->idLugar)  
                                    <td>{{$lugar2->nombre}}</td>
                                @endif
                            @endforeach                     
                            <td>{{$lugar->nombre}}</td>
                            <td>{{$lugar->tipo}}</td>
                            <td>
                                <select name="Ciudad" id="">
                                    <option selected value="">Ciudades de {{$lugar->nombre}}</option>
                                        @foreach($ciudad as $lugar3)
                                            @if(($lugar->idLugar == $lugar3->Lugar))
                                                <option value="{{$lugar3->idLugar}}">{{$lugar3->nombre}}</option>
                                            @endif
                                        @endforeach
                                </select>
                            </td>
                            <td>
                                <a href="{{ route('lugar.edit',$lugar->idLugar) }}"><button class="btn btn-primary">Editar</button></a>
                                <a href="{{ route ('eliminarbyIndex', $lugar->idLugar)}}" onclick="return confirm('Estas Seguro de Eliminar el Estado {{$lugar->nombre}}?')"><button class="btn btn-danger">Eliminar</button></a>
                            </td> 
                        </tr>                 
                    @endif
                @endforeach
            </tbody>
        </table>
        <td> <a href = "{{route('agregarEstado')}}"> <button type="button" class="btn btn-primary" > Nuevo </button> </a> </td>

        <p></p>
    </div>
</div>
@stop
@section('scriptFooter')
@stop

@section('DespuesBody')
<script>
    $('#myTable').DataTable();
</script>
@stop