Foros del Web » Programando para Internet » Jquery »

Dos consultas sobre datatables

Estas en el tema de Dos consultas sobre datatables en el foro de Jquery en Foros del Web. Buenas, estoy trabajando con datatables que se conectan a una bd para poder llenarse, despues de pelear unos dias logre que me funcionaran correctamente. El ...
  #1 (permalink)  
Antiguo 23/01/2015, 07:52
 
Fecha de Ingreso: enero-2015
Ubicación: Valparaiso
Mensajes: 88
Antigüedad: 9 años, 11 meses
Puntos: 0
Dos consultas sobre datatables

Buenas, estoy trabajando con datatables que se conectan a una bd para poder llenarse, despues de pelear unos dias logre que me funcionaran correctamente. El llamado a la tabla es mediante la funcion window.onload en donde se llama a una funcion query que devuelve la tabla (esta llega a un div en la pagina principal).

La primera duda es que si se pueden poner los atributos de la tabla como elementos clickeables (ya probe de varias formas y aun no puedo).

La segunda duda que tengo es que nesesito traer 2 datatables a una pagina pero que solo se vea una (se selecciona con un radio la que se quiera ver). Aun no logro hacer esto, al ocultar la primera tabla y mostrar la segunda la pagina queda en blanco.
  #2 (permalink)  
Antiguo 23/01/2015, 16:42
Avatar de andresgarciadev  
Fecha de Ingreso: junio-2013
Mensajes: 218
Antigüedad: 11 años, 5 meses
Puntos: 32
Respuesta: Dos consultas sobre datatables

necesitas explicar mas.... primero
como que atribuos clickeables? que quieren que hagan o que?
y sobre el segundo.... pues si no muestras tu codigo nadie sabra por que no te funciona... somos progamadores no adivinos D:
  #3 (permalink)  
Antiguo 27/01/2015, 06:39
 
Fecha de Ingreso: enero-2015
Ubicación: Valparaiso
Mensajes: 88
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Dos consultas sobre datatables

La segunda consulta la solucione, solo era un error de codigo. Y con repecto a "clickeables" me refiero a que se pueda hacer click en un atributo y se ejecute una funcion, se redireccione a a otra pagina y/o se guarde un atributo
  #4 (permalink)  
Antiguo 27/01/2015, 16:58
Avatar de andresgarciadev  
Fecha de Ingreso: junio-2013
Mensajes: 218
Antigüedad: 11 años, 5 meses
Puntos: 32
Respuesta: Dos consultas sobre datatables

te refieres a un td dentro de la tabla?
Código Javascript:
Ver original
  1. $(document).on("click","table tr td",function(){...})
no se si a esto te refieres ya que de esta forma al darle click a cualquier celda de la tabla se activara el evento y con $(this) obtendras la celda clickeada
  #5 (permalink)  
Antiguo 28/01/2015, 06:59
 
Fecha de Ingreso: enero-2015
Ubicación: Valparaiso
Mensajes: 88
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Dos consultas sobre datatables

Cita:
Iniciado por andresgarciadev Ver Mensaje
te refieres a un td dentro de la tabla?
Código Javascript:
Ver original
  1. $(document).on("click","table tr td",function(){...})
no se si a esto te refieres ya que de esta forma al darle click a cualquier celda de la tabla se activara el evento y con $(this) obtendras la celda clickeada
por ahí va la cosa pero es posible limitar el "click" a solo algunas de las filas o columnas? y también que al pasar el mouse por sobre las columnas que puedan ser clickeadas este las reconozca como clickeables y no como texto.

PD: Si no se entiende lo ultimo, me refiero a que el cursor al momento de pasar por encima de las celdas que tengan activado el evento tengan esta forma:



y no esta:
  #6 (permalink)  
Antiguo 29/01/2015, 14:29
Avatar de andresgarciadev  
Fecha de Ingreso: junio-2013
Mensajes: 218
Antigüedad: 11 años, 5 meses
Puntos: 32
Respuesta: Dos consultas sobre datatables

pues depende, esas filas deben tener algo que las distinga de las demas, algo como una clase, que sea una fila si otra no y asi concecutivamente, o algo asi... lo cosa es q deben tener algo en comun para hacer lo que me dices
si me dices que tienen de especial esas filas que si serian clicleables te podria decir tal vez como
  #7 (permalink)  
Antiguo 29/01/2015, 15:26
 
Fecha de Ingreso: enero-2015
Ubicación: Valparaiso
Mensajes: 88
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Dos consultas sobre datatables

La unica diferencia es de donde vienen los datos, cada columna es un atributo distinto dentro la bd, en este caso necesito que al hacer click en alguna celda de la columna con titulo "Nombre" (donde ingresan los valores de $edit_obras[1]) la pagina sea redirigida hacia otra y que el valor de la celda clickeada sea guardado.

Código:
<?php 
	session_start();
    $usuario = $_SESSION['usuario'];
    if(!isset($usuario)){
        header("Location: index.php");
    }
	//include_once('conexion.php');
	$con=mysqli_connect("localhost","root","","proyecto7db");
	// Check connection
	if (mysqli_connect_errno())
	  {
	  echo "Failed to connect to MySQL: " . mysqli_connect_error();
	  }
	if (isset($_SESSION['cliente'])){
	    $clien = $_SESSION['cliente'];
		$sql = "SELECT * FROM obra WHERE cod_cliente = $clien AND estado = 1;";
		//unset($_SESSION['obra']);
	}else{
		$sql = "SELECT * FROM obra WHERE estado = 1;";
	}
	//$sql = "SELECT * FROM cliente WHERE estado = 1;";
    //<button type="reset" class="loginButton" value = "cancelar">Borrar datos </button>
	$res = $con->query($sql);
	$ide = "";
	echo "<div id='pad-wrapper' class='datatables-page' style='margin-top:0px;'>";            
	echo "           <div class='row'>";
	echo "               <div class='col-md-8'>";
	echo "                    <form action='detalle.php' method='POST'>";
	echo "                    	<table id='example2' class='table table-hover'>";
	echo "                        <thead>";
	echo "                            <tr>";
	echo "                                <th tabindex='0' rowspan='1' colspan='1'></th>";
	echo "                                <th tabindex='0' rowspan='1' colspan='1'></th>";
	echo "                                <th tabindex='0' rowspan='1' colspan='1'></th>";
	echo "                                <th style = 'display:none;' tabindex='0' rowspan='1' colspan='1'>ID</th>";
	echo "                                <th tabindex='0' rowspan='1' colspan='1'>Nombre</th>";
	echo "                                <th tabindex='0' rowspan='1' colspan='1'>Codigo Cliente</th>";
	echo "                                <th tabindex='0' rowspan='1' colspan='1'>Fecha Inicio</th>";
	echo "                                <th tabindex='0' rowspan='1' colspan='1'>Fecha Final</th>";
	echo "                            </tr>";
	echo "                        </thead>";
	echo "                        <tbody>";
			while ($edit_obras = $res->fetch_array()) {
	echo "                            <tr>";
	echo "                                <td class='center'><input type='radio' name ='obra' value=".$ide=$edit_obras[0]."><br></td>";
	echo "                                <td class='center'><a onclick='LDO(".$ide=$edit_obras[0].");' data-toggle='modal' data-target='#myModal-EditOb' style='cursor:pointer;'><i class='icon-edit'></i></a></td>";
	echo "                                <td class='center'><a onclick='MO(".$ide=$edit_obras[0].");' data-toggle='modal' data-target='#myModal-DeleteOb' style='cursor:pointer;'><i class='icon-remove'></i></a></td>";
	echo "                                <td style = 'display:none;'>".$edit_obras[0]."</td>";
	echo "                                <td class='center'>".$edit_obras[1]."</td>";
	echo "                                <td class='center'>".$edit_obras[2]."</td>";
	echo "                                <td class='center'>".$edit_obras[3]."</td>";
	echo "                                <td class='center'>".$edit_obras[4]."</td>";
	echo "                            </tr>";
			}
	echo "                        </tbody>";
	echo "                    </table><br />";
	echo "                  <br /><button type='submit' name= 'envio' onclick='CrearObra()' class='btn-flat' data-toggle='modal' data-target='#myModal-New'>Nueva Obra</button>";
	echo "                  <br /><button type='submit' name= 'envio' class='btn-flat' id='detalles' value='detalles'>Ver Detalles</button>";
	echo "				   </form>";
	echo "                </div>";
	echo "            </div>";
	echo "        </div>";
	/*PARTE DE CREAR, EDITAR Y ELIMINAR CLIENTE*/
	echo "
	<!-- Modal para Nuevo-->
	<div class='modal fade' id='myModal-New' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
	</div><!-- /.modal -->";	  
	echo "
	<!-- Modal para Editar-->
	<div class='modal fade' id='myModal-EditOb' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>	  
	</div><!-- /.modal -->";
	echo "
	<!-- Modal para Eliminar-->
	<div class='modal fade' id='myModal-DeleteOb' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>	  
	</div><!-- /.modal -->";
	echo " <script type='text/javascript'>
			$(document).ready(function() {
				$('#example2').dataTable({
					'sPaginationType': 'full_numbers',
					'oLanguage':{
						'sProcessing':     'Cargando...',
						'sLengthMenu':     'Mostrar _MENU_ registros',
						'sZeroRecords':    'No se encontraron resultados',
						'sEmptyTable':     'Ningún dato disponible en esta tabla',
						'sInfo':           'Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros',
						'sInfoEmpty':      'Mostrando registros del 0 al 0 de un total de 0 registros',
						'sInfoFiltered':   '(filtrado de un total de _MAX_ registros)',
						'sInfoPostFix':    '',
						'sSearch':         'Buscar:',
						'sUrl':            '',
						'sInfoThousands':  '',
						'sLoadingRecords': 'Cargando...',
						'oPaginate': {
							'sFirst':    'Primero',
							'sLast':     'Último',
							'sNext':     'Siguiente',
							'sPrevious': 'Anterior'
						},
						'oAria': {
							'sSortAscending':  ': Activar para ordenar la columna de manera ascendente',
							'sSortDescending': ': Activar para ordenar la columna de manera descendente'
						}
					},
					'aaSorting': [[ 0, 'desc' ]],//ordenar
					'iDisplayLength': 5,
					'aLengthMenu': [[1, 2, 5, 10, 20, 50, -1], [1, 2, 5, 10, 20, 50, 'All']]
				});
			});			
			</script>";
 ?>
  #8 (permalink)  
Antiguo 29/01/2015, 17:03
Avatar de andresgarciadev  
Fecha de Ingreso: junio-2013
Mensajes: 218
Antigüedad: 11 años, 5 meses
Puntos: 32
Respuesta: Dos consultas sobre datatables

quieres que solo sea clicleable la celda donde se imprime el nombre y que al pasar sobre ella se sombree?
pues siendo ese el caso en el bucle cuando lo imprimes agregale otra clase
Código PHP:
Ver original
  1. <td class='center name'>".$edit_obras[1]."</td>";
despues con css al evento :hover de name dale otro background junto con un cursor pointer
y con jquery
Código Javascript:
Ver original
  1. $(document).on("click","table tr td.name",function(){...})
  #9 (permalink)  
Antiguo 29/01/2015, 19:26
 
Fecha de Ingreso: enero-2015
Ubicación: Valparaiso
Mensajes: 88
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Dos consultas sobre datatables

Cita:
Iniciado por andresgarciadev Ver Mensaje
quieres que solo sea clicleable la celda donde se imprime el nombre y que al pasar sobre ella se sombree?
pues siendo ese el caso en el bucle cuando lo imprimes agregale otra clase
Código PHP:
Ver original
  1. <td class='center name'>".$edit_obras[1]."</td>";
despues con css al evento :hover de name dale otro background junto con un cursor pointer
y con jquery
Código Javascript:
Ver original
  1. $(document).on("click","table tr td.name",function(){...})
Quiero que al clickear la celda me envie a otra pagina que contiene otra tabla, esta tabla tiene ese atributo en comun con la primera (y se debe usar como filtro).
  #10 (permalink)  
Antiguo 30/01/2015, 10:11
Avatar de andresgarciadev  
Fecha de Ingreso: junio-2013
Mensajes: 218
Antigüedad: 11 años, 5 meses
Puntos: 32
Respuesta: Dos consultas sobre datatables

pues con lo que te dije funcionaria, solo obten falta hacer un $(this).text()
para obtener el texto y concatenerlo en la url de esa otra pagina a la q quieres enviarlo
y en esa otra pagina obten el get y lo demas es php

Etiquetas: datatables
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:54.