2

Estoy realizando una aplicación de inventario de equipos informáticos en PHP con Laravel. En estos momentos quiero mostrar una tabla con todos los datos sobre los modelos, pero no encuentro la solución.

Mi index para esta vista es:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery Datatables</title>
<link rel="stylesheet" type="text/css" href="DataTables/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="Editor/css/dataTables.editor.css">
<script type="text/javascript" language="javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="DataTables/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="Editor/js/dataTables.editor.js"></script>
<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        var datatable = $('#mytable').DataTable({
            ajax: $.ajax( {
                url: "/modelo",
                type: 'GET',
                dataType: 'json',
            } ),
            columns: [
                {data:"marca"},
                {data:"modelo"},
                {data:"part_number"},
                {data:"coste"},
                {data:"caractetisticas"},
                {
                    data: null,
                    defaultContent: '<a href="#" class="edit">Editar</a> / <a href="#" class="Eliminar">Delete</a>'
                }
            ],
        });
        editor = new $.fn.dataTable.Editor( {
            ajax: "actions.php",
            table: "#mytable",
            idSrc: "id",
            fields: [
                {label:'Marca' , name:'marca'},
                {label:'Modelo' , name:'modelo'},
                {label:'Part Number' , name:'part_number'},
                {label:'Coste' , name:'coste'},
                {label:'Características' , name:'caractetisticas'}
               ]
        });
        $('#mytable').on('click', 'a.edit', function (e) {
            e.preventDefault();
            editor
                .title( 'Editar modelo' )
                .buttons( { "label": "Update", "fn": function () { editor.submit() } } )
                .edit( $(this).closest('tr') );
        } );
        $('#mytable').on('click', 'a.remove', function (e) {
            e.preventDefault();
            editor
                .message( '¿Estás seguro de eliminar el modelo?' )
                .buttons( { "label": "Delete", "fn": function () { editor.submit() } } )
                .remove( $(this).closest('tr') );
        } );
        $('a.create').on('click', function (e) {
            e.preventDefault();
            editor
                .title( 'Crear nuevo modelo' )
                .buttons( { "label": "Add", "fn": function () { editor.submit() } } )
                .create();
        } );
    });
</script>
</head>
<body>
<a href="{!!URL::to('/modelo/create')!!}" class="create">Nuevo</a>
<table id="mytable" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Marca</th>
            <th>Modelo</th>
            <th>Part Number</th>
            <th>Coste</th>
            <th>Características</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Marca</th>
            <th>Modelo</th>
            <th>Part Number</th>
            <th>Coste</th>
            <th>Características</th>
        </tr>
    </tfoot>
</table>

Y este es mi controlador:

<?php

namespace inventario\Http\Controllers;

use Illuminate\Http\Request;
use inventario\Modelos;
use inventario\Http\Requests\ModelosRequest;

class ModeloController extends Controller
{
public function __construct(){
    //Para que no se pueda acceder a /usuario sin entrar por el login
    $this->middleware('auth');
    //Para dar permisos solo al usuario admin de acceder
    $this->middleware('admin');
}

/**
 * Display a listing of the resource.
 *
 * @return \Illuminate\Http\Response
 */

public function index(Request $request)
{
    if ($request->ajax()) {
        $modelos = Modelos::all();
        return response()->json($modelos);
    }
    return view('modelos.index');
}

/**
 * Show the form for creating a new resource.
 *
 * @return \Illuminate\Http\Response
 */
public function create()
{
    return view('modelos.create');
}

/**
 * Store a newly created resource in storage.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return \Illuminate\Http\Response
 */
public function store(ModelosRequest $request)
{
    if($request->ajax()){
        Modelos::create($request->all());
        return response()->json([
                "mensaje" => "creado"
            ]); 
    }

}

/**
 * Display the specified resource.
 *
 * @param  int  $id
 * @return \Illuminate\Http\Response
 */
public function show($id)
{
    //
}

/**
 * Show the form for editing the specified resource.
 *
 * @param  int  $id
 * @return \Illuminate\Http\Response
 */
public function edit($id)
{
    $mdoelos = Modelos::find($id);

    return response()->json(
            $modelos->toArray()
        );
}

/**
 * Update the specified resource in storage.
 *
 * @param  \Illuminate\Http\Request  $request
 * @param  int  $id
 * @return \Illuminate\Http\Response
 */
public function update(Request $request, $id)
{
    $modelos = Modelos::find($id);
    $modelos->fill($request->all());
    $modelos->save();

    return response()->json([
            "mensaje"=>"listo"
        ]);
}

/**
 * Remove the specified resource from storage.
 *
 * @param  int  $id
 * @return \Illuminate\Http\Response
 */
public function destroy($id)
{
    $modelos = Modelos::find($id);
    $modelos->delete();

    return response()->json([
            "mensaje"=>"eliminado"
        ]);
}
}

