PHP - construir tabla con php jquery y datatable

   
Vista:

construir tabla con php jquery y datatable

Publicado por jany (1 intervención) el 20/08/2015 14:26:21
Hola alguien me podria ayudar para construir una tabla con jquery,datatable y php.

Tengo una pagina que se llama index.php donde tengo un div que contendra la tabla con los datos que realizo desde una consulta sql a una tabla de una base de datos mysql, desde mi pagina consulta.php, pero no logro que se desplieguen los datos en tabla.js(la contenedora de mi ajax), por lo tanto, no se si mi problema es el desarrollo de mi php(consulta sql) o tengo erroneo el codigo de ajax (donde construyo la tabla con el resultado de la consulta del sql) para cargar la informacion mi tabla.

Si alguien me puede dar una mano con mi problema.

A continuacion dejo mis codigos del index.php, tabla.js y consulta.php

Gracias

index.php (donde quiero construir la tabla)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
 
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="datatable.js"></script>
<script type="text/javascript" src="tabla.js"></script>
 
 
	<div class="content">
		<h2>Banner Patrocinado</h2>
 
		<div id="divTabla"></div>
 
 
 
	</div>
 
 
</div>
</body>


ajax (tabla.js)
Aqui no se si realizo bien la construccion de la tabla
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
$(document).ready(function() {
 
var  row="";
 
 	$.ajax({
 			url: 'consulta.php',
 			type: 'post',
 			data: { tag: 'getData'},
 			dataType: 'json',
 			success: function (data) {
 				if (data.success) {
 
 
 row = "<table><tr>";
                                                             row = "<th>TITULO</th>";
                                                             row = "<th>NOMBRE</th>";
                                                             row = "<th>MODIFICAR</th>";
                                                             row = "<th>ELIMINAR</th>";
 						             row = "</tr>";
 
 
$.each(data, function (index, record) {
 						if ($.isNumeric(index)) {
 							     row = "<tr>";
                                                             row = "<td>"+record.titulo+"</td>";
                                                             row = "<td>"+record.nombre+"</td>";
                                                             row = "<td>  <a href=\"editar.php?bpid="+record.id+"&idCliente="+record.idCliente+"\">Editar</a></td>";
                                                             row = "<td><input type='checkbox' id='claveEliminar'/><a href=\'javascript:eliminar('"+record.id+"')\' >Eliminar</a></td>";
 						             row = "</tr>";
 							row.appendTo("table");
 						}
					})
 
                                                     row = "</table>";
                                                     row.appendTo("divTabla");
 
 				}
 
 
 				$('table').dataTable({
 					"bJQueryUI": true,
                                        "bServerSide": true,
                                        "sSearch":false,
                                        "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                                        "bPaginate": true,
                                        "bJQueryUI": true,
 					"sPaginationType": "full_numbers"
 				})
 			}
 		});
 })


consulta.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?php
        if (isset($_POST['tag'])) {
try {
include('conexion.php');
        $db = new Conexion();
 
 
 
        $query = "SELECT
        titulo,
        nombre
        FROM clientes ";
 
        $criterio = !empty($_GET['nombre']) || !empty($_GET['username'])? ' WHERE ' : '';
        if (!empty($_GET['nombre'])){
$criterio. = " nombre LIKE '{$_GET['nombre']}%' ";
}
 
if (!empty($_GET['username'])){
$criterio. = $criterio != ' WHERE '?' AND ':'';
        $criterio. = " username LIKE '{$_GET['username']}%' ";
}
$query. = $criterio;
 
        $result = new query ($query, $db, 'object');
        if (!$result - > execute()) return false;
        if ($result - > rowCount() > 0) {
$json = array();
        while ($row = $result - > fetch()) {
 
$json[] = array(
        'nombre' = > $row['nombre'],
        'titulo' = > $row['titulo']
        );
}
 
$json['success'] = true;
        echo json_encode($json);
}
} catch (PDOException $e) {
echo 'Error: '.$e - > getMessage();
}
}
 
?>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

construir tabla con php jquery y datatable

Publicado por ivan (42 intervenciones) el 20/08/2015 20:06:11
si de lago te sirve con este script funciona con data-table de js.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<?php
include ("conexion.php");
}
?>
    <html>
		<head>
 
        	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>Lista</title>
            <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
            <link rel="stylesheet" type="text/css" href="css/dataTables.editor.css">
            <script type="text/javascript" language="javascript" src="js/jquery.js"></script>
            <script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
            <script type="text/javascript" language="javascript" src="js/dataTables.editor.js"></script>
              <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
            <script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
            <link rel="stylesheet" href="style.css">
 
            <script type="text/javascript" language="javascript">
 
                $(document).ready(function(){
                    $('#divTabla').DataTable();
                 });
            </script>
 
 
    	</head>
	<body>
 
 
		<br><br><br>
		  <?php
 
            $query = 'SELECT * FROM nombre_tabla';
 
            $result = mysql_query($query) or die('Consulta fallida: ' . mysql_error());
 
 
                echo "<table id='divTabla' border='0' class='display' cellspacing='0' width='95%''>\n";
 
                echo "<thead>
                            <tr>
                                <th>nombre encabezado</th>
                                <th>nombre encabezado</th>
                                <th>nombre encabezado</th>
                                <th>nombre encabezado</th>
                                <th>nombre encabezado</th>
                                
                            </tr>
                      </thead>";
 
                    while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {
                        echo "\t<tr>\n";
                        foreach ($line as $col_value) {
                            echo "\t\t<td><center>$col_value</center></td>\n";
                                                    }
 
                        echo "\t</tr>\n";
 
                    }
 
                echo "</table>\n";
 
 
                mysql_free_result($result);
 
        ?>
 
	</body>
	</html>

