3

Estoy usando datatables server side de Yajra para Laravel y tengo lo siguiente:

var table = $("#dt_user_draw").DataTable({
  destroy: true,
  processing: true,
  responsive: true,
  serverSide: true,
  ordering: false,
  "ajax": {
    "method": "GET",
    "url": 'url'
  },
  "columns": [{"data": "user"},
              {"data": "email"},
              {"data": "registered_at",},
              {"render": function (data, wea, row) {
                          return '<a href="" @click="showDrawUser" ><i class="nav-icon far fa-eye fa-fw " aria-hidden="true" title="Ver Draw"></i></a></li>';
                          }
              }]
  });

Dentro del render en la ultima columna, tengo un @click="showDrawUser", el tema es que no renderiza y no funciona el click y si se inspecciona elemento aparece el @click y no encuentro solución a esto.

1 respuesta 1

1

No creo que eso pueda funcionar. Tanto DataTables como Vue parten de la base que controlan el DOM, y esas suposiciones se contradicen. Cuando DataTables inserta un elemento al DOM y trata de añadirle un listener de Vue como @click, a esas alturas Vue ya rendereó el DOM e interpretó los listeners. No va a escuchar directivas añadidas a mano por DataTables.

Yo te aconsejaría usar un plugin de datatables para vue. Pero para resolver tu duda puntual, lo que podrías hacer es dibujar una tabla HTML via Vue y después instanciar DataTables sobre ella.

Por ejemplo, en el componente:

export default {
  name: 'Dtt',
  data() {
    return {
      persons: [],
    };
  },
  methods: {
    showDrawUser(person) {
      console.log('showDrawUser', person);
    },
    initDtt() {
      $(document).ready(() => {
        $("#dt_user_draw").DataTable({
          "columns": [
            { "data": "user" },
            { "data": "email" },
            { "data": "registered_at" },
            { "data": "actions" }
          ]
        });
      });
    }
  },
  mounted() {
    $.ajax({
      "method": "GET",
      "url": 'url/example',
      dataType: 'json'
    }).then((res) => {
      this.persons = res.data;
      this.initDtt();
    });
  }
};

Lo que hace es: al montar el componente, hace un llamado, se trae la data. Esa data tiene la forma:

{
  "data": [{
      "user": "Tiger Nixon",
      "email": "[email protected]",
      "registered_at": "2011/04/25"
    },
    {
      "user": "Garrett Winters",
      "email": "[email protected]",
      "registered_at": "2011/07/25"
    },
    {
      "user": "Ashton Cox",
      "email": "[email protected]",
      "registered_at": "2009/01/12"
    },
    {
      "user": "Cedric Kelly",
      "email": "[email protected]",
      "registered_at": "2012/03/29"
    },
    {
      "user": "Airi Satou",
      "email": "[email protected]",
      "registered_at": "2008/11/28"
    }
  ]
}

tú asignas res.data a la propiedad persons del componente.

En el HTML tú tienes:

<div class="dtt">
  <table id="dt_user_draw">
    <thead>
      <th>user</th>
      <th>email</th>
      <th>registered</th>
      <th>action</th>
    </thead>
    <tbody>
      <tr v-for="person in persons">
        <td>{{person.user}}</td>
        <td>{{person.email}}</td>
        <td>{{person.registered_at}}</td>
        <td>
          <a @click="showDrawUser(person)">
            <i class="nav-icon far fa-eye fa-fw " aria-hidden="true" title="Ver Draw"></i>
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

De manera que, estando poblada la propiedad persons dibuja las filas de la tabla declarando sus listeners y recién entonces invocas DataTables para que haga lo mínimo: proveer paginación, sorting y búsqueda.

Tu Respuesta

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

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