Tablas Dinamicas con Selects

[Gerardo12]

Buenas tardes estoy trabajando en un proyecto escolar en donde se me pide que cree las busquedas de informacion a traves de tablas pero estas al inicio de cada calumna este un campo de tipo select donde contiene toda la informacion de acuerdo a lo solicitado a traves de una consulta a la base de datos.

la idea es esta


nombre apellidos edad
(aqui un select (aqui un select (aqui un select
con todos los nombre) con todos los apellidos) con todos las edades)

francsco martines hernandes 23
ignacio gutierres zamora 25

al momento que yo elija en el select un dato este sea cargado solo con los que elijo.

alguien podria darme una idea de como hacerlo, no tengo ni idea de eso, . por favor ayudenme secesito de su ayuda.

[memoadian]

usa AJAX, para hacer las peticiones a través de tu lenguaje de servidor, no se si sea php, vb o que se yo.

es solo eso, hacer consultas cada que haces un onChange

[Gerardo12]

encontre el la web el uso de datagrid, lo k pasa y perdon por ser tan raras mis preguntas, todos los codigos k encuentro son a traves de insercion de datos de manera aleatoria lo que yo necesito es poder cargar la informacion desde una base de datos, pero es ahi donde ya me acabe de enredar no se en k parte del codigo ingresar mi consulta, el siguiente codigo es en javascript

Código Javascript:

function generatedata(rowscount, hasNullValues) {
    // preparar los datos
    var data = new Array();
    if (rowscount == undefined) rowscount = 100;
    var firstNames =["Andrew", "Nancy", "Shelley","Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"];
    var lastNames = ["Fuller", "Davolio","Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"];
    var productNames =["Caffe Latte", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"  ];
    var priceValues =["2.25", "1.5", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"];
   
   for (var i = 0; i < rowscount; i++) {
        var row = {};
        var productindex = Math.floor(Math.random() * productNames.length);
        var price = parseFloat(priceValues[productindex]);
        var quantity = 1 + Math.round(Math.random() * 10);
 
        row["id"] = i;
 
        row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
        row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
        row["name"] = row["firstname"] + " " + row["lastname"]; 
        row["productname"] = productNames[productindex];
        row["price"] = price;
        row["quantity"] = quantity;
        row["total"] = price * quantity;
               
        data[i] = row;
    }
 
    return data;
}
 

esta funcion est en un archivo de nombre generardatos.js, pero funciona perfectamente pero no se en donde puedo sustituir ese codigo por mi consulta ami base de datos podrias ayudarme. gracias

[Carlangueitor]

Haces tu consulta con ajax a tu servidor, en esa parte del código, ¿que parte exacta se te dificulta?

[Gerardo12]

hola muchas gracias por responder asta el momento he estado buscando informacion y sigo trabajando con javascript y ya logro conectar la base de datos y obtenerlos tambien pero los datos son almacenados en un json el problema k presento ahora es como mandar a llamar ese json y poder emplearlo. te muestro los codigos son tres archivos pero solo te mostrare dos el de conectar a la base de datos no tengo problemas tengo problemas con lso sigueintes dos.

data.php

Código PHP:

<?php
    #Include the connect.php file
    include('connect.php');
    #Connecar con la base de datos
    //connection String
    $connect = mysql_connect($hostname, $username)
    or die('Could not connect: ' . mysql_error());
    //selecciona la base de datos
    $bool = mysql_select_db($database, $connect);
    if ($bool === False){
       print "can't find $database";
    }
    
    $query = "SELECT * FROM recursoshumanos";
    // filter data.
    if (isset($_GET['filterscount'])) {
        $filterscount = $_GET['filterscount'];
        
        if ($filterscount > 0)
        {
            $where = " WHERE (";
            $tmpdatafield = "";
            $tmpfilteroperator = "";
            // build the query.
            $query = "SELECT * FROM recursoshumanos" . $where;      
        }
    }
 
    $result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
    $orders = array();
 
    // get data and store in a json array
    while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
        $orders[] = array(
            //'OrderDate' => $row['OrderDate'],
            'clave_rh' => $row['clave_rh'],
            'nombre_rh' => $row['nombre_rh'],
            'apellidos' => $row['apellidos'],
            'sexo' => $row['sexo'],
            'estado_civil' => $row['estado_civil'],
            'fecha_nacimiento' => $row['fecha_nacimiento'],
            'nacionalidad' => $row['nacionalidad'],
            'direccion' => $row['direccion'],
            'codigo_postal' => $row['codigo_postal'],
            'tel_movil' => $row['tel_movil'],
            'tel_fijo' => $row['tel_fijo'],
            'email' => $row['email'],
            'fotografia' => $row['fotografia'],
            'grado_academico' => $row['grado_academico'],
            'institucion_academica' => $row['institucion_academica'],
            'area_conocimiento' => $row['area_conocimiento'],
            'descripcion_area' => $row['descripcion_area'],
            'especialidad' => $row['especialidad'],
            'lengua_extrangera' => $row['lengua_extrangera'],
            'doc_cv' => $row['doc_cv'],
            'categoria' => $row['categoria'],
            'fecha_registro' => $row['fecha_registro']
          );
    }
    $data = json_encode($orders);
    
?>
 

el siguiente archivo igualmente es un php

Código PHP:

<script type="text/javascript">
    
        
     $(document).ready(function () {
            // prepare the data
            var theme = 'classic';
      
            var source =  {
            //aqui considero yo que deveria mandar a llamar al json 
                 datatype: "json",
                 datafields: [
                     { name: 'clave_rh'},
                     { name: 'nombre_rh'},
                     { name: 'apellidos'},
                     { name: 'sexo'},
                     { name: 'estado_civil'},
                     { name: 'fecha_nacimiento'},
                     { name: 'nacionalidad'},
                     { name: 'direccion'},
                     { name: 'codigo_postal'},
                     { name: 'tel_movil'},
                     { name: 'tel_fijo'},
                     { name: 'fotografia'},
                     { name: 'grado_academico'},
                     { name: 'institucion_academica'},
                     { name: 'area_conocimiento'},
                     { name: 'descripcion_area'},
                     { name: 'especialidad'},
                     { name: 'lengua_extrangera'},
                     { name: 'doc_cv'},
                     { name: 'categoria'},
                     { name: 'fecha_registro'}
                ],
                url: 'data.php',
                filter: function()
                {
                    // actualizar el grid y envia una solicitud al servidor.
                    $("#jqxgrid").jqxGrid('updatebounddata');
                }
            };      
            
             var dataAdapter = new $.jqx.dataAdapter(source);
            
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid( {        
                width: 1000,
                source: dataAdapter,
                theme: theme,
                showfilterrow: true,
                filterable: true,
                columns: [
                      { text: 'Nº Control',filtertype: 'list', datafield: 'clave_rh', width: 200 },
                      { text: 'Nombre',filtertype: 'list', datafield: 'nombre_rh', width: 200 },
                      { text: 'Apeidos', filtertype: 'list',datafield: 'apellidos', width: 180 },
                      { text: 'Sexo',filtertype: 'list', datafield: 'sexo', width: 100 },
                      { text: 'Estado Civil',filtertype: 'list', datafield: 'estado_civil', width: 140 },
                      { text: 'Fecha de Nacimiento',filtertype: 'list', datafield: 'fecha_nacimiento', width: 200 },
                      { text: 'Nacionalidad', filtertype: 'list',datafield: 'nacionalidad', width: 180 },
                      { text: 'Dirección', filtertype: 'list',datafield: 'direccion', width: 100 },
                      { text: 'Codigo Postal', filtertype: 'list',datafield: 'codigo_postal', width: 140 },
                      { text: 'Telefono Celular', filtertype: 'list',datafield: 'tel_movil', width: 200 },
                      { text: 'Telefono Fijo (Casa)', filtertype: 'list',datafield: 'tel_fijo', width: 180 },
                      { text: 'Fotografia', filtertype: 'list',datafield: 'fotografia', width: 100 },
                      { text: 'Grado Academico', filtertype: 'list',datafield: 'grado_academico', width: 140 },
                      { text: 'Institucion Academica', filtertype: 'list',datafield: 'institucion_academica', width: 200 },
                      { text: 'Area de Conocimiento',filtertype: 'list', datafield: 'area_conocimiento', width: 180 },
                      { text: 'Descripción del Area de Conocimiento', filtertype: 'list',datafield: 'descripcion_area', width: 350 },
                      { text: 'Especialidad', filtertype: 'list',datafield: 'especialidad', width: 140 },
                      { text: 'Idioma Extrangero que maneja',filtertype: 'list', datafield: 'lengua_extrangera', width: 200 },
                      { text: 'Curriculum Vitae', filtertype: 'list',datafield: 'doc_cv', width: 180 },
                      { text: 'Categoria', filtertype: 'list',datafield: 'categoria', width: 100 },
                      { text: 'Fecha de Registro',filtertype: 'list', datafield: 'fecha_registro', width: 140 }
                      
                  ]
            });
        });
    </script>
 

como puedes empleo algunos otros javascripts pero esos son solo para darle la funcionalidad de filtrado a la tabla, como comente al principio no se esactamente en que apartado podria ingresar el json o no se si exista otra forma de realizarlo.

desde ya muchisimas gracias pro tu respuesta, estoy desesperado por k necesito terminarlo pronto y ya no se k mas hacer por favor ayudame gracias.