PHP - BOOSTSTRAP: CÓDIGO PARA BOTÓN CON LUPA SEARCH

 
Vista:
sin imagen de perfil
Val: 11
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

BOOSTSTRAP: CÓDIGO PARA BOTÓN CON LUPA SEARCH

Publicado por Jose Francisco (26 intervenciones) el 10/09/2019 03:34:11
Hola estimados, tengo el siguiente código de https://www.w3schools.com/bootstrap/bootstrap_filters.asp

1
2
3
4
5
6
7
8
9
10
<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

Ya tengo programado un index donde está la lista de la tabla , necesito colocar un campo search y no puedo completar el código del ejemplo.-

que se coloca en ("#myInput")
y en "#myTable tr"

AMPLIANDO MI CONSULTA, EL OBJETIVO ES:
LOGRAR LO SIGUIENTE DE ÉSTE EJEMPLO PERO CON SEARCH EN MI INDEX.PHP PERO TOMAR LOS DATOS DE MI TABLA DE BASE DE DATOS DE MYSQL QUE YA LA TENGO PREPARADA Y FUNCIONA BIEN.
https://www.w3schools.com/code/tryit.asp?filename=G7U5CTSL4Y9J

Aguardo respuesta
Muchas gracias
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
Imágen de perfil de Kathyu
Val: 2.214
Oro
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

BOOSTSTRAP: CÓDIGO PARA BOTÓN CON LUPA SEARCH

Publicado por Kathyu (677 intervenciones) el 10/09/2019 16:29:45
Algún error? porque si copia exactamente el código, el ejemplo funciona.

Debe faltarle alguna librería del header, como le digo, copie y pegue el código tal cual y funciona.
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
sin imagen de perfil
Val: 11
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

BOOSTSTRAP: CÓDIGO PARA BOTÓN CON LUPA SEARCH

Publicado por Jose Francisco (26 intervenciones) el 10/09/2019 16:43:09
Si si , el ejempolo por si solo fuinciona porque lee los datos del mismo script, pero necesito que me traiga los datos de mi MYSQL, DATABASE/TABLA.-

Como lo hago?
No encuentro explicación.-

Adjunto otro ejemplo que falta código para traer de la base de datos y tambien completar con searh, update, delete, etc , es el que me gustaría hacer:

https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=elegant-table-design

Tengo hecho un ABM completo en otromprograma pero SIN EL SEARCH que es ,lo que también necesito ,el cual muestro en éste link

Aguardo respuesta
Gracias!
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 Kathyu
Val: 2.214
Oro
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

BOOSTSTRAP: CÓDIGO PARA BOTÓN CON LUPA SEARCH

Publicado por Kathyu (677 intervenciones) el 10/09/2019 17:35:13
Sin revisar mucho, le diré que en efecto el JS se mete con su html y usted va a crear ese html con los resultados de su query, al final en vez de un <td> con el nombre de Mary, usted tendra un <td> con el echo de $nombre que puede ser igual Mary.

El JS va a tomar siempre el valor del <td> Mary, asi que su ejemplo debe funcionar igual.

Que usted tenga que traer de la DB y no sepa hacerlo, es algo muy diferente y debe indicarnos que errores o dudas tiene para hacer su tabla html desde la DB.
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
sin imagen de perfil
Val: 11
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

BOOSTSTRAP: CÓDIGO PARA BOTÓN CON LUPA SEARCH

Publicado por Jose Francisco (26 intervenciones) el 10/09/2019 21:11:24
Hola , su primer respuesta es correcta ya sé ese tema.-
Me falta traer los datos de la database , NO me da errorres.-
Si ud sabe como hacerlo favor de pasarme algun ejemplo con SEARCH junto con /UPDATE y DELETE , ETC-
Gracias
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 Kathyu
Val: 2.214
Oro
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

BOOSTSTRAP: CÓDIGO PARA BOTÓN CON LUPA SEARCH

Publicado por Kathyu (677 intervenciones) el 10/09/2019 21:40:04
Es que debe dividir las cosas, osea una cosa es armar la tabla con datos desde la DB y otra es el script JS del ejemplo que funciona bien.

Diga que tiene programado, ponga código y veamos como salimos
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
sin imagen de perfil
Val: 11
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

BOOSTSTRAP: CÓDIGO PARA BOTÓN CON LUPA SEARCH

Publicado por Jose Francisco (26 intervenciones) el 10/09/2019 21:49:17
OK, AHI LE PASÉ EL INDEX.PHP DE MI ABM (ES EL INICIO DONDE TIENE QUE IR LA INSTRUCCIÓN SEARCH)
MUCHAS GRACIAS
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
sin imagen de perfil
Val: 11
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

BOOSTSTRAP: CÓDIGO PARA BOTÓN CON LUPA SEARCH

Publicado por Jose Francisco (26 intervenciones) el 10/09/2019 21:45:48
SÉ COMO TRAER LOS DATOS DE LA TABLA , ADJUNTO EL INDEX.PHP QUE DERIVA AL UPADTE, DELETE, READ, ETC.
FUNCIONA PERFECTO, POR FAVOR DONDE COLOCO EL CÓDICO DE SEARCH Y COMO TRAIGO LOS DATOS CON SEARCH??.-

CON LA INSTRUCCIÓN <?php include('config.php'); ? TRAIGO LOS DATOS DE LA TABLA (INSERTO, GRABO, MODIFICO OK)
AGUARDO RESPUESTA
DESDE YA MUCHAS GRACIAS

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
#Detalle de empleados
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dashboard</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
 
    <?php  include('config.php'); ?
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
    <style type="text/css">
        .wrapper{
            width: 650px;
            margin: 0 auto;
        }
        .page-header h2{
            margin-top: 0;
        }
        table tr td:last-child a{
            margin-right: 15px;
        }
 
 
    </style>
    <script type="text/javascript">
        $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip();
        });
 
 
 
 
     </script>
</head>
<body>
    <div class="wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="page-header clearfix">
                        <h2 class="pull-left">Detalle de Empleados</h2>
                        <a href="create.php" class="btn btn-success pull-right">Agregar nuevo empleado</a>
                        <a href="ordenasc.php" class="btn btn-success pull-right">Ordenar Nombre Ascendente </a>
 
                        <a href="http://pc/sistem/menu.php" class="btn btn-success pull-right">Salir</a>
 
                        //<a href="search-form.php"class="btn btn-success pull//-righ">Buscar Nombre</a>
 
                        <a href="filterdatabase.php"class="btn btn-success pull-righ">Buscar Nombre database</a>
 
 
 
                       <script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("filterdatabase.php").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>
 
 
 
 
 
 
                      <!--- Search form --->
 
 
 
     <div class="md-form mt-0">
 
    <div class="form-control">
     <input class="filterdatabase.php" type="text" placeholder="Search" aria-label="Search">
 
                    </div>
                    <?php
                    // Include config file
                    require_once "config.php";
 
                    // Attempt select query execution
                    $sql = "SELECT * FROM employees";
                    if($result = mysqli_query($link, $sql)){
                        if(mysqli_num_rows($result) > 0){
                            echo "<table class='table table-bordered table-striped'>";
                                echo "<thead>";
                                    echo "<tr>";
                                        echo "<th>#</th>";
                                        echo "<th>Name</th>";
                                        echo "<th>Address</th>";
                                        echo "<th>Salary</th>";
                                        echo "<th>Action</th>";
                                    echo "</tr>";
                                echo "</thead>";
                                echo "<tbody>";
                                while($row = mysqli_fetch_array($result)){
                                    echo "<tr>";
                                        echo "<td>" . $row['id'] . "</td>";
                                        echo "<td>" . $row['name'] . "</td>";
                                        echo "<td>" . $row['address'] . "</td>";
                                        echo "<td>" . $row['salary'] . "</td>";
                                        echo "<td>";
                                            echo "<a href='read.php?id=". $row['id'] ."' title='View Record' data-toggle='tooltip'><span class='glyphicon glyphicon-eye-open'></span></a>";
                                            echo "<a href='update.php?id=". $row['id'] ."' title='Update Record' data-toggle='tooltip'><span class='glyphicon glyphicon-pencil'></span></a>";
                                            echo "<a href='delete.php?id=". $row['id'] ."' title='Delete Record' data-toggle='tooltip'><span class='glyphicon glyphicon-trash'></span></a>";
                                        echo "</td>";
                                    echo "</tr>";
                                }
                                echo "</tbody>";
                            echo "</table>";
                            // Free result set
                            mysqli_free_result($result);
                        } else{
                            echo "<p class='lead'><em>No records were found.</em></p>";
                        }
                    } else{
                        echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
                    }
 
                    // Close connection
                    mysqli_close($link);
                    ?>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
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 Kathyu
Val: 2.214
Oro
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

