Datatables jquery数据表选择搜索

我在我的应用程序中使用jquery datatables，但是搜索忽略了html select标记值。不过，我可以使用input标记值进行搜索

如何扩展datatables以同时搜索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>

渲染引擎
浏览器
月台
引擎版本
壁虎
三叉戟
极速
急板地
互联网
浏览器4.0
壁虎
三叉戟
极速
急板地
互联网
浏览器5.0
壁虎
三叉戟
极速
急板地
互联网
探索者5.5
壁虎
三叉戟
极速
急板地
互联网
探险家6
壁虎
三叉戟
极速
急板地
Internet Explorer 7
壁虎
三叉戟
极速
急板地
AOL浏览器（AOL桌面）
壁虎
三叉戟
极速
急板地
火狐1.0

---

当我搜索gecko时，这里有一个JSFIDLE，它不过滤值

，这是一种方法：

将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>

它还设置了一个隐藏但可搜索的附加列。带有选择项的列不可搜索

每次更改select datatable时，都会为隐藏列获取一个已更改的值。（setselect可以是一个普通函数，在这里是一个全局窗口函数，因此它可以在加载小提琴时工作）

---

这不是一种非常优雅或动态但相当骇客的方式，但它是有效的

对于datatables 1.10.x现在推出有没有更好的解决方案？

$(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();
}