skip to Main Content

I’m currently building a basic search utility for my site. However I’m stuck on DataTables and inserting php.

At present, I have an array with simulated data (ie Title and Description), and at a later stage I’ll replace the simulated array for a database.

I have an html file, which has a simple DataTable. I would like to ask how can I insert the simulated array/database into the DataTable?

my spider.php file reads:-

<?php
     for ($arrcount=0; $arrcount <= 50; $arrcount++) {
         $result_title[$arrcount] = "Header Title:- ".$arrcount;
         $result_description[$arrcount] = "Description Line:- ".$arrcount;
     }
     include($_SERVER['DOCUMENT_ROOT'].'/public/pubdsply.html'); 
 ?>

and my pubdsply.html:

   <!DOCTYPE html>
   <html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <meta name="description" content="">
      <meta name="author" content="">
      <title>Landing Page - Start Bootstrap Theme</title>
      Bootstrap core CSS -->
      <link href="layout/public/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
      <!--Custom fonts for this template -->
      <link href="layout/public/vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
      <link href="layout/public/vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" type="text/css">
      <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
      <!-- Custom styles for this template -->
      <link href="layout/public/css/landing-page.min.css" rel="stylesheet">
      Data Table-->
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/style.min.css" rel="stylesheet" />
      <link href="/layout/publictable/css/styles.css" rel="stylesheet" />
      <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
   </head>
   <body>
      <?php
         if(session_status() !== PHP_SESSION_ACTIVE) {
         session_start();
                 }
                 ?>
      <!-- Navigation -->
      <nav class="navbar navbar-light bg-light static-top">
         <div class="container">
            <!--<a class="navbar-brand"><?= $_SESSION['settings_title'] ?></a>-->
            <a class="navbar-brand" href="#">Start Bootstrap</a>
            <a class="btn btn-primary btn-sm" href="regsignin.php">Sign In</a>
         </div>
      </nav>
      <!------------------------------------------------------------------------------------------------>
      <div id="layoutSidenav_content">
         <main>
            <div class="container-fluid px-4">
               <h1 class="mt-4">Tables</h1>
               <ol class="breadcrumb mb-4">
                  <li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
                  <li class="breadcrumb-item active">Tables</li>
               </ol>
               <div class="card mb-4">
                  <div class="card-body">
                     DataTables is a third party plugin that is used to generate the demo table below. For more information about DataTables, please visit the
                     <a target="_blank" href="https://datatables.net/">official DataTables documentation</a>.
                  </div>
               </div>
               <div class="card mb-4">
                  <div class="card-header">
                     <i class="fas fa-table me-1"></i>
                     DataTable Example
                  </div>
                  <div class="card-body">
                     <table id="datatablesSimple">
                        <thead>
                           <tr>
                              <th>Name</th>
                              <th>Position</th>
                              <th>Office</th>
                              <th>Age</th>
                              <th>Start date</th>
                              <th>Salary</th>
                           </tr>
                        </thead>
                        <tfoot>
                           <tr>
                              <th>Name</th>
                              <th>Position</th>
                              <th>Office</th>
                              <th>Age</th>
                              <th>Start date</th>
                              <th>Salary</th>
                           </tr>
                        </tfoot>
                        <tbody>
                           <?
                              for ($arrcount=0; $arrcount <= 50; $arrcount++) {
                              echo "<tr>";
                              echo "<td>";
                              echo $result_title[$arrcount] . "<br>";
                              echo  $result_description[$arrcount] . "<br>";
                              echo "</td>";
                              echo "</tr>";
                              }
                              ?>
                        </tbody>
                     </table>
                  </div>
               </div>
            </div>
         </main>
      </div>
      <!-- Bootstrap core JavaScript -->
      <script src="layout/public/vendor/jquery/jquery.min.js"></script>
      <script src="layout/public/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
      DataTable -->
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
      <script src="/layout/publictable/js/scripts.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/simple-datatables.min.js" crossorigin="anonymous"></script>
      <!--<script src="/layout/publictable/js/datatables-simple-demo.js"></script>-->
   </body>
</html>

The result I’m getting is that it’s echoing the php code, instead of displaying the array.

May I please ask how I can solve this?
Thank You.

I’ve tried copying the code from the pubdsply.html file to php file, and to a tpl file and got the same result, it just echo’s the php code (ie for loop).

2

Answers


  1. If here are no syntax server errors then it is likely as mentioned that the short open tag is not enabled. Try switching it to default open php tag with the label php following the question mark.

    To generate sample output the provided code required some tweaks to make it output correctly, namely the session that started in the body was moved to the root of the file on the very first line so I could make this work in the test environment link below. The rendered code can be seen below. Referenced file was included on top of the main script as a local segment of code.

    The most important thing to note is a referenced array label must be declared (as an array) if not already

    Use

    $arr = [];
    

    or

    $arr = new Array();
    

    for each applicable variable label that is that is used with square brackets.

    I also commented out the short hand php and the tag and the output statement that will output a $_SESSION key to produce viable output.

    See php rendered code

    https://onlinephp.io/c/8aec5

    And resulting output.

    <!DOCTYPE html>
       <html lang="en">
       <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
          <meta name="description" content="">
          <meta name="author" content="">
          <title>Landing Page - Start Bootstrap Theme</title>
          Bootstrap core CSS -->
          <link href="layout/public/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
          <!--Custom fonts for this template -->
          <link href="layout/public/vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
          <link href="layout/public/vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" type="text/css">
          <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
          <!-- Custom styles for this template -->
          <link href="layout/public/css/landing-page.min.css" rel="stylesheet">
          Data Table-->
          <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/style.min.css" rel="stylesheet" />
          <link href="/layout/publictable/css/styles.css" rel="stylesheet" />
          <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
       </head>
       <body>
          <!-- Navigation -->
          <nav class="navbar navbar-light bg-light static-top">
             <div class="container">
                <!--<a class="navbar-brand"></a>-->
                <a class="navbar-brand" href="#">Start Bootstrap</a>
                <a class="btn btn-primary btn-sm" href="regsignin.php">Sign In</a>
             </div>
          </nav>
          <!------------------------------------------------------------------------------------------------>
          <div id="layoutSidenav_content">
             <main>
                <div class="container-fluid px-4">
                   <h1 class="mt-4">Tables</h1>
                   <ol class="breadcrumb mb-4">
                      <li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
                      <li class="breadcrumb-item active">Tables</li>
                   </ol>
                   <div class="card mb-4">
                      <div class="card-body">
                         DataTables is a third party plugin that is used to generate the demo table below. For more information about DataTables, please visit the
                         <a target="_blank" href="https://datatables.net/">official DataTables documentation</a>.
                      </div>
                   </div>
                   <div class="card mb-4">
                      <div class="card-header">
                         <i class="fas fa-table me-1"></i>
                         DataTable Example
                      </div>
                      <div class="card-body">
                         <table id="datatablesSimple">
                            <thead>
                               <tr>
                                  <th>Name</th>
                                  <th>Position</th>
                                  <th>Office</th>
                                  <th>Age</th>
                                  <th>Start date</th>
                                  <th>Salary</th>
                               </tr>
                            </thead>
                            <tfoot>
                               <tr>
                                  <th>Name</th>
                                  <th>Position</th>
                                  <th>Office</th>
                                  <th>Age</th>
                                  <th>Start date</th>
                                  <th>Salary</th>
                               </tr>
                            </tfoot>
                            <tbody>
                               <tr>
    <td>
    Header Title:- 0<br>
    Description Line:- 0<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 1<br>
    Description Line:- 1<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 2<br>
    Description Line:- 2<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 3<br>
    Description Line:- 3<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 4<br>
    Description Line:- 4<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 5<br>
    Description Line:- 5<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 6<br>
    Description Line:- 6<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 7<br>
    Description Line:- 7<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 8<br>
    Description Line:- 8<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 9<br>
    Description Line:- 9<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 10<br>
    Description Line:- 10<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 11<br>
    Description Line:- 11<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 12<br>
    Description Line:- 12<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 13<br>
    Description Line:- 13<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 14<br>
    Description Line:- 14<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 15<br>
    Description Line:- 15<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 16<br>
    Description Line:- 16<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 17<br>
    Description Line:- 17<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 18<br>
    Description Line:- 18<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 19<br>
    Description Line:- 19<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 20<br>
    Description Line:- 20<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 21<br>
    Description Line:- 21<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 22<br>
    Description Line:- 22<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 23<br>
    Description Line:- 23<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 24<br>
    Description Line:- 24<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 25<br>
    Description Line:- 25<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 26<br>
    Description Line:- 26<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 27<br>
    Description Line:- 27<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 28<br>
    Description Line:- 28<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 29<br>
    Description Line:- 29<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 30<br>
    Description Line:- 30<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 31<br>
    Description Line:- 31<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 32<br>
    Description Line:- 32<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 33<br>
    Description Line:- 33<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 34<br>
    Description Line:- 34<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 35<br>
    Description Line:- 35<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 36<br>
    Description Line:- 36<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 37<br>
    Description Line:- 37<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 38<br>
    Description Line:- 38<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 39<br>
    Description Line:- 39<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 40<br>
    Description Line:- 40<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 41<br>
    Description Line:- 41<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 42<br>
    Description Line:- 42<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 43<br>
    Description Line:- 43<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 44<br>
    Description Line:- 44<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 45<br>
    Description Line:- 45<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 46<br>
    Description Line:- 46<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 47<br>
    Description Line:- 47<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 48<br>
    Description Line:- 48<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 49<br>
    Description Line:- 49<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td>
    Header Title:- 50<br>
    Description Line:- 50<br>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    </tr>
                            </tbody>
                         </table>
                      </div>
                   </div>
                </div>
             </main>
          </div>
          <!-- Bootstrap core JavaScript -->
          <script src="layout/public/vendor/jquery/jquery.min.js"></script>
          <script src="layout/public/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
          <!-- DataTable -->
          <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
          <script src="/layout/publictable/js/scripts.js"></script>
          <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/simple-datatables.min.js" crossorigin="anonymous"></script>
          <!--<script src="/layout/publictable/js/datatables-simple-demo.js"></script>-->
       </body>
    </html>
    Login or Signup to reply.
  2. I make an example. I assume that you already connected to the dB using (msqli object oriented).

    <?php
     $sql = "SELECT name,position,office,age,start_date,salary FROM  employee;";
    if($result = $mysqli->query($sql)){
    if($result->num_rows > 0){
        echo '<div class="table-responsive">';
        echo '<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">';
        echo    '<thead>';
        echo    '<tr>';
        echo        '<th>Name</th>';
        echo        '<th>Position</th>';
        echo        '<th>Office</th>';
        echo        '<th>Age</th>';
        echo        '<th>Start Date</th>';
        echo        '<th>Salary</th>';
        echo    '</tr>';
        echo    '</thead>';
        echo    '<tbody>';
        while($row = $result->fetch_array()){
        echo    '<tr>';
    
        echo "<td>" . $row['name'] . "</td>";
        echo "<td>" . $row['position'] . "</td>";
        echo "<td>" . $row['office'] . "</td>";
        echo "<td>" . $row['age'] . "</td>";
        echo "<td>" . $row['start_date'] . "</td>";
        echo "<td>" . $row['salary'] . "</td>";
        echo "</tr>";
      }
     echo "</tbody>";                            
     echo "</table>";
     echo "</div>";
    } else{
    echo '<div class="alert alert-danger"><em>No records were found.</em></div>';
    }
    // Close connection
    $mysqli->close();
    }
    }
    ?>
    

    Of course there are many ways to do so. You can also add conditions in the query if you want

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search