Jquery DataTables with column image fails the search

Question

Jquery DataTables with column image fails the search

Navigation

#1 by (1 votes)

1

I have a jquery DataTable that has a column whose data is 1 or 0. I, by means of the render method, change that value for an image as follows:

    "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>';
            }},
    ...
    ]

The drawback is that when I write something in the search textbox of the DataTable, an error is generated. If I remove the Active column, the search is done correctly filtering what corresponds. I understand that, when I remove the value 1 or 0 and put an image, I just lose the value and can not do the search. Is there any way to correct this problem?

jquery datatables

asked by Emiliano Torres 03.11.2016 в 23:01

source

1 answer

Why it does not work Var Options Min and Max in a gauge chart loop Google How to put condition in MySQL query

score 1 · Accepted Answer

It does not perform filtering because there is no text to filter, what you can do is place a label label hidden with text, in this case your text would be 0 or 1.

and I would leave your code in this way:

"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>';
        }},
  ...
]

I'll give you the example:

$(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>