使用单选按钮和复选框过滤HTML表

Question

I don't know if this is even possible, though I sure it is, just beyond my ability.

I want to filter a table generated from an SQL query using a set buttons in the browser, i.e. have checkboxes for if a task has been completed or not, and radio buttons for the timeframe (e.g. last 24hrs, week to date, date range etc..). All without constantly refreshing the page.

Can someone point me in the right direction, I'm not asking for someone to do it for me, but I'm self taught and need some guidance. Any help appreciated.

These are the filters I would like to use:

        <form  id="filters">
            <input type="checkbox" id="live" name="filter_live" value="Live" /> <label for="live">Outstanding</label>
            <input type="checkbox" id="completed" name="filter_completed" value="completed" /> <label for="completed">Complete</label>
            |
            <input type="radio" id="last24" name="filter_radio" checked="checked" onchange="return hide_range(this.checked);"/><label for="last24">Last 24hrs</label>
            <input type="radio" id="WTD" name="filter_radio" onchange="return hide_range(this.checked);"/><label for="WTD">WTD</label>
            <input type="radio" id="last_week" name="filter_radio" onchange="return hide_range(this.checked);"/><label for="last_week">Last Week</label>
            <input type="radio" id="range" name="filter_radio" onchange="return show_range(this.checked);" /><label for="range">Range</label>
                <div id="date_range" style="display: none;">
                    <br />
            <label for="from">From: </label><input type="text" id="from" name="from"/>
            <label for="to">To: </label><input type="text" id="to" name="to" />
            <input type="button" value="Go" />

                </div>
        </form>

I would like to use them on the following table:

 <table class="general">
        <tr>
            <th colspan='8'>Current Tasks</th>
        </tr>
            <tr>
                <th>Created</th>
                <th>Updated</th>
                <th>Location</th>
                <th>Task</th>
                <th>Priority</th>
                <th>Status</th>
                <th>Completed</th>
                <th>Action</th>
            </tr>
<?php
    while($row = mysql_fetch_array($eng_result)) :  ?>

            <tr>
<form action="Eng_update.php" method="post">

 <td><?php if($row['Created'] == NULL){echo "";}else{ echo date("d/m/y",  $row['created_ts']);} ?></td>
<td><?php if($row['LastModified']==NULL){echo "";} else {echo date("d/m/y", $row['Last_Modified_ts']);} ?></td>
<td><?php echo $row['Location'] ?><input type="hidden" name ="eng_loc[]" value="<?php echo $row['Location']; ?>" /></td>
<td><?php echo $row['Task'] ?><input type="hidden" name="eng_task[]" value="<?php echo $row['Task']; ?>" /></td>
<td><?php echo $row['Priority'] ?><input type="hidden" name="eng_priority[]" value="<?php echo $row['Priority']; ?>"</td>
<td><?php echo $row['Status'] ?><input type="hidden" name="eng_status[]" value="<?php echo $row['Status']; ?>"</td>
<td>
    <?php if($row['Completed']==1){echo "yes";} else {echo "no";}?>
    <input type="hidden" name="eng_task_complete[]" value="<?php echo $row['Completed'];?>"
</td>
    <td>
        <input type="hidden" name="update_id[]" value="<?php echo $row['ID']; ?>" />
        <input type="submit" value="Update" onClick="return checkAction('Do you wish to update the status of this task?')"/>

    </td>
</form>
            </tr>
<?php endwhile; ?>

    </table>

Thanks for taking the time to look :)

Answer 1

There is a jquery plugin called DataTables (if you are familiar with JQuery, this will be a breeze to use): http://datatables.net/

It has lots of features for sorting/filtering your data and even has the option to load data dynamically (through AJAX).

I think you want functionality like this: http://datatables.net/release-datatables/examples/api/multi_filter.html

edit: for date ranges, create a custom sorting function, a similar question is answered here: http://www.datatables.net/forums/discussion/7218/sort-column-by-numerical-range/p1