Question

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

如何扩展数据表以搜索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>

当我搜索gecko时，这是一个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和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();
}

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

对select数据表的每次更改都会获得隐藏列的更改值。（setselect可以是一个普通函数，这里是一个全局窗口函数，所以它在fiddles onload中工作）

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

jquery数据表选择搜索

1 个答案: