我有一个包含多行数据的数据库，我希望将其显示在一个表中，但是在表中的不同行中，但是当表中有多行数据时，它会在同一行显示它并且它没有+符号展开。
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 :(得分：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>