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

これを行うにはいくつかの方法があります。3人でシェアします。

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.

3 つ目の方法は、ajax を介してコンテンツを変更することです。これは上記のものと似ている可能性がありますが、JavaScript は次のようになります。

$(function(){
    $('#toggle-archived').click(function(){
        $.post('page.php', data, function(resp) {
            $('#dataTable').html(resp);
        });
    });
});
于 2013-07-04T14:11:11.927 に答える