BOOSTSTRAP: CÓDIGO PARA BOTÓN CON LUPA SEARCH

Publicado por Kathyu (677 intervenciones) el 10/09/2019 23:18:11
Diablos que fea esa tabla

1- Nunca convine PHP con HTML eso es una mala practica.
2- Según veo debe adecuar su JS al HTML que tiene, por ejemplo debe poner el id de la tabla, tal cual lo estaría llamando en el script, por ejemplo en el script utilizan
1
2
3
$("#myTable tr").filter(function() {
  $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
Pero usted ni un id le ha puesto a su tabla. Entonces lo primero es encontrar y entender la lógica del Script, cambie el id de la tabla y comience a probar, porque por lógica sabrá que no puedo armar su escenario desde acá.
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
sin imagen de perfil
Val: 11
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

BOOSTSTRAP: CÓDIGO PARA BOTÓN CON LUPA SEARCH

Publicado por Jose Francisco (26 intervenciones) el 11/09/2019 00:42:03
Hola, pero si ese es el primer ejemplo que yo le pase sin datos porque no se como se programa y no se que va ahí ,,en “#mytablr tr”,,,Puse la tabla y traté de combinarlo con el último programa , poniendo el id pero me funcionó a medias y no me trae los datos de la tabla , así que lo saque y le envié el último programa sin esos datos , continuaré tratando de encontrar la solución.
No se preocupe , gracias igual.
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 Kathyu
Val: 2.214
Oro
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

BOOSTSTRAP: CÓDIGO PARA BOTÓN CON LUPA SEARCH

Publicado por Kathyu (677 intervenciones) el 11/09/2019 18:32:16
Tranquilo no se frustre a la primera.

Lo que se puede ver es que sus conocimientos son bastante primerizos, en el JS va el id de su tabla, osea a su tabla le debe poner un id. Cosa que en serio no es del otro mundo.

1
<table id="idTabla" name="nameTabla"></table>
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

BOOSTSTRAP: CÓDIGO PARA BOTÓN CON LUPA SEARCH

Publicado por José Francisco (1 intervención) el 11/09/2019 22:52:17
Hola , si, si hace 20 días de comencé con php combinado con booststrap y algo de Ajax y vengo de foxpro 9 , pero ésto es muy superior y lo estoy corriendo en un hosting. Que alquile por un año con opción a renovar.
Ya tengo hecho una ABM en php ( como le contaba) con un login de entrada y funciona ok y necesito agregar el Search o filter , hay muchos ejemplos pero todo en uno como uno quiere es difícil , bueno me falta aprender .
Mi tabla empleados ya tiene un campo que se llama íd que es un int. Autoincremental, ,, y otro campo que se llama name y es un campo varchar.

Entonces sería así? : <table id = “empleados” name =“empleados”> ,,,,,, o : <table id = “id.empleados” name =“name. empleados”> ,,,,?
En foxpro se pone de la última forma que puse.
Aguardo respuesta , muchas gracias .
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 Kathyu
Val: 2.214
Oro
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

BOOSTSTRAP: CÓDIGO PARA BOTÓN CON LUPA SEARCH

Publicado por Kathyu (677 intervenciones) el 11/09/2019 23:24:09
Creo que esta mezclando datos, conceptos, códigos, ingredientes, todo !!!

1
2
Mi tabla empleados ya tiene un campo que se llama íd que es un int. Autoincremental, ,,
y otro campo que se llama name y es un campo varchar.

Eso es parte de la data, yo me refería a la tabla HTML, el contenedor de la data que usted recupera, no se confunda, use el código que le puse anteriormente
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
sin imagen de perfil
Val: 11
Ha mantenido su posición en PHP (en relación al último mes)
Gráfica de PHP

BOOSTSTRAP: CÓDIGO PARA BOTÓN CON LUPA SEARCH

Publicado por Jose Francisco (26 intervenciones) el 13/09/2019 01:54:03
Hola, lo que necesito es traer los datos de la tabla que le mencioné que está en mysql , con el search o filter.-
No tiene algún ejemplo como para pasarme?, para ud debe ser fácil si conoce éste lenguaje.-
Si no tiene seguiré estudiando el tema por otro lado.-
Desde ya gracias
Slds
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