0

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

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

数据显示在表格中。我是 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>
    ....
4

3 回答 3

0

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

在文档中调用它

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

现在在显示存档按钮上只需调用

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

在隐藏存档按钮上只需调用

     $('tr.archivedrow').hide();
于 2013-07-04T14:10:20.580 回答
0

感谢大家。我不想重新加载页面，因为数据是从各种数据库和表中检索出来的，因此仅仅为了切换查看我已经可以访问的数据而运行起来很昂贵。它使用以下代码工作：

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>
....
于 2013-07-05T07:50:53.500 回答
0

有几种方法可以做到这一点。给大家分享三个。

打印出 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);
        });
    });
});
于 2013-07-04T14:11:11.927 回答