-2

podrían ayudarme con un ejemplo y explicación de como mostrar los datos de una consulta en un DataTable, por el momento me muestra los resultados en una tabla convencional. Tengo el siguiente código:

$query="SELECT art_Clave, art_Costo, kar_Fecha, kar_Cantidad, kar_Origen, alma_Existencia, usu_Clave FROM tArticuloKardex WHERE art_Clave='".$buscar."' AND (kar_Fecha BETWEEN '".$formato1."' AND '".$formato2."') ORDER BY kar_Fecha";

        $resultado=sqlsrv_query($conn, $query);
        //se desplegaran los resultados en la tabla
        echo "<table border=1>";
        echo "<tr>";
        echo "<th>SKU</th>";
        echo "<th>COSTO</th>";
        echo "<th>FECHA DE MOVIMIENTO</th>";
        echo "<th>PIEZAS</th>";
        echo "<th>TICKET</th>";
        echo "<th>EXISTENCIA FINAL</th>";
        echo "<th>USUARIO</th>";
        echo "</tr>";

        while($row=sqlsrv_fetch_array($resultado)){
            echo '<tr>';
            echo '<td>'.$row['art_Clave'].'</td>';
            echo '<td>'.$row['art_Costo'].'</td>';
            echo '<td>'.date_format($row['kar_Fecha'], 'd-m-Y').'</td>';
            echo '<td>'.$row['kar_Cantidad'].'</td>';
            echo '<td>'.$row['kar_Origen'].'</td>';
            echo '<td>'.$row['alma_Existencia'].'</td>';
            echo '<td>'.$row['usu_Clave'].'</td>';
            echo '</tr>';           
        }
        echo "</table>";`
5
  • a que te refieres con "mostrar los datos de una consulta en un DataTable", quieres usar una librería de JavaScript si es así te dejo está. Dale una revisada tal vez te sirva Saludos.
    – JuankGlezz
    el 27 jul. 2016 a las 18:31
  • Exactamente , eso es lo que requiero. el 27 jul. 2016 a las 18:31
  • 2
    Veo que has hecho ya varias preguntas en el sitio pero no aceptas las respuestas normalmente ¿ninguna te ha servido/funcionado?
    – Shaz
    el 27 jul. 2016 a las 18:46
  • Si, algunas de ellas me han funcionado. Un ejemplo esta me fue de gran utilidad. Ahora una duda, ¿Como puedo marcar la respuesta? el 27 jul. 2016 a las 20:41
  • 1
    Creo que ya viste como marcar la respuesta, ahora puedes hacer un repaso por tus preguntas anteriores y revisar si marcas otras que te hayan sido útiles :)
    – Shaz
    el 28 jul. 2016 a las 16:59

1 respuesta 1

1

Este es el ejemplo básico usando Datatables.net

$(document).ready(function() {
    $('#example').DataTable();
} );
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>
                <td>$372,000</td>
            </tr>
            <tr>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012/08/06</td>
                <td>$137,500</td>
            </tr>
            <tr>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010/10/14</td>
                <td>$327,900</td>
            </tr>
            <tr>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>2009/09/15</td>
                <td>$205,500</td>
            </tr>
            <tr>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>2008/12/13</td>
                <td>$103,600</td>
            </tr>
            <tr>
                <td>Jena Gaines</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>30</td>
                <td>2008/12/19</td>
                <td>$90,560</td>
            </tr>
            <tr>
                <td>Quinn Flynn</td>
                <td>Support Lead</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2013/03/03</td>
                <td>$342,000</td>
            </tr>
            <tr>
                <td>Charde Marshall</td>
                <td>Regional Director</td>
                <td>San Francisco</td>
                <td>36</td>
                <td>2008/10/16</td>
                <td>$470,600</td>
            </tr>
            <tr>
                <td>Haley Kennedy</td>
                <td>Senior Marketing Designer</td>
                <td>London</td>
                <td>43</td>
                <td>2012/12/18</td>
                <td>$313,500</td>
            </tr>
            <tr>
                <td>Tatyana Fitzpatrick</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>19</td>
                <td>2010/03/17</td>
                <td>$385,750</td>
            </tr>
            <tr>
                <td>Michael Silva</td>
                <td>Marketing Designer</td>
                <td>London</td>
                <td>66</td>
                <td>2012/11/27</td>
                <td>$198,500</td>
            </tr>
            <tr>
                <td>Paul Byrd</td>
                <td>Chief Financial Officer (CFO)</td>
                <td>New York</td>
                <td>64</td>
                <td>2010/06/09</td>
                <td>$725,000</td>
            </tr>
            <tr>
                <td>Gloria Little</td>
                <td>Systems Administrator</td>
                <td>New York</td>
                <td>59</td>
                <td>2009/04/10</td>
                <td>$237,500</td>
            </tr>
            <tr>
                <td>Bradley Greer</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>41</td>
                <td>2012/10/13</td>
                <td>$132,000</td>
            </tr>
            <tr>
                <td>Dai Rios</td>
                <td>Personnel Lead</td>
                <td>Edinburgh</td>
                <td>35</td>
                <td>2012/09/26</td>
                <td>$217,500</td>
            </tr>
            <tr>
                <td>Jenette Caldwell</td>
                <td>Development Lead</td>
                <td>New York</td>
                <td>30</td>
                <td>2011/09/03</td>
                <td>$345,000</td>
            </tr>
            <tr>
                <td>Yuri Berry</td>
                <td>Chief Marketing Officer (CMO)</td>
                <td>New York</td>
                <td>40</td>
                <td>2009/06/25</td>
                <td>$675,000</td>
            </tr>
            <tr>
                <td>Caesar Vance</td>
                <td>Pre-Sales Support</td>
                <td>New York</td>
                <td>21</td>
                <td>2011/12/12</td>
                <td>$106,450</td>
            </tr>
            <tr>
                <td>Doris Wilder</td>
                <td>Sales Assistant</td>
                <td>Sidney</td>
                <td>23</td>
                <td>2010/09/20</td>
                <td>$85,600</td>
            </tr>
            <tr>
                <td>Angelica Ramos</td>
                <td>Chief Executive Officer (CEO)</td>
                <td>London</td>
                <td>47</td>
                <td>2009/10/09</td>
                <td>$1,200,000</td>
            </tr>
            <tr>
                <td>Gavin Joyce</td>
                <td>Developer</td>
                <td>Edinburgh</td>
                <td>42</td>
                <td>2010/12/22</td>
                <td>$92,575</td>
            </tr>
            <tr>
                <td>Jennifer Chang</td>
                <td>Regional Director</td>
                <td>Singapore</td>
                <td>28</td>
                <td>2010/11/14</td>
                <td>$357,650</td>
            </tr>
          </tbody>
  </table>

En tu caso solo agregarías un id a tu tabla echo "<table border=1 id='datatable'>";. Después de haber cargado las librerías.

  • <link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/>
  • <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

Y después cargar el script para llamar ala librería.

$(document).ready(function() {
    $('#example').DataTable();
} );
2
  • Los datos son mostrados correctamente de la manera básica pero cuando lo paso para mostrar los datos de mi consulta no funciona el datatable el 28 jul. 2016 a las 15:42
  • tal vez te pueda servir este apartado
    – JuankGlezz
    el 28 jul. 2016 a las 16:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.