jquery datatables select search

Question

I am using jquery datatables in my application but the search ignores the html select tag value.I am able to search using the value of input tag though.

How can i extend the datatables to also search for the select tag ?

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

Here is a jsfiddle http://jsfiddle.net/hBa3a/ when I search for gecko It doesn't filter the value

mainguy · Accepted Answer · 2014-02-19 13:02:53Z

This would be way to do it:

Change your tr definitions to

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

The ids and the parameter in onchange have to be set individualy for ech row.

Use this script

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

It sets up an additional column which is hidden, but searchable. The colum with the selects is not searchable.

On each change of a select datatable gets a changed value for the hidden column. (setselect can be a normal function, is a global window function here so it works in fiddles onload)

Not a very elegant or dynamical but rather hackerish way to this but it works here

is there any better solution for datatables 1.10.x being out now?

Collectives™ on Stack Overflow

jquery datatables select search

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related