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>";
}
?> 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>
