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

Question

我什至不知道这是否可能，但我确定这是可能的，只是超出了我的能力范围。

我想使用浏览器中的一组按钮过滤从 SQL 查询生成的表格，即具有用于确定任务是否已完成的复选框，以及用于时间范围的单选按钮(例如过去 24 小时、本周至今、日期范围等)。所有这些都无需不断刷新页面。

有人能给我指出正确的方向吗，我不是要别人帮我做，但我是自学的，需要一些指导。任何帮助表示赞赏。

这些是我想使用的过滤器:

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

我想在下表中使用它们:

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

感谢您抽出时间来看:)

Answer 1

有一个名为 DataTables 的 jquery 插件(如果您熟悉 JQuery，使用起来会很轻松):http://datatables.net/

它有很多用于排序/过滤数据的功能，甚至可以选择动态加载数据(通过 AJAX)。

我认为您需要这样的功能:http://datatables.net/release-datatables/examples/api/multi_filter.html

编辑: 对于日期范围，创建自定义排序函数，此处回答了类似的问题:http://www.datatables.net/forums/discussion/7218/sort-column-by-numerical-range/p1