Como dice el titulo quiero generar sacar una tabla de una db en mysql y mandarla por json a un html y convertirla en tabla de nuevo con jquery, peor no tengo la menor idea de como hacerlo. Lo que tengo hecho es mandarme la tabla ya generada completa desde el php, pero asi no me sirve porque despues no puedo hacer que me funcionen las funciones js ("se me cierran los modal del bootstrap") del lado del cliente. no se si me explique bien
aqui le spongo lo que tengo hecho
saludos
el php
Código PHP:
<?php
$aColumns = array('id', 'engine', 'browser', 'platform', 'version', 'grade');
$sTable = "ajax";
$gaSql['user'] = "root";
$gaSql['password'] = "";
$gaSql['db'] = "datatable";
$gaSql['server'] = "localhost";
function fatal_error($sErrorMessage = '')
{
header($_SERVER['SERVER_PROTOCOL'] . ' 500 Internal Server Error');
die($sErrorMessage);
}
if (!$gaSql['link'] = mysql_pconnect($gaSql['server'], $gaSql['user'], $gaSql['password'])) {
fatal_error('Could not open connection to server');
}
if (!mysql_select_db($gaSql['db'], $gaSql['link'])) {
fatal_error('Could not select database ');
}
$sQuery = "SELECT SQL_CALC_FOUND_ROWS `" . str_replace(" , ", " ", implode("`, `", $aColumns)) . "` FROM $sTable";
$rResult = mysql_query($sQuery, $gaSql['link']) or fatal_error('MySQL Error: ' . mysql_errno());
while ($aRow = mysql_fetch_array($rResult)) {
echo '<tr>';
for ($i = 1; $i < count($aColumns); $i++) {
echo '<td>' . $aRow[$aColumns[$i]] . '</td>';
}
echo '<td data-hide="phone">
<a href="#modal_eliminar" id =' . $aRow['id'] . ' role="button" data-toggle="modal"> <i class="icon-edit"></i></a>
<a href="#modal_editar" id =' . $aRow['id'] . ' role="button" data-toggle="modal"><i class="icon-remove"></i></a>
</td>';
echo "</tr>";
}
?>
el html:
Código HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/footable-0.1.css" rel="stylesheet" type="text/css"/>
<link href="css/footable.sortable-0.1.css" rel="stylesheet" type="text/css"/>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
body {
margin: 30px;
}
</style>
</head>
<body>
<table class="footable" id="example">
<thead>
<tr>
<th data-class="expand" data-sort-initial="true">
<span title="table sorted by this column on load">First Name</span>
</th>
<th>
<span title="sorting disabled on this column">Last Name</span>
</th>
<th data-hide="phone,tablet">
Job Title
</th>
<th data-hide="phone,tablet" data-type="numeric">
DOB
</th>
<th data-hide="phone" data-type="numeric">
Status
</th>
<th data-hide="phone" colspan="2" data-group="group2">
Editar
</th>
</tr>
</thead>
<tbody>
<!-- aqui va la tabla generada-->
</tbody>
</table>
<div id="modal_eliminar" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel1">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
<div id="modal_editar" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel2">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/footable.js" type="text/javascript"></script>
<script src="js/footable.sortable.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-alert.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script src="js/bootstrap-button.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
<script src="js/bootstrap-affix.js"></script>
<script src="js/html5shiv.js"></script>
<script src="js/holder/holder.js"></script>
<script src="js/google-code-prettify/prettify.js"></script>
<script type="text/javascript">
$(function info() {
$.ajax({
url:'scripts/server_processing.php',
success:function (data) {
$('tbody').html(data);
$('table').footable();
}
});
});
</script>
</body>
</html>