Tema: DataTable de JQuery dinámicamente con consulta a mysql
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 23/10/2013, 01:45
Avatar de satjaen
satjaen
 
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 11 años, 8 meses
Puntos: 10
DataTable de JQuery dinámicamente con consulta a mysql
Hola, quiero hacer una datetable dinámico con consulta a Mysql. Como puedo hacerla?

Ahora la tengo así:

Código Java: 
Ver original
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Documento sin título</title>
  6. <script src="scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
  7. <script src="scripts/jquery.dataTables.min.js" type="text/javascript"></script>
  8. <script src="scripts/jquery.dataTables.columnFilter.js" type="text/javascript"></script>
  9. <script src="scripts/jquery.dataTables.pagination.js" type="text/javascript"></script>
  10. <link href="css/demo_table_jui.css" rel="stylesheet" type="text/css">
  11. <style type="text/css">
  12. /* BeginOAWidget_Instance_2586523: #dataTable */
  13.  
  14.     @import url("css/custom/sunny/jquery.ui.all.css");
  15.     #dataTable {padding: 0;margin:0;width:100%;}
  16.     #dataTable_wrapper{width:100%;}
  17.     #dataTable_wrapper th {cursor:pointer} 
  18.     #dataTable_wrapper tr.odd {color:#000; background-color:#ffff00}
  19.     #dataTable_wrapper tr.odd:hover {color:#ffffff; background-color:#ff9900}
  20.     #dataTable_wrapper tr.odd td.sorting_1 {color:#000000; background-color:#ffcc00}
  21.     #dataTable_wrapper tr.odd:hover td.sorting_1 {color:#ffffff; background-color:#ff6600}
  22.     #dataTable_wrapper tr.even {color:#000000; background-color:#ffffff}
  23.     #dataTable_wrapper tr.even:hover, tr.even td.highlighted{color:#EEE; background-color:#cc6600}
  24.     #dataTable_wrapper tr.even td.sorting_1 {color:#000000; background-color:#cccc00}
  25.     #dataTable_wrapper tr.even:hover td.sorting_1 {color:#FFF; background-color:#cc3300}
  26.         
  27. /* EndOAWidget_Instance_2586523 */
  28. </style>
  29. <script type="text/xml">
  30. <!--
  31. <oa:widgets>
  32.   <oa:widget wid="2586523" binding="#dataTable" />
  33. </oa:widgets>
  34. -->
  35. </script>
  36. </head>
  37.  
  38. <body>
  39. <script type="text/javascript">
  40. // BeginOAWidget_Instance_2586523: #dataTable
  41.  
  42. $(document).ready(function() {
  43.     oTable = $('#dataTable').dataTable({
  44.         "bJQueryUI": true,
  45.         "bScrollCollapse": true,
  46.         "sScrollY": "200px",
  47.         "bAutoWidth": true,
  48.         "bPaginate": true,
  49.         "sPaginationType": "full_numbers", //full_numbers,two_button
  50.         "bStateSave": true,
  51.         "bInfo": true,
  52.         "bFilter": true,
  53.         "iDisplayLength": 10,
  54.         "bLengthChange": true,
  55.         "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
  56.     });
  57. } );
  58.         
  59. // EndOAWidget_Instance_2586523
  60. </script>
  61. <table cellpadding="0" cellspacing="0" border="0" id="dataTable">
  62.   <thead>
  63.     <tr>
  64.       <th>Recambio</th>
  65.       <th>Denominación</th>
  66.       <th>Pvp</th>
  67.       <th>Coste</th>
  68.       <th>Exist/000</th>
  69.     </tr>
  70.   </thead>
  71.   <tbody>
  72.     <!--Loop start, you could use a repeat region here-->
  73.     <tr>
  74.       <td>Trident</td>
  75.       <td>Internet
  76.         Explorer 4.0</td>
  77.       <td>Win 95+</td>
  78.       <td>4</td>
  79.       <td>X</td>
  80.     </tr>
  81.     <!--Loop end-->
  82.   </tbody>
  83. </table>
  84. </body>
  85. </html>



Gracias y un saludo