1

Tengo un problema al usar DataTables al procesar datos desde el servidor, mi problema consiste al crear una tabla con información, cada fila debe tener las opciones de editar y eliminar, la cual no logro solucionar.

Mi código de como proceso la información de JavaScript:

$('#tablaLocalidad').DataTable({
       "processing": true,
       "serverSide": true,
       "ajax": "{{ route('datalocalidades') }}",
       "columns":[
           { data: "idLocalidad" },
           { data: "nombreLocalidad" },
           { data: "nombreMunicipio" },
           {
              mRender: function ( data, type, row, meta ) {
              return '<a href="" class="btn btn-success btn-sm fa fa-pencil-square-o" data-toggle="modal" data-target="#editarLocalidad" title="Editar" v-on:click.prevent="editarLocalidad()"> Editar &nbsp</a>';

             }

           }

       ]
    });

solo logro visualizar un botón la cual es el de editar, pero no logro que se ejecute el código del evento que lo tengo en vue: El código de Vue solo es una función así:

editarLocalidad:function(){
  console.log("se ejecuto la function...");
}

Solo es un ejemplo para ver si entra a ejecutar y ese es un de los problemas que no logro solucionar.

El otro problema es que no se como agregar otro botón que es el de Eliminar, cuando creo otro mRender me marca error, en este caso como seria para agregar dos botones dentro de Datable?

Lo que intente hacer fue esto:

   {
        mRender: function ( data, type, row, meta ) {
        return '<a href="" class="btn btn-success btn-sm fa fa-pencil-square-o" data-toggle="modal" data-target="#editarLocalidad" title="Editar" v-on:click.prevent="editarLocalidad()"> Editar &nbsp</a>';

       }

    },
{
        mRender: function ( data, type, row, meta ) {
        return '<a href="" class="btn btn-success btn-sm fa fa-pencil-square-o" data-toggle="modal" data-target="#editarLocalidad" title="Editar" v-on:click.prevent="editarLocalidad()"> Editar &nbsp</a>';

       }

    }

Pero no me funciona, alguien sabe como puedo solucionar esto?

Otro dado es que para el procesamiento del lado del procesador estoy usando yajra

3
  • Y por qué no retornas los botones desde el servidor? Estás utilizando algún paquete como laravel-datatables?
    – Dev. Joel
    el 15 feb. 2019 a las 17:29
  • Estoy usando yajra con datatables, pero en este caso no seria lo mismo? el 15 feb. 2019 a las 17:34
  • Luis, añadí la forma de renderizar los botones desde el backend en la respuesta. el paquete te da la opción de añadir los botones a la respuesta ;)
    – Dev. Joel
    el 15 feb. 2019 a las 17:50

1 respuesta 1

0

Como en los comentarios, añadió que está utilizando Laravel-datatables, no sería necesario renderizar los botones desde el Cliente, puede hacerse perfectamente con el paquete.

Solo es cuestión que siga los siguientes pasos.

Primero que añada una nueva columna a su datatables, con su nombre respectivo, para esto caso, actions, el parámetro pasado para la función anónima en addColumn ($usuario) será una instancia del modelo seleccionado (User) por lo cuál podemos acceder a sus atributos y relaciones si fuese necesario.

$model = User::with('relation'); //obtenemos los usuarios y su relación
return DataTables::eloquent($model)
        ->addColumn('actions', function ($usuario) {
             //Aquí $usuario es una instancia del modelo User
             // podremos acceder a sus atributos y relaciones
             return '<p>'. $usuario->name.'</p>'; //mostramos el nombre del usuario
         })

Luego añadir la columna a rawColumns para que renderize html

->rawColumns(['actions'])

Desde el FrontEnd, solo deberá añadir la columna a su array de columns de dataTables.JS con las opciones para que no se ordene y tampoco tome en cuenta para la búsqueda dicha columna.

"columns":[
           { data: "idLocalidad" },
           { data: "nombreLocalidad" },
           { data: "nombreMunicipio" },
           { data: "actions",orderable:false, searchable:false },

Para la integración de la respuesta con VueJs, existe poca documentación sobre esto en el paquete, pero, sería mejor utilizar componentes datatables con Vue que ya existen en la comunidad.

6
  • Creo que ya me quedo claro como procesarlo desde el servidor e hice una prueba con el ejemplo que me proporcionaste, lo unico que si me falla o pase por alto es que en la parte fue esto, tomando tu ejemplo: DataTables::eloquent($model) $model esta obteniendo todo el registro del mdelo, pero ahora si quiero obtener el registro de un dato de todo eso como se le pasasaria a este lado >addColumn('actions', function ($usuario) ....? el 15 feb. 2019 a las 18:28
  • @LuisHernandez sí, usuario será una instancia del modelo que desee, $model es la query que desea obtener, aquí puede utilizar los métodos with para cargar relaciones, entre otros que posee eloquent.
    – Dev. Joel
    el 15 feb. 2019 a las 19:45
  • No entiendo eso de la instancia de usuario al model, si en este caso quisiera pasarle a return '<p>contenido html de los botones</p>'; un dato especifico a la fila, como seria? porque veo que usaste un ejemplo donde pasas usuario, pero de donde sale eso? algo asi a lo que me refiero <p>$usuario->nombre</p>,algo asi seria el ejemplo que quiero hacer, como funciona eso? ajajaja no se como explicarlo, es que esta muy confuso el 15 feb. 2019 a las 19:57
  • se supone que cada registro o fila tiene un dato especificio, eso se le pasaria al <p>contenido html de los botones</p> para que se visualice, pero en DataTables::eloquent($model) estar retornando todo los registros el 15 feb. 2019 a las 19:59
  • @LuisHernandez he actualizado la respuesta con un ejemplo más entendible, espero ayude a comprender mejor.
    – Dev. Joel
    el 15 feb. 2019 a las 20:10

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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