DataTables

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>
<button id="filter">filter < 50</button>
<table id="example">
    <thead>
      <tr>
        <th>value</th>
      </tr>
    </thead>
    <tbody>
        <tr><td>10</td></tr>
        <tr><td>55</td></tr>
        <tr><td>11</td></tr>
        <tr><td>345</td></tr>
        <tr><td>76</td></tr>
        <tr><td>51</td></tr>
        <tr><td>50</td></tr>
        <tr><td>49</td></tr>
        <tr><td>60</td></tr>
        <tr><td>80</td></tr>
        <tr><td>70</td></tr>
        <tr><td>30</td></tr>
        <tr><td>60</td></tr>
        <tr><td>110</td></tr>
        <tr><td>90</td></tr>
    </tbody>
</table>
<button id="buildChart">create chart</button>
<div id="chart"></div>

JavaScript

table = $('#example').DataTable();

$("#filter").click(function() {
    $.fn.dataTable.ext.search.push(
        function( settings, data, dataIndex ) {
            return parseFloat(data[0])<50
                ? true
                : false
        }     
    );
    table.draw();
    $.fn.dataTable.ext.search.pop();
});