2016-01-18 2 views
0

У меня есть база данных с несколькими строками данных, которые я хочу отображать в таблице, но в разных строках таблицы, но когда в таблице есть несколько строк данных, она отображает ее в той же строке, и у нее нет + знак для расширения.Вставка каждой строки базы данных в разные строки таблицы?

Hopefully this image can show you what I mean...

Мой код:

<?php 
ob_start(); 
require_once 'includes/db.php'; 
require_once 'includes/init.php'; 
if (!($user -> LoggedIn())) 
{ 
    header('location: login.php'); 
    die(); 
} 
if (!($user -> notBanned($odb))) 
{ 
    header('location: login.php'); 
    die(); 
} 

include("header.php"); 
?><body> 
<div class="page"> 
       <div class="mainwrapper"> 
       <div class="page-header"> 
     <h1 class="page-title">Methods</h1> 
     <ol class="breadcrumb"> 
     <li><a href="../index.html">Home</a></li> 
     <li class="active">Methods</li> 
     </ol> 
    </div> 
       <div class="page-content"> 
     <!-- Panel --> 
     <div class="col-lg-12"> 
      <!-- Panel Filtering --> 
      <div class="panel"> 
      <header class="panel-heading"> 
       <h3 class="panel-title">Methods</h3> 
      </header> 
      <div class="panel-body"> 
       <table class="table table-bordered table-hover toggle-circle" id="exampleFootableFiltering"> 
       <thead> 
        <tr> 
        <th data-toggle="true">Method Title</th> 
        <th>Date Submitted</th> 
        <th data-hide="phone, tablet">Author</th> 
        <th data-hide="phone, tablet">Tutorial</th> 
        <th data-hide="phone, tablet">Status</th> 
        </tr> 
       </thead> 
       <div class="form-inline padding-bottom-15"> 
        <div class="row"> 
        <div class="col-sm-6"> 
         <div class="form-group"> 
         <label class="control-label">Status</label> 
         <select id="filteringStatus" class="form-control"> 
          <option value="">Show all</option> 
          <option value="Working">Working</option> 
          <option value="Plausible">Plausible</option> 
          <option value="Not Working">Not Working</option> 
         </select> 
         </div> 
        </div> 
        <div class="col-sm-6 text-right"> 
         <div class="form-group"> 
         <input id="filteringSearch" type="text" placeholder="Search" class="form-control" 
         autocomplete="off"> 
         </div> 
        </div> 
        </div> 
       </div> 
       <tbody> 
        <tr> 
        <?php 
        $methodssql = $odb -> query("SELECT * FROM `methods`"); 
        while($row = $methodssql ->fetch()) 
        { 
        echo '<td>' . $row['m_title'] . '</td>'; 
        echo '<td>' . $row['sub_date'] . '</td>'; 
        echo '<td>' . $row['author'] . '</td>'; 
        echo '<td>' . $row['tutorial'] . '</td>'; 
        echo '<td> <span class="label label-table label-success"> ' . $row['status'] . ' </span> </td>'; 
        } 
       ?> 

        </tr> 


       </tbody> 
       <tfoot> 
        <tr> 
        <td colspan="5"> 
         <div class="text-right"> 
         <ul class="pagination"></ul> 
         </div> 
        </td> 
        </tr> 
       </tfoot> 
       </table> 
      </div> 
      </div> 
      <!-- End Panel Filtering --> 
     </div> 
      </div> 

      </div> 
      </div> 


    <script> 
    (function(document, window, $) { 
     'use strict'; 

     var Site = window.Site; 

     $(document).ready(function($) { 
     Site.run(); 
     }); 

     // Example Row Toggler 
     // ------------------- 
     (function() { 
     $('#exampleRowToggler').footable(); 
     })(); 

     // Expand/Collapse All Rows 
     // -------------------------- 
     (function() { 
     var fooColExp = $('#exampleAccordion'); 
     fooColExp.footable().trigger('footable_expand_first_row'); 

     $('#exampleCollapseBtn').on('click', function() { 
      fooColExp.trigger('footable_collapse_all'); 
     }); 
     $('#exampleExpandBtn').on('click', function() { 
      fooColExp.trigger('footable_expand_all'); 
     }) 
     })(); 

     // Accordion 
     // --------- 
     (function() { 
     $('#exampleFooAccordion').footable().on('footable_row_expanded', 
      function(e) { 
      $('#exampleFooAccordion tbody tr.footable-detail-show').not(
       e.row).each(function() { 
       $('#exampleFooAccordion').data('footable').toggleDetail(
       this); 
      }); 
      }); 
     })(); 

     // Pagination 
     // ---------- 
     (function() { 
     $('#examplePagination').footable(); 
     $('#exampleShow').change(function(e) { 
      e.preventDefault(); 
      var pagesize = $(this).find('option:selected').val(); 
      $('#examplePagination').data('page-size', pagesize); 
      $('#examplePagination').trigger('footable_initialized'); 
     }); 
     })(); 

     // Filtering 
     // --------- 
     (function() { 
     var filtering = $('#exampleFootableFiltering'); 
     filtering.footable().on('footable_filtering', function(e) { 
      var selected = $('#filteringStatus').find(':selected').val(); 
      e.filter += (e.filter && e.filter.length > 0) ? ' ' + 
      selected : selected; 
      e.clear = !e.filter; 
     }); 

     // Filter status 
     $('#filteringStatus').change(function(e) { 
      e.preventDefault(); 
      filtering.trigger('footable_filter', { 
      filter: $(this).val() 
      }); 
     }); 

     // Search input 
     $('#filteringSearch').on('input', function(e) { 
      e.preventDefault(); 
      filtering.trigger('footable_filter', { 
      filter: $(this).val() 
      }); 
     }); 
     })(); 

     // Add & Remove Row 
     // ---------------- 
     (function() { 
     var addrow = $('#exampleFooAddRemove'); 
     addrow.footable().on('click', '.delete-row-btn', function() { 

      //get the footable object 
      var footable = addrow.data('footable'); 

      //get the row we are wanting to delete 
      var row = $(this).parents('tr:first'); 

      //delete the row 
      footable.removeRow(row); 
     }); 

     // Search input 
     $('#addRemoveSearch').on('input', function(e) { 
      e.preventDefault(); 

      addrow.trigger('footable_filter', { 
      filter: $(this).val() 
      }); 
     }); 

     // Add Row Button 
     $('#addRowBtn').click(function() { 

      //get the footable object 
      var footable = addrow.data('footable'); 

      //build up the row we are wanting to add 
      var newRow = 
      '<tr><td><button class="btn btn-icon btn-danger btn-outline btn-round btn-xs demo-delete-btn"><i class="icon wb-close-mini" aria-hidden="true"></i></button></td><td>Adam</td><td>Doe</td><td>Traffic Court Referee</td><td>22 Jun 1972</td><td><span class="label label-table label-success">Active</span></td></tr>'; 

      //add it 
      footable.appendRow(newRow); 
     }); 
     })(); 

    })(document, window, jQuery); 
    </script> 

    </body> 

ответ

0

Я думаю, что ваш первый вопрос является достаточно легко исправить. Элементы <tr> должны быть размещены внутри вашего кода итератора php. Как и сейчас, для всех строк будет создан только один элемент <tr>, а не строка таблицы, создаваемая для каждой строки данных. поэтому попробуйте:

<tbody> 
<?php 
$methodssql = $odb -> query("SELECT * FROM `methods`"); 

while($row = $methodssql ->fetch()) 
{ 
    echo '<tr>'; 
    echo '<td>' . $row['m_title'] . '</td>'; 
    echo '<td>' . $row['sub_date'] . '</td>'; 
    echo '<td>' . $row['author'] . '</td>'; 
    echo '<td>' . $row['tutorial'] . '</td>'; 
    echo '<td> <span class="label label-table label-success"> ' . $row['status'] . ' </span> </td>'; 
    echo '</tr>'; 
} 
?> 
</tbody> 
+0

Спасибо, приятель, вы его решили! Хвалите за неослабное! – char

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