Jquery DataTables с колонной изображение бьет козырем search

У меня есть jquery DataTable, у которого есть колонна, данных которой 1 или 0. Я, посредством метода render, меняю вышеупомянутую стоимость на изображение следующего способа:

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

Недостаток состоит в том, что, когда я пишу что-то в textbox search DataTable, производится ошибка. Если я снимаю колонну, Я Включаю, search осуществляется правильно выдавая то, что соответствует. Я понимаю, что, когда 1 или 0 снимают стоимость и помещать изображение, я теряю именно стоимость, и он не может делать поиски. Существует какой-то способ исправлять этот недостаток?

1
задан 31.05.2017, 20:56
1 ответ

Он не реализует выданного, потому что нет текста, что просачиваться, что ты можешь делать, состоит в том, чтобы размещать этикетку скрытые label с текстом, в этом случае твоего текста было бы 0 или 1.

и dejarГ - в тебя cГіdigo, таким образом:

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

оставил Тебе пример:

$(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
ответ дан 24.11.2019, 12:45

Теги

Похожие вопросы