Cómo agregar botones “editar y eliminar” al datatables js al hacer el procesamiento desde el servidor?

publicado por: Anonymous

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

solución

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.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published.