DatatTables Laravel 5.4

Question

DatatTables Laravel 5.4

Navigation

#1 by (1 votes)

0

I'm trying to make the Datatables plugin work according to Yajrabox but I can not get it to show anything, it just shows the table but without DataTable options. My code is:

ProductosController.php

use Yajra\Datatables\Datatables;

    public function getProductos() 
    {
        return Datatables::eloquent(Producto::query())->make(true);
    }

Index.blade.php of Productos

    <table id="task" class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>Nombre</th>
      <th>Nopmbre Corto</th>
      <th>Código Familia</th>
      <th>Unidad</th>
      <th>Fungible</th>
      <th>Código del Proveedor</th>
      <th>Stock Mínimo</th>
      <th>Código Ubicación por defecto</th>
      <th>Proyecto</th>                       
      <th>Editar / Eliminar</th>             
    </tr>
  </thead>
  <tbody>
        @foreach($productos as $producto)
            <tr>
                <td>{{ $producto->codigo }}</td>
                <td>{{ $producto->nombre }}</td>
                <td>{{ $producto->nombre_corto }}</td>
                <td>{{ $producto->familia->nombre }}</td>
                <td>{{ $producto->unidad }}</td>
                <td>{{ $producto->fungible }}</td>
                <td>{{ $producto->proveedor->nombre }}</td>
                <td>{{ $producto->stock_minimo }}</td>
                <td>{{ $producto->ubicacion->DCM_Store }}</td>
                <td>{{ $producto->proyecto->nombre }}</td>
                <td>
                    <a href="{{ route('productos.edit', $producto->codigo) }}" class="btn btn-warning"> <span class="glyphicon glyphicon-wrench" aria-hidden="true"></span></a>
                    <a href="{{ route('productos.destroy', $producto->codigo) }}" class="btn btn-danger"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true" onclick="return confirm('¿Seguro que quieres borrarlo')"></span></a>
                </td>
            </tr>
        @endforeach
  </tbody>
</table>
<script>
    $(document).ready(function(){
$('#task').DataTable({
    processing: true,
    serverSide: true,
    ajax: '{!! route('get.productos') !!}',

        columns: [
        { data: 'codigo', name: 'codigo' },
        { data: 'nombre', name: 'nombre' },
        { data: 'nombre_corto', name: 'nombre_corto' },
        { data: 'codigo_familia', name: 'codigo_familia' },
        { data: 'unidad', name: 'unidad' },
        { data: 'fungible', name: 'fungible' },
        { data: 'codigo_proveedor', name: 'codigo_proveedor' },
        { data: 'stock_minimo', name: 'stock_minimo' },
        { data: 'codigo_ubicacion_default', name: 'codigo_ubicacion_default' },
        { data: 'id_proyecto', name: 'id_proyecto' },
    ]
    });
});
</script>

Main.blade.php

    <!-- DataTables -->
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

web.php

    Route::resource('productos','ProductosController');
    Route::get('getProductos', 'ProductosController@getProductos' )->name('productos.index');
    Route::get('productos/{codigo}/destroy', [
    'uses' => 'ProductosController@destroy',
    'as'   => 'productos.destroy'
]);

php ajax datatables laravel laravel-5

asked by Alberto Cepero de Andrés 20.09.2017 в 10:25

source

1 answer

Add dll reference from one project to another visual studio 2013 c # Can not declare class Model, because the name is already in use; PHP

score 1 · Accepted Answer

You are mixing the jquery datatable with the Yara / Datatable de Laravel.

First in the view, create the table with nothing:

 <table class="table table-striped TuTabla">
    <thead>
        <tr>
          <th>Nombre</th>
         <th>Acciones</th>
        </tr>
    </thead>
</table>

In the script part you must initialize it with the values you want (I'll give you a complete example):

$(document).ready(function () {
            iniciarTabla()
        });


function iniciarTabla() {
            $('.dataTableClientesRef').DataTable({
                pageLength: 25,
                processing: true,
                serverSide: true,
                ajax: "{{ route('miController.miNombre' }}",
                responsive: true,
                dom: '<"html5buttons"B>lTfgitp',
                buttons: [
                    {extend: 'colvis', text: 'COLUMNAS'},
                    {extend: 'copy', text: 'COPIAR'},
                    {extend: 'csv', text: 'CSV'},
                    {extend: 'excel', text: 'EXCEL'},
                    {extend: 'print', text: 'IMPRIMIR'},
                    {extend: 'pdf', text: 'PDF'}
                ],
                language: {
                    "sProcessing": "Procesando...",
                    "sLengthMenu": "Mostrar _MENU_ registros",
                    "sZeroRecords": "No se encontraron resultados",
                    "sEmptyTable": "Ningún dato disponible en esta tabla",
                    "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                    "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
                    "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
                    "sInfoPostFix": "",
                    "sSearch": "Buscar:",
                    "sUrl": "",
                    "sInfoThousands": ",",
                    "sLoadingRecords": "Cargando...",
                    "oPaginate": {
                        "sFirst": "Primero",
                        "sLast": "Último",
                        "sNext": "Siguiente",
                        "sPrevious": "Anterior"
                    },
                    "oAria": {
                        "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
                        "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                    }
                },
                columns: [
                    {data: 'nombre', name: 'nombre'},
                    { data: 'action', name: 'Acciones', orderable: false, searchable: false }
                ]

            });
        }

And finally you have to create the route that loads the datatable

use Yajra\Datatables\Datatables;

  public function miNombre()
{

    $productos = Productos::select(['nombre']);

        return Datatables::of($productos)->addColumn('action', function ($cliente) {
            return '<a href="http://google.es" class=" btn-white btn btn-xs"> <i class="fa fa-eye"></i></a>';

        })->make(true);
    }