首页 > 解决方案 > 带有选择过滤器的表

问题描述

我有一个包含 4 列的表,我想通过选择表单对其进行排序。

例如,在这里我有一个选择来对类型列(第 3 列)进行排序,有 3 种可能性: - Site Sportif - Site de bloc - Terrain d'aventure

你怎么做呢?

<div class="stages">                 
<form id="form-sne-filtre" method="post">
    <div>
        <select name="type" id="select_1">
            <option value=""><?php _e('Filtrer par type'); ?></option>
            <option value="0"> <?php _e('Site Sportif'); ?></option>
            <option value="1"><?php _e('Site de bloc'); ?></option>
            <option value="2"><?php _e('Terrain d\'aventure'); ?></option>
        </select>
    </div>
</form>

<table id="myTable">
<thead>
    <tr>
        <th><?php _e('Nom'); ?></th>            
        <th><?php _e('Ville'); ?></th>
        <th><?php _e('Type'); ?></th>
        <th><?php _e('Niveau'); ?></th>
    </tr>
</thead>

<tbody>
    <?php foreach($_POST as $key => $value){
        if($value != "") $args[$key] = $value;
    }
    foreach($snes->items as $sne) { ?>
        <tr>
            <td><a href="<?php bloginfo('url'); ?>/sne-fiche/<?php echo $sne->ID_SNE; ?>/"><?php echo $sne->SNE_VILLE; ?> <?php echo $sne->SNE_NOM; ?></a></td>
            <td><?php echo $sne->SNE_COMMUNES; ?></td>
            <td><?php
$array = array(0 => __('Site sportif'),1 => __('Site de bloc'), 2 => __('Terrain d\'aventure'));
echo $array[$sne->SNE_TYPESITE];
?></td>
            <td><?php _e("Nombre de voies : "); ?><?php echo $sne->SNE_NBRVOIES; ?> <?php _e('De'); ?> <?php echo $sne->SNE_NIVEAUVOIE_MIN; ?> <?php _e('à'); ?> <?php echo $sne->SNE_NIVEAUVOIE_MAX;; ?></td> 
        </tr>
    <?php } ?>

</tbody>
</table>
</div>

标签: phpsqlselecthtml-table

解决方案


如果您使用 jQuery,您可以在用户选择排序选项时提交表单:

1.绑定事件

在标签下方添加以下div.stages标签

<script>
$("#select_1").on("change", function(e) => {
    $("#form-sne-filtre").submit();
})
</script>

2.在php中处理post参数

<?php 
   $sort = $_POST["type"] ?? "";
   $snes = sortSnes($snes, $sort); // you have to implement sortSnes function by yourself, don't ask me
?>
<tbody>
<?php foreach($snes as $sne): ?>
<tr>
   // render table rows
</tr>
<?php endforeach;?>
</tbody>

推荐阅读