jquery datatables select search

Question

Я использую jquery datatables в своем приложении, но поиск игнорирует значение тега html select. Я могу искать, используя значение тега ввода.

Как я могу расширить данные для поиска тега select?

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> 
    <thead> 
     <tr> 
      <th>Rendering engine</th> 
      <th>Browser</th> 
      <th>Platform(s)</th> 
      <th>Engine version</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="gradeX"> 
      <td><select> 
        <option selected="selected">Gecko</option> 
        <option>Trident</option> 
        <option>Webkit</option> 
        <option>Presto</option> 
       </select></td> 
      <td>Internet 
       Explorer 4.0</td> 
      <td><input type="text" class="engine" value="Win 95+"></td> 
      <td class="center"><input type="text" class="version" value="4"></td> 
     </tr> 
     <tr class="gradeC"> 
      <td><select name="select"> 
        <option >Gecko</option> 
        <option selected="selected">Trident</option> 
        <option>Webkit</option> 
        <option>Presto</option> 
       </select></td> 
      <td>Internet 
       Explorer 5.0</td> 
      <td><input type="text" class="engine" value="Win 95+"></td> 
      <td class="center"><input type="text" class="version" value="5"></td> 
     </tr> 
     <tr class="gradeA"> 
      <td><select name="select2"> 
        <option >Gecko</option> 
        <option>Trident</option> 
        <option selected="selected">Webkit</option> 
        <option>Presto</option> 
       </select></td> 
      <td>Internet 
       Explorer 5.5</td> 
      <td><input type="text" class="engine" value="Win 95+"></td> 
      <td class="center"><input type="text" class="version" value="5.5"></td> 
     </tr> 
     <tr class="gradeA"> 
      <td><select name="select3"> 
        <option >Gecko</option> 
        <option>Trident</option> 
        <option>Webkit</option> 
        <option selected="selected">Presto</option> 
       </select></td> 
      <td>Internet 
       Explorer 6</td> 
      <td><input type="text" class="engine" value="Win 98+"></td> 
      <td class="center"><input type="text" class="version" value="6"></td> 
     </tr> 
     <tr class="gradeA"> 
      <td><select name="select4"> 
        <option selected="selected">Gecko</option> 
        <option>Trident</option> 
        <option>Webkit</option> 
        <option>Presto</option> 
       </select></td> 
      <td>Internet Explorer 7</td> 
      <td><input type="text" class="engine" value="Win XP SP2+"></td> 
      <td class="center"><input type="text" class="version" value="7"></td> 
     </tr> 
     <tr class="gradeA"> 
      <td><select name="select5"> 
        <option >Gecko</option> 
        <option selected="selected">Trident</option> 
        <option>Webkit</option> 
        <option>Presto</option> 
       </select></td> 
      <td>AOL browser (AOL desktop)</td> 
      <td><input type="text" class="engine" value="Win XP"></td> 
      <td class="center"><input type="text" class="version" value="6"></td> 
     </tr> 
     <tr class="gradeA"> 
      <td><select name="select6"> 
        <option >Gecko</option> 
        <option>Trident</option> 
        <option selected="selected">Webkit</option> 
        <option>Presto</option> 
       </select></td> 
      <td>Firefox 1.0</td> 
      <td><input type="text" class="engine" value="Win 98+/OSX.2+"></td> 
      <td class="center"><input type="text" class="version" value="1.7"></td> 
     </tr> 
</table> 

Вот jsfiddle http://jsfiddle.net/hBa3a/ при поиске геккон Это не фильтрует значения

Answer 1

Это будет способ сделать это:

Изменить ваши определения Tr к

 <tr class="gradeX"> 
     <td><select onChange="setselected(1)" id="sel_1"> 
     <option selected="selected">Gecko</option> 
     <option>Trident</option> 
     <option>Webkit</option> 
     <option>Presto</option> 
     </select></td> 
     <td id="ssel_1">Gecko</td> 
     <td>Internet 
      Explorer 4.0</td> 
     <td><input type="text" class="engine" value="Win 95+"></td> 
     <td class="center"><input type="text" class="version" value="4"></td> 
    </tr> 

Иды и параметр в onchange должны быть установлены индивидуально для строки ech.

Используйте этот скрипт

$(function(){ 
    oTable = $('#example').dataTable({ 
        "sPaginationType": "full_numbers", 

       "aoColumnDefs": [ 
        {"bSearchable":false, "bVisible": true, "aTargets": [ 0 ] }, 
        { "bVisible": false ,"bSearchable":true, "aTargets": [ 1 ] }, 
        { "bVisible": true, "aTargets": [ 2 ] }, 
        { "bVisible": true , "aTargets": [ 3 ] }, 
        { "bVisible": true , "aTargets": [ 4 ] } 
       ] 
      }); 

}) 

window.setselected= function(id){ 
    oTable.fnSettings().aoData[id-1]._aData[1]=$("#sel_"+id+" option:selected").text(); 
    oTable.fnDraw(); 
} 

Это создает дополнительный столбец, который скрыт, но для поиска. Колон с выборками не доступен для поиска.

При каждом изменении выбора datatable получает измененное значение для скрытого столбца. (Setselect может быть нормальной функцией, является глобальная функция окна здесь, так что работает в скрипках OnLoad)

Не очень элегантный и динамичный, а hackerish путь к этому, но это работает here