jquery datatables选择搜索

Question

我在我的应用程序中使用jquery数据表，但搜索忽略html选择标记值。我能够使用输入标记的值进行搜索。

如何扩展数据表以搜索选择标签？

<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中的id和参数必须单独设置为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(); 
} 

它设置是隐藏的附加列，但搜索。与选择的柱子是不可搜索的。

对select数据表的每次更改都会为隐藏列获取更改后的值。 （setselect可以正常功能，这里是一个全球性的窗口功能，因此它在小提琴的onload的作品）

不是一个非常优雅的或动态而是hackerish方式这一点，但它的工作原理here