HTML Table Filter Generator script | Examples

Set numeric ascending/descending order for drop-down menu filters and enable refreshing filters behavior

by koalyptus

HTML

<script src="http://tablefilter.free.fr/TableFilter/tablefilter_all_min.js"></script>
<link rel="stylesheet" href="http://tablefilter.free.fr/TableFilter/filtergrid.css">
<p>Set numeric ascending/descending order for drop-down menu filters and enable refreshing filters behavior</p>
<table id="table10" cellpadding="0" cellspacing="0">
    <tr>
        <th>World Regions</th>
        <th>Population ( 2007 Est.)</th>
        <th>Population % of World</th>
        <th>% Population ( Penetration )</th>
        <th>Usage % of World</th>
    </tr>
    <tr>
        <td>Africa</td>
        <td>933 448 292</td>
        <td>14.2</td>
        <td>3.5</td>
        <td>3.0 %</td>
    </tr>
    <tr>
        <td>Asia</td>
        <td>3 712 527 624</td>
        <td>56.5</td>
        <td>10.5</td>
        <td>35.6 %</td>
    </tr>
    <tr>
        <td>Europe</td>
        <td>809 624 686</td>
        <td>12.3</td>
        <td>38.6</td>
        <td>28.6 %</td>
    </tr>
    <tr>
        <td>Middle East</td>
        <td>193 452 727</td>
        <td>2.9</td>
        <td>10.0</td>
        <td>1.8 %</td>
    </tr>
    <tr>
        <td>North America</td>
        <td>334 538 018</td>
        <td>5.1</td>
        <td>69.4</td>
        <td>21.2 %</td>
    </tr>
    <tr>
        <td>Latin America / Caribbean</td>
        <td>556 606 627</td>
        <td>8.5</td>
        <td>16.0</td>
        <td>8.1 %</td>
    </tr>
    <tr>
        <td>Oceania / Australia</td>
        <td>34 468 443</td>
        <td>0.5</td>
        <td>53.5</td>
        <td>1.7 %</td>
    </tr>
</table>

JavaScript

var table10_Props = {
    paging: true,
    paging_length: 3,
    col_2: 'select',
    col_3: 'select',
    sort_num_asc: [2],
    sort_num_desc: [3],
    refresh_filters: true
};
var tf10 = setFilterGrid("table10", table10_Props);