Creo que mi error está en el "ajax", pero cuando inspecciono la web, observo que los datos sí me los está cargando:

Inspector - Network

Mi página cargada se ve de la siguiente manera (desconozco el motivo, pero tampoco me aparecen los botones Editar y Eliminar):

Vista - Modelos

12
  • Te muestra algún error en la consola JS?
    – user17875
    el 24 abr. 2017 a las 16:38
  • Releyendo to pregunta, tienes un error tipográfico en la propiedad características al definir los campos, tienes escrito "caractetisticas".
    – user17875
    el 24 abr. 2017 a las 16:48
  • He modificado la propiedad caracteristicas pero sigue sin funcionar. El error que me aparece en la consola es: 'Uncaught TypeError: Cannot read property 'style' of undefined' el 24 abr. 2017 a las 16:56
  • Podrías tener un problema en el parseo del json. Lo que estás recibiendo es un Array, no un Objeto.
    – user17875
    el 25 abr. 2017 a las 6:44
  • Por otra parte, al establecer la propiedad ajax del objeto DataTable estableces el resultado de una petición, no una url como establece la documentación.
    – user17875
    el 25 abr. 2017 a las 6:49

2 respuestas 2

1

La llamada AJAX debe realizarla DataTables a partir de la url especificada, no debes poner el resultado de la llamada como parámetro:

var datatable = $('#mytable').DataTable({
        ajax: "/modelo",
        columns: [
            {data:"marca"},
            {data:"modelo"},
            {data:"part_number"},
            {data:"coste"},
            {data:"caractetisticas"},
            {
                data: null,
                defaultContent: '<a href="#" class="edit">Editar</a> / <a href="#" class="Eliminar">Delete</a>'
            }
        ]
    });
3
  • He realizado la prueba y sigue sin cargarme los datos. Al inspeccionar la web, en la Consola no aparece nada, tampoco en Network ni en Source. Tampoco hay ningún rastro de json. Después de esta variable, añado al final lo siguiente console.log("Fin de datatable") y tampoco me lo muestra en Consola. Gracias de antemano. el 26 abr. 2017 a las 9:53
  • Comprueba que el número de columnas en column se corresponda con el marcado. Si no coinciden falla la ejecución de DataTables
    – user17875
    el 26 abr. 2017 a las 10:33
  • He detectado que si añado {data: null, defaultContent: '<a href="#" class="edit">Editar</a> / <a href="#" class="Eliminar">Delete</a>'} no termina, si lo quito, sí lo carga en el Network pero no lo muestra por pantalla. En el Network aparece lo siguiente: http://127.0.0.1:8000/modelo?_=1493242046059 y su Preview [{id: 1, marca: "HP", modelo: "EliteBook 840", part_number: "44G57TH", coste: 1,…}]. Creo que me falta muy poco. Gracias de antemano. el 26 abr. 2017 a las 21:28
0

Aun pasando el ajax de la siguiente manera, tampoco lo muestra en mi vista.

$(document).ready(function() {
        var datatable = $('#mytable').DataTable({
            ajax: {
                data: [
                {
                    "marca":"Prueba",
                    "modelo": "modelo",
                    "part_number": "12354",
                    "coste": "100",
                    "caracteristicas": "No se que hacer"
                }]
            },
            columns: [
                {data:"marca"},
                {data:"modelo"},
                {data:"part_number"},
                {data:"coste"},
                {data:"caracteristicas"},
                {{--{
                    data: null,
                    defaultContent: '<a href="#" class="edit">Editar</a> / <a href="#" class="remove">Eliminar</a>'
                }--}}

            ]
        });

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.