Использование DataTables, как указать элемент внутри ‹td› для поиска

Я использую jquery DataTables, и у меня есть таблица с ячейками, каждая <td> содержит <span> и скрытый <select>, теперь все, что я хочу, это отфильтровать только текст внутри <span>, а не все содержимое <td>, которое также содержит скрытый элемент <select>.

Я использую базовую конфигурацию DataTables:

$(document).ready( function () {
    $('#table_id').DataTable();
} );

Я уже пару дней пытаюсь на этом сайте, сайте Datatables, гуглить, но не смог найти ответ, поэтому, пожалуйста, помогите Заранее спасибо

Код генерируется на сервере, но результирующая таблица выглядит примерно так: Обратите внимание, что: элемент <select> скрыт с помощью css

<tr>
     <td>
        <span>Text</span>
        <select>
        <option>option1</option>
        <option>option2</option>
        ....
        </select>
        </td>
    <td>
        <span>Text</span>
        <select>
        <option>option1</option>
        <option>option2</option>
        ....
        </select>
        </td>   
        </tr>
        ...

javascript jquery datatables-1.10 jquery-datatables
person jacobs    schedule 28.03.2015    source источник
comment
Можно ваш код?   -  person D4V1D    schedule 28.03.2015
comment
@ D4V1D, я отредактировал исходный пост, включив в него пример кода.   -  person jacobs    schedule 28.03.2015

Ответы (1)


arrow_upward
4
arrow_downward

Вы можете использовать приведенный ниже код для поиска только <span> внутри ячеек в определенных столбцах. Обратите внимание, что я использовал "targets": [0, 1] для таргетинга на первый и второй столбец только на основе вашего HTML-кода, настройте в соответствии с вашими потребностями.

$('#table_id').DataTable({
   "columnDefs": [{
      "targets": [0, 1],
      "render": function ( data, type, full, meta ) {
         if(type === 'filter'){
            return $('#table_id').DataTable().cell(meta.row, meta.col).nodes().to$().find('span').text();
         } else {
            return data;
         }
      }
   }]
});

Кроме того, вы можете использовать атрибут data-search для элемента <td>, чтобы указать значение, используемое для фильтрации, тогда дополнительный код инициализации не требуется. См. пример ниже:

<tr>
    <td data-search="Text">
        <span>Text</span>
        <select>
        <option>option1</option>
        <option>option2</option>
        ....
        </select>
    </td>
    <td data-search="Text">
        <span>Text</span>
        <select>
        <option>option1</option>
        <option>option2</option>
        ....
        </select>
    </td>   
</tr>

См. руководство или example для получения дополнительной информации об data- атрибутах.

person Gyrocode.com    schedule 27.04.2015