1

Buenas ante todo, estoy realizando el ejemplo de Datatable de mostrar datos adicionales en una fila. En el campo de la imagen en vez de usar una imagen externa quiero usar la que traen los iconos de jquery, por lo que cuando construyo mi objeto json pongo

<a src="" class="ui-icon ui-icon-circle-plus" />

y perfecto pero si lo pongo como parámetro de className me muestra todas las imágenes de ui-icon.

{
    "data": null,
    "className": "ui-icon ui-icon-circle-plus",
    "orderable": false,
    "defaultContent": ''
}

que estaré haciendo mal?

1 respuesta 1

0

Al cargar la datatable, accedo al numero de columna que me interesa, mediante la propiedad createdRow.

La cinco en este caso:

$('td', row).eq(5)

Una vez llamada (por pereza de no borrarlos a mano) vacio los campso de esa columna y hago un append insertando asi el html que te interesa.

En nuestro caso:

<a src="" class="ui-icon ui-icon-circle-plus" />

Aquí te dejo el ejemplo:

$(document).ready(function() {
    $('#example').DataTable( {
        "paging":   false,
        "ordering": false,
        "info":     false,
        "createdRow": function ( row, data, index ) {
            $('td', row).eq(5).text('');
            $('td', row).eq(5).append('<a src="" class="ui-icon ui-icon-circle-plus" />');
        }
    } );
} );
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
      <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>ICONO</th>
      </tr>
  </thead>
  <tfoot>
      <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>ICONO</th>
      </tr>
  </tfoot>
  <tbody>
      <tr>
          <td>Tiger Nixon</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>$320,800</td>
      </tr>
      <tr>
          <td>Garrett Winters</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>63</td>
          <td>2011/07/25</td>
          <td>$170,750</td>
      </tr>
      <tr>
          <td>Ashton Cox</td>
          <td>Junior Technical Author</td>
          <td>San Francisco</td>
          <td>66</td>
          <td>2009/01/12</td>
          <td>$86,000</td>
      </tr>
      <tr>
          <td>Cedric Kelly</td>
          <td>Senior Javascript Developer</td>
          <td>Edinburgh</td>
          <td>22</td>
          <td>2012/03/29</td>
          <td>$433,060</td>
      </tr>
      <tr>
          <td>Airi Satou</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>33</td>
          <td>2008/11/28</td>
          <td>$162,700</td>
      </tr>
  </tbody>
</table>

4
  • Si pero el problema que eso es con datos estaticos o luego de cargados habria que insertarlos uno a uno. yo hablo mediante la funcion className de datatable, porque de los contrario lo hago desde python como lo tenia y luego con jQuery lo modifico como quiera.
    – linurandy
    el 6 oct. 2017 a las 7:24
  • @linurandy echale un ojo a este entonces , que usa datos dinámicos. Aqui si quiero mostrartelo para que ejecute no podia cargartelos dinamicamente, por eso no lo he hecho.
    – GDP
    el 6 oct. 2017 a las 7:27
  • Gracias de antemano por tu tiempo pero quiero hacer algo como esto: datatables.net/examples/api/row_details.html pero el problema esta el paramentro className que quiero en vez de definir un estilo css usar el que trae jquery-ui. Y lo que pasa es que sale las imagenes completas en vez de el icono de mas nada mas.
    – linurandy
    el 6 oct. 2017 a las 7:35
  • @linurandy tras el como esto no has colgado nada xD
    – GDP
    el 6 oct. 2017 a las 7:36

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.