Solo cambialo a como te funcione.!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

construir tabla con php jquery y datatable

Publicado por aldo (1 intervención) el 03/06/2016 19:40:46
que tal amigo estoy trabajando con el plugin "datatable" y muestro los registros desde la base de datos lo ke pasa que al momento de iniciar sesion en la pagina me carga solo los datos en una tabla pero no me reconoce el plugin. y al momento de recargar la pagina si me lo reconoce y otra veces no ? alguien sabe que estara ocasionando esto?

lo que quiero es que al momento de entrar ala pagina ya tenga cargado el plugin y no este actualizando la pagina cada momento...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

construir tabla con php jquery y datatable

Publicado por Vainas (254 intervenciones) el 21/08/2015 10:23:10
Buenas:

Lo primero de todo tienes herramientas para revisar si has creado bien tu respuesta en php (en este caso creo que quieres retornar un json) y asi al menos sabes si esta bien echo ese paso. Yo de momento solo conozco en chrome 2 plugins: Advance REST client y el otro se llama Postman - REST Client. Busca como funcionan y has prueba sobre tu php, pero de entrada te digo cosas que he visto por encima que no veo claras:

Si al principio de tu php usas $_POST['tag'] por que luego usas $_GET? Si vas a usar un metodo sera o GET o POST pero no los dos.

En cuanto al ajax no es necesario que lo uses ya que datatables tiene sus funciones para obtener los datos para las tablas, aqui tienes los ejemplo: https://www.datatables.net/examples/ajax/objects.html

el funcionamiento mas basico de este plugin es traer la tabla entera y luego hacer busquedas en el lado del cliente. Si lo que quieres es tener una tabla vacia y que se rellene en el momento que el cliente hace la primera consulta pues tendre que consultar mas el manual del plugin por que seguro que se puede hacer pero no tengo idea ahora mismo. Sera usar algo esta funcion: https://datatables.net/reference/api/ajax.url() y asignarle a la url mediante get los parametros a consultar.

Espero haberte ayudado.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

construir tabla con php jquery y datatable

Publicado por jany (1 intervención) el 21/08/2015 16:34:35
Gracias vainas, intentare lo que dices pero antes me puedes ayudar con mi ajax que mejore no me envia los datos a mi php para generaer la consulta sql, ya revise mi codigo php y esta bien.

Ya revise mi codigo en consulta.php y funciona bien, pero aqui cuando coloco la pagina consulta.php en url no hace nada y tampoco recibo errores



Código PHP:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
$(document).ready(function() {
 
$.ajax({
type:'POST',
dataType: 'json',
          url: 'consulta.php',
 
          data:
               {
                 tag: "datos"
 
               },
 
 
          success: function(data)
          {alert(data);
 
              console.log(data);
  var html='';
 
              if(data.length > 0){
                  $.each(data, function(i,item){
                      html += '<tr>';
                            html += '<td>'+item.rut+'</td>';
                            html += '<td>'+item.nombre+'</td>';
 
                            html += '</tr>';
                    });
              }
 
                if(html == '') html = '<tr><td colspan="6">No existen datos..</td></tr>'
 
                $("#tablaCliente tbody").html(html);
        }
 
      });
 
      });
Aca deberia llegar el parametro e iniciar todo el desarrollo de la consulta, pero el parametro url en el ajax no quiere funcionar y no hay errores


Código PHP:

if (isset($_POST['tag'])) {
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

construir tabla con php jquery y datatable

Publicado por Vainas (254 intervenciones) el 21/08/2015 19:49:30
Buenas de nuevo:

Veo todo bien. Implementa error en ajax a ver si te dice algo. Mira tambien si en la consola de chrome sale algun error. He arreglado un punto y coma que faltaba y he agregado la funcion de error para que pruebes, no veo nada mas que este mal:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$(document).ready(function() {
	$.ajax({
		type:'POST',
		dataType: 'json',
		url: 'consulta.php',
		data: { tag: "datos" },
 
success: function(data){
console.log(data);
var html='';
if(data.length > 0){
$.each(data, function(i,item){
	html += '<tr>';
	html += '<td>'+item.rut+'</td>';
	html += '<td>'+item.nombre+'</td>';
	html += '</tr>';
});
}
if(html == '')
	html = '<tr><td colspan="6">No existen datos..</td></tr>';
 
$("#tablaCliente tbody").html(html);
},
error: function (xhr, ajaxOptions, thrownError){
        console.log(xhr.status);
        console.log(thrownError);
      }
});
});


Ya nos comentas.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

construir tabla con php jquery y datatable

Publicado por Cesar (1 intervención) el 10/11/2015 18:00:06
Buen día solo para preguntar si ya resolvieron este problema, de no ser así te recomiendo que visites esta pagina aquí te explican paso a paso lo que debes hacer y si funciona, aquí encontraras el video donde explica que pasos realizar, y también tiene un enlace para el código, supongo que de ahí podrás sacar alguna idea para resolver tu inconveniente.

Suerte!!!


Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar