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