DataTables Custom search

DataTables Examples

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<table id="example">
    <thead>
        <tr>
            <th>col #1</th>
            <th>col #2</th>
            <th><input type="text" id="search"/></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>content</td><td>text</td><td><i class='fa fa-arrows'></i><input type='hidden' value='0'/></td>
        </tr>
        <tr>
            <td>more content</td><td>more text</td><td><i class='fa fa-bar-chart'></i><input type='hidden' value='1'/></td>
        </tr>    
        <tr>
            <td>content #2</td><td>text #2</td><td><i class='fa fa-user'></i><input type='hidden' value='2'/></td>
        </tr>
        <tr>
            <td>html</td><td>jkkklkds</td><td><i class='fa fa-user'></i><input type='hidden' value='2'/></td>
        </tr>
    </tbody>
</table>

CSS

#search {
    width: 30px;   
}

JavaScript

$('#example').DataTable().search("html").draw();