1

Tengo una jquery DataTable que tiene una columna cuyos datos son 1 o 0. Yo, por medio del metodo render, cambio dicho valor por una imagen de la siguiente manera:

    "columns": [
    {data: 'codigo'},
    {data: 'tipolote' },
    {data: 'activo', width: '10', className: 'text-center',
            'render' : function(data, type, row) {
                return (data == 1) ? '<span class="glyphicon glyphicon-ok"></span>' : '<span class="glyphicon glyphicon-remove" value="0"></span>';
            }},
    ...
    ]

El inconveniente es que cuando escribo algo en el textbox de search del DataTable, se genera un error. Si quito la columna Activo, el search se realiza correctamente filtrando lo que corresponda. Entiendo que, al quitar el valor 1 o 0 y poner una imagen, pierdo justamente el valor y no puede hacer la busqueda. Existe alguna forma de subsanar este inconveniente?

2
  • ¿Quieres filtrar por imágenes o quitar el search para esa columna? Commented el 3 nov. 2016 a las 22:04
  • Quisiera poder filtrar por esa columna...obviamente si es posible. Yo hice el reemplazo del valor por la imagen, porque estéticamente queda mejor, pero si no puedo filtrar no me sirve. Commented el 3 nov. 2016 a las 22:06

1 respuesta 1

1

No realiza el filtrado porque no hay texto que filtrar, lo que puedes hacer es colocar una etiqueta label oculta con texto, en este caso tu texto seria 0 o 1.

y dejaría tu código de esta forma:

"columns": [
  {data: 'codigo'},
  {data: 'tipolote' },
  {data: 'activo', width: '10', className: 'text-center',
        'render' : function(data, type, row) {
            return (data == 1) ? '<span class="glyphicon glyphicon-ok"><label style="display: none;">1</label></span>' 
                : '<span class="glyphicon glyphicon-remove" value="0"><label style="display: none;">0</label></span>';
        }},
  ...
]

Te dejo el ejemplo:

$(function() {
    $('#example').DataTable();
} );
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script src="https://cdn.datatables.net/1.10.12/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>Icono</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>62</td>
      <td>
        <span class="fa fa-remove">
          <!--Etiqueta oculta para hacer el filtrado-->
          <label style="display: none;">0</label>
        </span>
      </td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td><span class="fa fa-remove"><label style="visibility: collapse;">0</label></span></td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td><span class="fa fa-remove"><label style="visibility: hidden;">0</label></span></td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td><span class="fa fa-check"><label style="visibility: hidden;">1</label></span></td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td><span class="fa fa-check"><label style="visibility: hidden;">1</label></span></td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td><span class="fa fa-check"><label style="visibility: hidden;">1</label></span></td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td><span class="fa fa-check"><label style="visibility: hidden;">1</label></span></td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td><span class="fa fa-check"><label style="visibility: hidden;">1</label></span></td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td><span class="fa fa-check"><label style="visibility: hidden;">1</label></span></td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td><span class="fa fa-check"><label style="visibility: hidden;">1</label></span></td>
    </tr>
    <tr>
      <td>Herrod Chandler</td>
      <td>Sales Assistant</td>
      <td>San Francisco</td>
      <td>59</td>
      <td><span class="fa fa-check"><label style="visibility: hidden;">1</label></span></td>
    </tr>
    <tr>
      <td>Rhona Davidson</td>
      <td>Integration Specialist</td>
      <td>Tokyo</td>
      <td>55</td>
      <td><span class="fa fa-check"><label style="visibility: hidden;">1</label></span></td>
    </tr>
    <tr>
      <td>Colleen Hurst</td>
      <td>Javascript Developer</td>
      <td>San Francisco</td>
      <td>39</td>
      <td><span class="fa fa-check"><label style="visibility: hidden;">1</label></span></td>
    </tr>
    <tr>
      <td>Sonya Frost</td>
      <td>Software Engineer</td>
      <td>Edinburgh</td>
      <td>23</td>
      <td><span class="fa fa-check"><label style="visibility: hidden;">1</label></span></td>
    </tr>
  </tbody>
</table>

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.