Question

我从数据库中获取数据，该数据库包含存档数据的一些数据行。我正在使用php来获取数据并将数据存储在实体对象中。

为了减少数据库调用，我希望能够在创建页面时显示除存档数据之外的所有行，但页面上的链接将从“show archived”更改为“hide archived”，从而切换分别打开和关闭存档数据。

数据显示在表格中。我是jquery的新手并且发现了很多文章，但是在不同的浏览器中显示和隐藏时似乎存在一个错误，现在我对最好的方法感到非常困惑。我需要支持大多数浏览器，但我使用的是jQuery 1.10。

<table width='100%' border="1" cellspacing="0" cellpadding="4" class="mytable">
    <tr>
        <th>Product</th>
        <th>Supplier</th>
        ....
    </tr>
    <?php
    if ($product->getDateArchived() != NULL) {
         echo "<tr class=\"archivedrow\">";
    } else {
          echo "<tr> ";
    } ?>
    <td><?= $product->getProductName() ?></td>
    <td><?= $supplier->getSupplierName() ?></td>
    ....

Answer 1

如果在加载时你应该隐藏存档的行。

在文档准备中调用

$(document).ready(function(){
     $('tr.archivedrow').hide();
});

现在在show archived按钮上调用

     $('tr.archivedrow').show();

在隐藏存档按钮上只需致电

     $('tr.archivedrow').hide();

Answer 2

有几种方法可以做到这一点。我会和你分享三个。

打印出HTML中的所有行，但通过jQuery隐藏/显示

您提到您希望通过仅返回非归档行来减少数据库负载。此解决方案不会减少页面加载时的数据库负载，因为它获取所有这些并且只使用css来隐藏它们

<强> PHP / HTML

<?php

    // ... db connection code etc.

    $result = $mysqli->query("SELECT * FROM table");

    while ($row = $result->fetch_assoc()) {
?>        

    <div class="<?php echo $row['archived'] ? 'archived' : 'notarchived' ?>">
        <!-- all your html stuff here -->
    </div>

<?php } ?>

<a id="toggle-archived" href="#">Toggle archived</a>

<?php

    // ... clean up db/result close code etc.

<强> CSS

.archived {
    display: none;
}

<强> JS

$(function() {
    $('#toggle-archived').click(function() {
        $('.archived').toggle();
    });
});

另一种方法是刷新页面并在刷新时更改sql查询

<强> PHP / HTML

<?php

    // ... db connection code etc.

    $showArchived = isset($_GET['show_archived']) && $_GET['show_archived'];

    $sql = "SELECT * FROM table";

    if (!$showArchived) {
        $sql .= " WHERE archived = 0";
    }

    $result = $mysqli->query($sql);

    while ($row = $result->fetch_assoc()) {
?>        

    <div>
        <!-- all your html stuff here -->
    </div>

<?php } ?>


<?php if ($showArchived) : ?>
    <a href="/">Hide archived</a>
<?php else: ?>
    <a href="/?show_archived=1">Show archived</a>
<?php endif; ?>

<?php

    // ... clean up db/result close code etc.

第三种方式是通过ajax更改内容。可能会与上面的那些类似，但你的javascript看起来像：

$(function(){
    $('#toggle-archived').click(function(){
        $.post('page.php', data, function(resp) {
            $('#dataTable').html(resp);
        });
    });
});

Answer 3

谢谢大家。我不想重新加载页面，因为从各种数据库和表中检索数据，因此只需切换我已经访问过的查看数据就很昂贵。它的工作使用以下代码：

<强> CSS：

tr.archivedrow {
    display:none;
}

<强> jQuery的：

<script>
$(document).ready(function() {
    $(".showarchived").on("click", function(event) {
        if ($(this).hasClass("displayed")) {
            $(this).html("Show Archived");
            $(this).removeClass("displayed");
        } else {
            $(this).addClass("displayed");
            $(this).html("Hide Archived");
        }
        $(".myTable .archivedrow").toggle();
    });


});

</script>

<强> HTML

<a class="showarchived" href="#">Show Archived</a>
<table width='100%' border="1" cellspacing="0" cellpadding="4" class="mytable">
<tr>
    <th>Product</th>
    <th>Supplier</th>
    ....
</tr>
<?php
if ($product->getDateArchived() != NULL) {
     echo "<tr class=\"archivedrow\">";
} else {
      echo "<tr> ";
} ?>
<td><?= $product->getProductName() ?></td>
<td><?= $supplier->getSupplierName() ?></td>
....

如何在表中显示/隐藏行并更改文本/链接以反映此更改

3 个答案: