Как отобразить данные из базы данных в datatable

Я выполнил основное руководство по таблице данных с помощью бутстрапа, но оно работает только для жестко кодированных данных.Как отобразить данные из базы данных в datatable

Как заставить его работать, если я хочу его динамически отображать? Он отображает его, но поиск и показ № записей не работает. Он также говорит, что нет данных, доступных в таблице, когда на самом деле отображается 3 данных из моей базы данных.

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
     <title>Bootstrap 101 Template</title> 

     <!-- Bootstrap --> 
     <link href="css/bootstrap.min.css" rel="stylesheet"> 
     <link href=" //maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
     <link href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" rel="stylesheet"> 



     </head> 
    <body> 
     <br/> 
     <hr/> 
     <?php 
     require_once("/dao/CategoryDAO.php"); 
     require_once("/dao/TopicDAO.php"); 

     $category = new CategoryDAO(); 
     $topic = new TopicDAO(); 
     $allCategories_arr = $category->getAllCategories(); 
     $allTopics_arr = $topic->getAllTopicTitles(); 

     ?> 
     <div class="container"> 
      <div class="row"> 
       <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%"> 
        <thead> 
        <tr> 
         <th>Category ID</th> 
         <th>Category Name</th> 
         <th>Action</th> 
        </tr> 
        <?php 
        foreach ($allCategories_arr as $ar) { 
         echo "<tr><th>".$ar['category_id']."</th><td>".$ar['categoryname']."</td><th><a href='ManageSubCategory.php?catid=".$ar['category_id']."'>Show Sub Categories</a></th></tr>"; 
        } 
        ?> 
        </thead> 
        <tbody> 


        </tbody> 
       </table> 


      </div> 
     </div> 


     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
     <!-- Include all compiled plugins (below), or include individual files as needed --> 
     <script src="js/bootstrap.min.js"></script> 
     <script src="//code.jquery.com/jquery-1.12.4.js"></script> 
     <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
     <script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $('#example').DataTable(); 
      }); 
     </script> 

    </body> 
     </html>

источник

2017-01-18 ranger

Быстрые исправления, вы должны закрыть <thead> тег перед тем, как начать свой цикл, и показать результаты внутри <tbody> как только вы внутри <tbody> вы не используете <th> тег больше, вы используете ваш <tr>'s and <td>'s

Это как ваш код должен выглядеть;

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
     <title>Bootstrap 101 Template</title> 
     <!-- Bootstrap --> 
     <link href="css/bootstrap.min.css" rel="stylesheet"> 
     <link href=" //maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
     <link href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" rel="stylesheet"> 
    </head> 
    <body> 
     <br/> 
     <hr/> 
     <?php 
      require_once("/dao/CategoryDAO.php"); 
      require_once("/dao/TopicDAO.php"); 

      $category = new CategoryDAO(); 
      $topic = new TopicDAO(); 
      $allCategories_arr = $category->getAllCategories(); 
      $allTopics_arr = $topic->getAllTopicTitles(); 

      ?> 
     <div class="container"> 
      <div class="row"> 
       <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%"> 
        <thead> 
         <tr> 
          <th>Category ID</th> 
          <th>Category Name</th> 
          <th>Action</th> 
         </tr> 
        </thead> 
        <tbody> 
         <?php 
          foreach ($allCategories_arr as $ar) { 
           echo "<tr>"; 
           echo "<td>".$ar['category_id']."</td>"; 
           echo "<td>".$ar['categoryname']."</td>"; 
           echo "<td><a href='ManageSubCategory.php?catid=".$ar['category_id']."'>Show Sub Categories</a>"; 
           echo "</tr>"; 
          } 
          ?> 
        </tbody> 
       </table> 
      </div> 
     </div> 
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
     <!-- Include all compiled plugins (below), or include individual files as needed --> 
     <script src="js/bootstrap.min.js"></script> 
     <script src="//code.jquery.com/jquery-1.12.4.js"></script> 
     <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
     <script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $('#example').DataTable(); 
      }); 
     </script> 
    </body> 
</html>

Или должен выглядеть как этот

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
     <title>Bootstrap 101 Template</title> 
     <!-- Bootstrap --> 
     <link href="css/bootstrap.min.css" rel="stylesheet"> 
     <link href=" //maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
     <link href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" rel="stylesheet"> 
    </head> 
    <body> 
     <br/> 
     <hr/> 
     <?php 
      require_once("/dao/CategoryDAO.php"); 
      require_once("/dao/TopicDAO.php"); 

      $category = new CategoryDAO(); 
      $topic = new TopicDAO(); 
      $allCategories_arr = $category->getAllCategories(); 
      $allTopics_arr = $topic->getAllTopicTitles(); 

      ?> 
     <div class="container"> 
      <div class="row"> 
       <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%"> 
        <thead> 
         <tr> 
          <th>Category ID</th> 
          <th>Category Name</th> 
          <th>Action</th> 
         </tr> 
        </thead> 
        <tbody> 
         <?php 
          foreach ($allCategories_arr as $ar) :?> 
         <tr> 
          <td><?php echo $ar['category_id'] ;?></td> 
          <td><?php echo $ar['categoryname'];?></td> 
          <td><a href="ManageSubCategory.php?catid="<?php echo $ar['category_id'];?>">Show Sub Categories</a> 
         </tr> 
         <?php 
          endforeach; 


          ?> 
        </tbody> 
       </table> 
      </div> 
     </div> 
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
     <!-- Include all compiled plugins (below), or include individual files as needed --> 
     <script src="js/bootstrap.min.js"></script> 
     <script src="//code.jquery.com/jquery-1.12.4.js"></script> 
     <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
     <script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $('#example').DataTable(); 
      }); 
     </script> 
    </body> 
</html>

источник

2017-01-18 13:53:27

большое спасибо, сэр, этот работал для меня! Бог благословил. – ranger

Удовольствие, рад, что смогу помочь –

Написать этот код в тело тега

<?php 
       foreach ($allCategories_arr as $ar) { 
        echo "<tr><td>".$ar['category_id']."</td><td>".$ar['categoryname']."</td><td><a href='ManageSubCategory.php?catid=".$ar['category_id']."'>Show Sub Categories</a></td></tr>"; 
       } 
       ?>

я надеюсь, что это работа

источник

2017-01-18 13:44:45

набор PHP Еогеасп внутри <tbody> не <thead> и изменить <th> в Еогеасп к <td>

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%"> 
        <thead> 
        <tr> 
         <th>Category ID</th> 
         <th>Category Name</th> 
         <th>Action</th> 
        </tr> 

        </thead> 
        <tbody> 

<?php 
        foreach ($allCategories_arr as $ar) { 
         echo "<tr><td>".$ar['category_id']."</td><td>".$ar['categoryname']."</td><td><a href='ManageSubCategory.php?catid=".$ar['category_id']."'>Show Sub Categories</a></td></tr>"; 
        } 
        ?> 
        </tbody> 
       </table>

источник

2017-01-18 13:44:51

Как отобразить данные из базы данных в datatable

ответ

Смежные вопросы