在同一页面上的div中加载PHP回显链接的内容

时间:2017-12-10 15:03:09

标签: javascript jquery html css sql

我的数据库表中有SELECT个数据。此数据附带链接。我想要的是,当我点击链接时,它会在div中加载更多的数据,而不是转到不同的页面。每个链接都附带一个id,可以从中了解要从数据库加载div的数据。下面是代码

<div class="pricepop"></div>
<div class="pricetab">
<table class="table">
                <thead>
                    <tr>
                      <th>COMMODITIES</th>
                      <th>UNITS</th>
                      <th>INTERNATIONAL PRICE($)</th>
                      <th>TERMS</th>
                      <th>LOCAL PRICE (&#8358;)</th>
                      <th>AS AT</th>
                      <th>MARKET</th>
                      <th>Full Details</th>
                    </tr>
                </thead>
                <tbody>
                <style>
                .table > thead > tr > th, .table > tbody > tr > td {
                    font-size: 10px !important;
                    font-family: 'Lato', sans-serif;
                    font-weight: bold;
                }
                </style>
                  <?php
                  $sql = $db->prepare("SELECT * FROM commodityprices");
                  $result = $sql->execute();
                  while ($row = $result->fetchArray(SQLITE3_ASSOC))
                  {
                      $id = $row['id'];
                      $_SESSION['id'] = $id;
                      $name = $row['name'];
                      $unit = $row['unit'];
                      $iprice = $row['iprice'];
                      $lprice = $row['lprice'];
                      $irate = $row['irate'];
                      $lrate = $row['lrate'];
                      $terms = $row['cterms'];
                      $asat = date('d/M/Y');
                      $market = $row['market'];

                          echo '<tr>
                          <td>'.$name.'</td>
                          <td>'.$unit.'</td>';
                          if ($irate == "Down")
                          {
                              echo '
                              <td style="background: #ef5a66; color: #fff"><i class="fa fa-caret-down"> </i> '.$iprice.'</td>';
                          }
                          else
                          {
                            echo '
                            <td style="background: #28bc88; color: #fff"><i class="fa fa-caret-up"> </i> '.$iprice.'</td>';
                          }
                          echo '<td>'.$terms.'</td>';
                          if ($lrate == "Down")
                          {
                              echo '
                              <td style="background: #ef5a66; color: #fff"><i class="fa fa-caret-down"> </i> '.$lprice.'</td>';
                          }
                          else
                          {
                            echo '
                            <td style="background: #28bc88; color: #fff"><i class="fa fa-caret-up"> </i> '.$lprice.'</td>';
                          }
                          echo '<td>'.$asat.'</td>
                          <td>'.$market.'</td>
                          <td><a class="comprice" href="pricedetails.php?id='.$id.'">View more</a></td>
                          </tr>';
                  }                 
                  ?>
                </tbody>
                </table>
</div>

下面我有一个javascript,可以将数据库中的数据加载到链接上的.pricepop点击

$(document).ready(function() {
    $(".comprice").on("click", function (e) {
        e.preventDefault();
        $(".pricepop").load("pricedetails.php");
    });
});

以下是获取剩余价格详情的 pricedetails.php 代码。

                  <thead>
                    <tr>
                      <th>COMMODITIES</th>
                      <th>TERMS</th>
                      <th>LOCAL PRICE (&#8358;)</th>
                      <th>AS AT</th>
                      <th>MARKET</th>
                      <th>Price/bag</th>
                    </tr>
                </thead>
                <tbody>
                <style>
                .table > thead > tr > th, .table > tbody > tr > td {
                    font-size: 10px !important;
                    font-family: 'Lato', sans-serif;
                    font-weight: bold;
                }
                </style>
                  <?php
                  $priceId = $_SESSION['id'];
                  $sql = $db->prepare("SELECT * FROM commodityprices WHERE id = ?");
                  $sql->bindParam(1, $priceId, SQLITE3_INTEGER);
                  $result = $sql->execute();
                  while ($row = $result->fetchArray(SQLITE3_ASSOC))
                  {
                      $id = $row['id'];
                      $name = $row['name'];
                      $iprice = $row['iprice'];
                      $lprice = $row['lprice'];
                      $lrate = $row['lrate'];
                      $terms = $row['cterms'];
                      $asat = date('d/M/Y');
                      $market = $row['market'];
                      $priceperbags = $row['priceperbags'];

                          echo '<tr>
                          <td>'.$name.'</td>';
                          echo '<td>'.$terms.'</td>';
                          if ($lrate == "Down")
                          {
                              echo '
                              <td style="background: #ef5a66; color: #fff"><i class="fa fa-caret-down"> </i> '.$lprice.'</td>';
                          }
                          else
                          {
                            echo '
                            <td style="background: #28bc88; color: #fff"><i class="fa fa-caret-up"> </i> '.$lprice.'</td>';
                          }
                          echo '<td>'.$asat.'</td>
                          <td>'.$market.'</td>
                          <td class="comprice">'.$priceperbags.'</td>
                          </tr>';
                  }
                  ?>
                </tbody>
                </table> 
</div>

现在的问题是,无论我在回显的php数据中点击哪个链接,.pricepop中显示的数据都是最后一个echo链接的详细信息。

我如何解决这个问题,以便当我点击某个链接时,该链接的id获取的详细信息为echo并显示在.pricepop中。

1 个答案:

答案 0 :(得分:0)

您必须使用AJAX POST或GET statemant来获取所需内容。简单的jQuery .load()无法帮助你。

在基础知识中,您必须进行某种分页才能加载或附加新数据。

以下是示例:

http://itsolutionstuff.com/post/php-infinite-scroll-pagination-using-jquery-ajax-exampleexample.html http://phppot.com/php/ajax-pagination-with-php/