Created
September 25, 2015 18:17
-
-
Save porfidev/70a3a24c05bdcf1dabbe to your computer and use it in GitHub Desktop.
Uso correcto de DataTables para erikmx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| include 'config.php'; | |
| $mysqli->query("SET NAMES 'utf8'"); | |
| $querystr = 'SELECT ID, NOMBRE, APELLIDOPATERNO, APELLIDOMATERNO,SEXO | |
| FROM maindb LIMIT 1000'; | |
| $res = $mysqli->query($querystr); | |
| ##Esto solo aplica si vas a pintar el HTML | |
| //function getHtmlTd($value){ | |
| // $html = ''; | |
| // if(is_array($value)){ | |
| // foreach($value as $str){ | |
| // $html .= '<td>' . $str . '</td>'; | |
| // } | |
| // } else { | |
| // $html .= '<td>' . $value . '</td>'; | |
| // } | |
| // return $html; | |
| //} | |
| // | |
| //$htmlrender = ''; | |
| // | |
| //while ($row = $res->fetch_assoc()): | |
| // $htmlrender .= '<tr>'; | |
| // $htmlrender .= getHtmlTd([$row['ID'], $row['NOMBRE'], $row['APELLIDOPATERNO'], $row['APELLIDOMATERNO']]); | |
| // $htmlrender .= getHtmlTd('<a target="_blank" href="#"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> MOSTRAR</a>'); | |
| // $htmlrender .= '</tr>'; | |
| //endwhile; | |
| // | |
| //echo json_encode([ "html" => $htmlrender]); | |
| $result = []; | |
| while ($row = $res->fetch_assoc()): | |
| array_push($result, [$row['ID'], $row['NOMBRE'], $row['APELLIDOPATERNO'], $row['APELLIDOMATERNO'], '<button>Hola mundo</button>']); | |
| endwhile; | |
| echo json_encode(['results'=> $result]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="es"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> | |
| <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>SISTEMA DE CONSULTA</title> | |
| <!-- Bootstrap --> | |
| <link href="css/bootstrap.min.css" rel="stylesheet"> | |
| <link href="css/dataTables.bootstrap.css" rel="stylesheet"> | |
| <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> | |
| <link rel="stylesheet" href="/resources/demos/style.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="panel panel-primary"> | |
| <div class="panel-heading">SISTEMA DE CONSULTA</div> | |
| <div class="panel-body"> | |
| <div class="panel panel-default"> | |
| <div class="panel-body"> | |
| <div id="accordion"> | |
| <h3>Busqueda Completa</h3> | |
| <div> | |
| <form role="form"> | |
| <div class="form-group"> | |
| <input type="text" class="form-control input-sm" id="xNombre" placeholder="Nombre"> | |
| </div> | |
| <div class="form-group"> | |
| <input type="text" class="form-control input-sm" id="xApelloPaterno" | |
| placeholder="Apellido Paterno"> | |
| </div> | |
| <div class="form-group"> | |
| <input type="text" class="form-control input-sm" id="xApelloMaterno" | |
| placeholder="Apellido Materno"> | |
| </div> | |
| <button type="submit" class="btn btn-primary btn-lg btn-block">Buscar</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <table id="ghatable" class="display table table-responsive table-bordered table-hover table-condensed table-striped" | |
| cellspacing="0" width="100%"> | |
| <thead> | |
| <tr> | |
| <th class="active">ID</th> | |
| <th class="active">NOMBRE</th> | |
| <th class="active">APELLIDO PATERNO</th> | |
| <th class="active">APELLIDO MATERNO</th> | |
| <th class="active">OPCIONES</th> | |
| </tr> | |
| </thead> | |
| <tbody id="contenido-tabla"> | |
| <!--Supongo aqui se incluira la llamada al archivo consulta.php --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> | |
| <script src="js/jquery.min.js"></script> | |
| <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> | |
| <!-- Include all compiled plugins (below), or include individual files as needed --> | |
| <script src="js/bootstrap.min.js"></script> | |
| <script src="js/jquery.dataTables.min.js"></script> | |
| <script src="js/dataTables.bootstrap.js"></script> | |
| <script type="text/javascript" charset="utf-8"> | |
| $(document).ready(function () { | |
| $("#accordion").accordion({ | |
| active: false, | |
| collapsible: true, | |
| autoHeight: false, | |
| heightStyle: "content" | |
| }); | |
| var jqxhr = $.get("consulta.php", function (data) { | |
| // console.info("success", data); | |
| // console.info(data.html); | |
| // $('#contenido-tabla').html(data.html); | |
| $('#ghatable').dataTable({ | |
| data: data.results | |
| }); | |
| }, 'json'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment