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

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

1 个答案: