Home / Questions / 31643
Accepted
Emiliano Torres
Asked: 2020-11-04 14:01:30 +0800 CST 2020-11-04 14:01:30 +0800 CST

Jquery DataTables with image column fails on fetch

  • 772

I have a jquery DataTable that has a column whose data is 1 or 0. I, through the render method, change said value for an image in the following 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"></span>' : '<span class="glyphicon glyphicon-remove" value="0"></span>';
            }},
    ...
    ]

The drawback is that when I type 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 lose just the value and cannot do the search. Is there any way to remedy this problem?

jquery

1 Answers

  1. Best Answer

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

    and leave your code like this:

    "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 leave 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>

    • 1