如何让 Jquery Mobile 表在 PHP 中回显？

Question

我正在尝试在viewsessions.php 文件中回显一个 JQM 表。我已经研究了这个主题并尝试了这个Jquery Mobile Table in PHP code 解决方案，但是页面没有加载我的代码，所以我把它剥离回表格的工作位置。

任何想法如何做到这一点？

viewsessions.php

<?php

$servername = "";
$username = "";
$password = "";

// This code creates a connection to the MySQL database in PHPMyAdmin named 'ibill'
$con=mysqli_connect('localhost','root','cornwall','ibill');

// The connection is then checked, if it fails, an echo is sent back to the page stating a connection error.
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

// This is the query that is sent to the ibill database.
$viewsessions = "SELECT typeofactivity, employer, date, time, amount FROM session_details";
$result = $con->query($viewsessions);

if ($result->num_rows > 0) {
    echo "<table><tr>
                    <th>Type of Activity</th>
                    <th>Employer</th>
                    <th>Date</th>
                    <th>Time</th>
                    <th>Amount (GBP)</th>
                </tr>";
// output data of each row
    while($row = $result->fetch_assoc()) {
        echo "<tr>
                <td>".$row["typeofactivity"]."</td>
                <td>".$row["employer"]."</td>
                <td>".$row["date"]."</td>
                <td>".$row["time"]."</td>
                <td>".$row["amount"]."</td>
            </tr>";
    }
    echo "</table>";
} else {
    echo "0 results";
}
$con->close();
?>

我在一个 html 文件中使用多个页面，所以刚刚发布了带有以下相关代码的页面..

ma​​in.php#viewsessions

  <!--**********************************************VIEW SESSIONS PAGE*******************************************************************************-->
  <!--***********************************************************************************************************************************************-->

  <!--********************************HEADER**************************************************************************************-->
  <div data-role="page" id="viewsessions">
      <div data-role="header" data-id="foo1" data-position="fixed">
      <div class='cssmenu'>
        <ul>
           <li class='active'><a href='#home'>Home</a></li>
           <li><a href='#sessionrecord'>Record a Session</a></li>
           <li><a href='#viewsessions'>View Sessions</a></li>
           <li><a href='#invoice'>Create an Invoice</a></li>
        </ul>
      </div>
    </div><!-- /header -->
  <!--********************************HEADER***************************************************************************************-->

  <!--********************************MAIN*****************************************************************************************-->
    <div data-role="main" class="ui-content">
      <p><span class="logout"><a href="logout.php" data-role="button">Sign Out</a></span></p>
      <div class="loginphp">
        <?php
        if (isset($_SESSION['user_session']) and $_SESSION['user_session']!=""){
        echo '<p>Signed in as:&nbsp;<span class="uname">' . $_SESSION['user_session'] . '</span></p>';      }
        else {
        echo 'not working';
        }
        ?>
      </div>



      <img class="mainlogo" src="/projects/ibill_v3/img/ibill logo.png" alt="iBill Logo" width="200" height="152">
          <h1>Recorded Sessions</h1>  
          <section class="maincontent">
             <?php
              include "viewsessions.php";
             ?>
          </section>
    </div>
  <!--********************************MAIN******************************************************************************************-->

  <!--********************************FOOTER****************************************************************************************-->
    <div data-role="footer">
      <footer class="footer">
        <p>awilliams&copy;</p>
      </footer>
    </div>
  </div>
  <!--********************************FOOTER*****************************************************************************************-->

  <!--**********************************************************END OF VIEW SESSIONS PAGE***************************************************************-->
  <!--**************************************************************************************************************************************************-->

Answer 1

如果您从服务器更新表，您需要使用( ".selector" ).table( "rebuild" ); 重建它 否则你可能只需要重新初始化表

$( ".selector" ).table({
  defaults: true
});

此外，您需要在表格标签中包含data-role="table" 属性 我认为这可能是你的问题，因为你没有插入它 尝试包含该标签，如果它不起作用，请使用以下代码

if ($result->num_rows > 0) {
    echo '<table data-role="table" class="selector" data-mode="reflow"> <tr>
                    <th>Type of Activity</th>
                    <th>Employer</th>
                    <th>Date</th>
                    <th>Time</th>
                    <th>Amount (GBP)</th>
                </tr>';
// output data of each row
    while($row = $result->fetch_assoc()) {
        echo "<tr>
                <td>".$row["typeofactivity"]."</td>
                <td>".$row["employer"]."</td>
                <td>".$row["date"]."</td>
                <td>".$row["time"]."</td>
                <td>".$row["amount"]."</td>
            </tr>";
    }
    echo '</table><script> $( ".selector" ).table({
      defaults: true
    });</script>';
} else {
    echo "0 results";
}

Answer 2

您的 PHP 代码看起来不错，您的 HTML 也是如此。请注意，如果您的 PHP 代码工作正常，表格将作为 HTML 文档的一部分生成在 jQuery Mobile 样式和增强功能之前。请检查您的 PHP 代码是否确实返回了所需的 HTML 代码。这可以通过将代码复制/粘贴到单独的脚本并直接运行来完成。

还可以考虑添加以下检查以获得良好做法。原因是 $con->query() 可能返回 FALSE，而 $result->num_rows 需要 mysqli_result 对象。

// This is the query that is sent to the ibill database.
$viewsessions = "SELECT typeofactivity, employer, date, time, amount FROM session_details";
$result = $con->query($viewsessions);

//Check if a result was returned
if($result === FALSE){
    echo mysqli_error($con);
}