下拉菜单 - 使用选择选项筛选表

时间:2016-10-14 15:43:50

标签: jquery html twitter-bootstrap

我希望当用户点击下拉菜单选项时,该表会使用此选项过滤记录。

在我过滤此记录的那一刻,表格的内容消失了,这是因为我使用标记<tr>来过滤它。

我的代码:

<div class="dropdown pull-left  btn-group" style="padding-right: 10px;">
  <button class="btn dropdown-toggle" type="button" data-toggle="dropdown">EDICIÓ
  <span class="caret"></span></button>
  <ul class="dropdown-menu text-center" id="drEdicion">
        <li><a href=#>TOT</a></li>
  <?php 
    $result = dbQuery($conn, "SELECT * FROM produccion.ma_edicion");
    while ($row = pg_fetch_row($result)){ ?>
        <li><a href=#><?php echo $row[2]; ?></a></li>
    <?php 
    }
    ?>
    </ul>
</div>


<script>

$('#drEdicion li').click(function(){

    var ed = $(this).text();

    $('#titEdicion').text('EDICIÓ: ' + ed);
    $("tr[data-ediction!='"+ed+"']").hide();
    $("tr[data-ediction='"+ed+"']").show(); 

});

</script>

HTML code:

<thead class='thead-inverse'>
  <tr>  
    <th data-switchable='false' data-checkbox='true'></th>
    <th data-field='estado' data-switchable='false'></th>
    <th data-field='edicion' data-sortable='true' data-visible='false'>EDICIÓ</th>

选择选项:

enter image description here

选择选项:

enter image description here

桌子的头部消失了:

enter image description here

我不知道是否有更好的选择。

0 个答案:

没有答案