Datatables - Insertar filtros en las columnas.

Aprendemos a insertar filtros en cada columna de la tabla usando la extensión FixedHeader y el uso de Jquery #clone
#datatables #jquery
Link de descarga del proyecto.
www.dropbox.co...
Extensión #fixedheader
datatables.net...

[@jcorderob]

Excelente trabajo. Felicitaciones y gracias

[@informaticadp]

Muchas gracias!!

[@alvarobencosme5348]

Muchas gracias. Tus videos sobre las datatable me han ayudado muchooo.

[@informaticadp]

Muchas gracias a vos Alvaro! Saludos!

[@MeGaDAzA]

Muchas gracias por su explicación, me ayudo mucho en un proyecto que estoy realizando!

[@informaticadp]

Gracias a vos Fabián! Saludos estimado.

[@wr3880]

Excelente tu video y como transmites tu conocimiento. Mil gracias!

[@informaticadp]

Muchas gracias estimado! Saludos!

[@josechirino5168]

Gran video, bien explicado. Esperando con ansias más contenido de datatables.

[@informaticadp]

Muchas gracias Jose!

[@alfcoc]

Este muchacho hace buen contenido, recomendado

[@informaticadp]

Muchas gracias!

[@justinianocatuntayujra6833]

De ante mano gracias por compartir tu conocimiento! Te solicitaría un ejemplo con 2 tablas relacionadas. Saludos

[@informaticadp]

Gracias a vos! Si, está pendiente un CRUD con tablas relacionadas. Estoy viendo si lo hago junto con un MVC. Vamos a ver...

[@justinianocatuntayujra6833]

@@informaticadp que bueno, estaré atento!

[@Ronin-iu3bg]

Hola! Muy buen video! Muchas gracias por compartir tus conocimientos!

[@informaticadp]

Muchas gracias Ronin! Saludos!

[@Ronin-iu3bg]

@@informaticadp ¿Podrías indicarme como hacer para poner filtro solo a una o dos columnas? Me sería de mucha ayuda. Desde ya muchas gracias!

[@Ronin-iu3bg]

Buenas tardes! Ya lo he podido solucionar el tema de filtrar solo dos columnas. Quisiera saber si tienes algún video que me indique como agregar y utilizar datepicker en mi proyecto. Desde ya muchas gracias!

[@tornadolpc]

@@Ronin-iu3bg Hola Ronin como seria para poner filtro solo a dos columnas

[@matiasderobertis2436]

Como siempre muy claro! Gracias por el aporte

[@informaticadp]

Muchas gracias a vos Matías!

[@alejandrarubio3675]

mil gracias excelente explicación.

[@informaticadp]

Muchas gracias Alejandra!!!

[@concejomunicipaldelapaz7683]

muchas gracias, no funcionan con Server-side?

[@YISUSVILELA]

hola como haria para solo poner el filto en 2 columnas o 3 o que sea la primera y la ultima se puede personalidad eso? o solo se puede hacer en todas las columnas?

[@argentino00000]

nadie he visto realize un crud completo con imagenes creo si lo hacen tendran mucho exito. gracias por escuchar un saludo

[@informaticadp]

Hola Mariano, voy a preparar un crud con imágenes, explicacod al detalle.

[@argentino00000]

hola .muchas gracias .sigo siempre tus videos y si haces un crud con imagenes te lo agraceceriamos. muchas gracias

[@braianjosefernandez6055]

Buenas espero a alguien le sirva, a mi no me gustaba que se clonara por que me dejaba con 2 thead en mi tabla y quedaba muy feo, entonces lo que hize fue directamente ejecutar la funcion de la extencion sobre mi tabla, ademas filtre solo por los campos que yo queria, y me quedo asi la función $('#example thead th').each( function (i) { var title = $(this).text(); //es el nombre de la columna //este if es para filtrar las columnas que no quiero que se hagan las busquedas if (!(title == 'Instancia' || title == 'Fecha de creación' || title == 'Usuario de Carga' || title == 'Acciones')) { $(this).html( ''+title+'' ); $( 'input', this ).on( 'keyup change', function () { if ( table.api().column(i).search() !== this.value ) { table .api().column(i) .search( this.value ) .draw(); } }); } });

[@lupitasaro3570]

Hola crees que te pueda contactar?

[@erickharoldariasreategui1606]

Hola muy buena explicación, usted cree que me podría indicar un tutorial de usted que filtre rango de fechas datetable. le agradecería mucho, es que quiero aprender sobre rango de fechas usando datatable. saludos para usted muy buen curso.

[@3Bluewind]

Hola, de casualidad encontraste el tutorial p rango de fechas? ando en las mismas

[@manuelbarrios7891238]

Muy buen aporte, sin embargo tengo una pregunta, cuando quiero que los filtros sean "select" en vez de un imput para ahorrarle al usuario el tener que editar, como me traigo los valores de las columnas y los formateo(? lo intente y solo pude traerme los que se pintan por pagina (Los primeros diez), de ahi en adelante ya no pude continuar, gracias por tu video y tu aporte, espero con ansias tu respuesta - By Hellframco Developer~.

[@oraliarivera3125]

Muchas gracias excelente explicación, como le podría hacer para conectarlo con una BD de mysql y PHP, tendrás algún vídeo

[@informaticadp]

Muchas gracias! Hay mucho contenido en el canal con php y mysql. Saludos.

[@genuinosys]

Excelente video, cómo se haría cuando hay tablas relacionadas , puede funcionar ?

[@informaticadp]

Muchas gracias!Si hay videos en el canal con tablas relacionadas

[@JELEO154]

Excelente vídeo, y demás que tienes en el canal. *** Deseo Ayuda de cómo aplicar éste tipo de filtro a una tabla cargada desde una base de datos. ¿Me podría ayudar por favor ?

[@antoniomx1875]

En lugar de , se puede hacer con un ?

[@dulcemariasanchezcastono784]

Quisiera saber como elimino el filtro a una sola columa, osea que no me coloque el filtro e input en la ultima columna por ejemplo

[@carlosgomez7002]

Buenísimo. Gracias.

[@informaticadp]

Gracias Carlos!!

[@mtro.josuemanuelcenolvera6779]

como hago para mostrar muchas columnas casi 25 columnas de una tabla y que sea responsivo

[@danielmenasorett9661]

Hola Excelente Video. Una pregunta. Necesito colocar dentro del select un parametro que proviene desde html para que muestre solo los datos que necesito. No por filter externo, si no interno desde el select. Comohago para pasar ese parametro al archivo php desde html

[@informaticadp]

Muchas gracias Daniel! En esos caso lo mejor es utilizar ajax, pedis lo que queres y lo traes en formato json. Y así llenas el select. Luego lo pasas adonde queres. Saludos.

[@carmonarya]

Excelente ejemplo

[@informaticadp]

Muchas Gracias!

[@pedrovelez3963]

se puede agregar un scroll horizontal con las busqueda por columnas?? cuando le pongo el scrollX se borra los input de busqueda de cada columna

[@Westerwaldcopter]

Como puedo Insertar solo algunos Datos a la Tabla aun que saque todos los Datos de la Base de Datos. Saco todos los Datos porque lo quiero Insertar al Modal a la hora de Editar pero para que la Tabla en la Pagina no sea tan grande solo quiero que se muestren algunos datos no todos los que salgan de la Base de Datos

[@jorgeisaacgutierrezmontano6578]

Use tu ejemplo pero al momento de hacer una consulta con un millón registro con 27 campos el proceso de consulta se tarda 5 minutos. Como podria mejorar el tiempo muchas gracias por tus vídeos. Saludos

[@enriquegalicia6864]

Tengo el mismo problema y solo tengo 1000 registros

[@informaticadp]

Hola, recién probé este ejemplo con miles de registros y lo hace perfecto sin demora. Usando Server-side. Como mostras los datos Jorge? kzbin.info/www/bejne/onW6hmmApZV4ga8

[@informaticadp]

Hola Enrique, lo mismo que le pregunte a Jorge, lo probé por ejemplo con 5000 registros usando procesamiento Server-side y ningún problema. kzbin.info/www/bejne/onW6hmmApZV4ga8

[@hectorportilla4226]

Muchas gracias por tu aporte, tengo un problema, los filtros funcionan perfectamente, pero al final de mi pagina se vuelven a clonar los thead y los input, no me refiero al pie de mi tabla, sino al fondo de toda la pagina. Gracias

[@sistemasJA1978]

Excelente... Una duda estos filtros se pueden aplicar con serverside?

[@informaticadp]

Gracias!! Si se pueden aplicar estimado.

[@guillotatis]

Muchas gracias, pero no me queda claro el código para crear la fila en el head de la tabal y clonarlo. Intento bajar el proyecto pero el navegador bloquea el enlace . Agradezco tu ayuda

[@jazo2212]

Tu filtrado no me funciona como corresponde. digito 2 y aparecen 500 y 400, digito 20 y desaparecen los registros. saco el cursor del focus y ya no vuelven los registros. por si acaso en mi DataTable tengo como 7.000 registros cargados desde Excel.

[@martinhierro2816]

Hola, excelente video, consulta para agregarle una imagen y un modal cuando hago click sobre la misma, se podra hacer , tendras algun ejemplo? Gracias.

[@cristiandavidcardonavasquez]

como haria si solo quiero filtrar por columnas especificas, es decir de la misma manera pero no por todas las columnas. y si quiero que ese filtro este al lado del boton de bisqueda global, por ejemplo input que busca por nombre y el input de busqueda global?

[@investigacioneseconometric6599]

Muchas gracias por el video! Una consulta, ¿Es posible que la tabla que nos muestras sea también responsive? Saludos cordiales

[@christiancolewan]

I'd use bootstrap class table-responsive.

[@mysteriousbeat8295]

Y en vez de ser campos de texto, puede ser SELECTS?

[@josegabrielriverollhernand4964]

Si tienes server side no busca realmente solo sale "procesando" pero no hace la búsqueda como tiene que ser...

[@yisusstn6740]

muy practico tu video, me gusto y me sirvio, muchas gracias amigo lo implemente y me funciono al 100, aunque tambien me gustaria ver como en lugar de que aparezcan esos datos que muestras, me cargue datos de una bd de mysql, y que los datos que tenga la tabla ya sea que sean los que busques por filtro o todos, se exporten a un pdf un saludo y gracias :D me suscribi y le di like a tus videos

[@informaticadp]

Muchas gracias Yisus! Atento a tu pedido te paso los videos sobre los temas que solicitas: - Mostrar Cómo mostrar registros de una Base de datos. Usando PHP Foreach() y MySQL kzbin.info/www/bejne/jIqbpoqqqp2ZhaM - Exportar a Excel, PDF, y enviar a imprimir. Personalizar estilos. kzbin.info/www/bejne/r5Kyn56ZeqefZ5o

[@maes4224]

excekente video, Podrias indicarme como agregar a dos columnas el select option y que el resto tenga input search. Gracias saludos.

[@informaticadp]

Mucha gracias! Queres eso en los headers o para todos los registros? Eso no entendí amigo.

[@brandonlezama414]

Hola disculpe Informática DP como puedo filtrar alguna columna en especifico sin filtrar todas las columnas?

[@adriandiaz2604]

Buen día, disculpa como puedo hacer para agregar otra columna a la tabla? Si la agrego se quitan los filtros. De igual forma muchas gracias.

[@damianduarte636]

Que necesito modificar para adaptarlo a mi tabla (con server side)?

[@informaticadp]

Solamente incluís esta extensión y listo. Son totalmente compatibles. Te sale algún error?

[@damianduarte636]

Ya lo pude arreglar, pero ahora los datos de mi tabla son mas grandes que mi web, es como que todas las columnas tienen el mismo tamaño, necesitaria que se ajusten

[@mysteriousbeat8295]

Muchas gracias!! Una pregunta, puedo cambiar esos campos de texto por SELECTS? es que quiero que mis filtros de busqueda sean mediante un campo de texto y unos SELECTS

[@informaticadp]

Gracias! Si. Hay un video en el canal dónde muestro algo parecido. Está en la lista de reproducción datatables.

[@sergiobatuecas1459]

Genial el video, me ayudo mucho. Pero como tendriamos que hacer para "deshabilitar" que ordene cuando damos a buscar en una columna clonada? quiero decir, que unicamente puedas ordenar asc o desc si haces click en la primera fila de la tabla. Gracias!

[@ALINEADOS]

Debes cambiar $('#example thead tr').clone(true).appendTo('#example thead'); por $('#example thead tr').clone(false).appendTo('#example thead');

[@carlosvega4182]

Tengo una cantidad de registros no menor, alrededor 5 millones, he logrado realizar una búsqueda eficiente con server side, pero necesito buscar por rango fecha inicio y fin, no he logrado realizarlo, espero me puedas ayudar, saludos

[@inesmariamonteroconcepcion637]

¡Muchas gracias por el tiempo que dedicas a explicar DataTables! Tengo una duda, ¿sería posible cambiar el tamaño de los buscadores o que dicho se ajuste al tamaño de la columna? Se que en el video lo que se explica es un clon del Search original, pero me gustaría saber si es posible cambiar su tamaño.

[@informaticadp]

Hola Inés como estás! Muchas gracias a vos por la buena onda. Si decis del input search? Si se puede, yo lo haría con css. No se si lo intentaste. Saludos!

[@inesmariamonteroconcepcion637]

@@informaticadp Lo voy a intentar

[@javierjavier222]

Ines buenas tardes pudiste hacerlo? Me interesa saber como. Gracias!

[@victorveracruz112]

Muchas gracias..

[@informaticadp]

Saludos Victor!

[@diegocoralesrivera6703]

la busqueda funciona si la data se carga por ajax?

[@informaticadp]

Si, funciona perfecto. Te recomiendo Server-side. kzbin.info/www/bejne/onW6hmmApZV4ga8

[@carloseduardodiazsuarez5207]

gracias m ha servido demasiado pero al llamar la db de mi servidor esta solo me filtra el primer registro, a que se debe???

[@solracnauj19]

como seria para buscar un valor exacto

[@carloseduardosalazarcampos1838]

Excelente Trabajo de ante mano..!!... una consulta... Como podría ponerle filtro solo algunas columnas ??

[@informaticadp]

Muchas gracias a vos! De muchas maneras, por ejemplo le pones id a los encabezados dentro de la tabla y los clonas particularmente. Fijate en esa línea que usa el clone(). Saludos

[@carloseduardosalazarcampos1838]

@@informaticadp , intentaré....gracias por la respuesta... soy principiante en esto y me interesa mucho poder hacerlo...

[@carloseduardosalazarcampos1838]

​@@informaticadp estimado, espero pueda ayudarme ya que no he podido realizarlo y me gustaria darle ese plus a mi proyecto.

[@mariocalcetin7602]

Buenas amigo yo lo hago de la sgte manera: $(document).ready(function () { $('#tablita').DataTable({ language:{ "thousands": "." , // "decimal": ",", "sProcessing": "Procesando...", "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" } }, "bPaginate": false, "paging": false, "aLengthMenu": [[10, 50, 100, 200, 500, -1], [10, 50, 100, 200, 500, "Todo"]], "pageLength": 30, //Con este tramo de codigo dentro de tu archivo js puedes colocar filtro a la //columna que quieres , pero el filtro seria un combobox que se llena asignandole al th que //quieras la clase permitir_filtrar. //ejemplo : //Cuidades initComplete: function () { this.api().columns('.permitir_filtrar').every(function () { var column = this; var select = $('Todos') .appendTo($(column.header())) .on('change', function () { var val = $.fn.dataTable.util.escapeRegex( $(this).val() ); column .search(val ? '^' + val + '$' : '', true, false) .draw(); }); column.data().unique().sort().each(function (d, j) { select.append('' + d + '') }); }); }, }); Saludos , espero te sirva.

[@ronaldo.i.o.8401]

en boostrap 5 como seria ===??? no fiunciona

[@hermannheyer5156]

Muchas gracias, me funciono excelente, se puede agregar los botones para exportar a excel?

[@informaticadp]

Así es Hermann, se pueden agregar. Todas las extensiones y plugins son compatibles. Saludos!

[@samueltroncoso9787]

Hola, me fui de mucha utilidad tu video, gracias. Quisiera poder cambiar el ancho de las columnas a criterio. No sé si eso es posible. Saludos

[@informaticadp]

Hola Samuel muchas gracias! Claro que es posible. Creo que en un video lo hice. Te paso un ejemplo: $('#example').dataTable( { "columnDefs": [ { "width": "20%", "targets": 0 } ] } );

[@samueltroncoso9787]

@@informaticadp gracias, buscaré el video

[@ricardogomez8007]

Muy buen video. Cómo se aplica esto cuando la fuente de datos de una tabla es mediante una consulta a un BD real que regresa un json?

[@informaticadp]

Hola Ricardo, gracias! En el canal fíjate hay muchos proyectos con lo que consultas. Te paso uno. Luego es solamente adaptar esta extensión, así de simple. kzbin.info/www/bejne/b6KkmoGsoLGJkKc

[@ricardogomez8007]

@@informaticadp lo checo, muchas gracias

[@KeMusArt]

Muchas gracias, buen video. Una pregunta, ¿Cómo le haría para que no aplique el filtro por columna a una columna que yo no quiera?

[@informaticadp]

Hola gracias por el comentario! Tenes que habilitar por columna, en el video muestro esa propiedad. Saludos.

[@Ronin-iu3bg]

Hola! Necesito hacer el filtro solo para 2 de las 5 columnas que tiene mi tabla. ¿Sabes cómo puedo hacerlo?

[@TheTrebor085]

Bro lograste aplicar el filtro a las columnas q querias?

[@javierjavier222]

@@informaticadp hola ! No pude encontrar lo que decis profe como seria??

[@javierjavier222]

Pudiste aplicarlo solo a alguna columna??

[@carlos_flores01]

Excelente el curso pero mi jefe me ha pedido que no use jquery, que quiere javascript puro :(

[@informaticadp]

Estimado busca en el canal. Todo lo último ya es con Javascript puro. Te paso uno de los tantos proyectos. Saludos. kzbin.info/aero/PLrAw40DbN0l0CtcIRNmM5ZTM6o8Nmwdk5

[@carlos_flores01]

@@informaticadp Gracias pero lo que busco es esa misma función de filtrado

[@MiguelZamudioSanLuispotosiMex]

Excelente video, intento cambiar a Español en el script y me marca error. En otro video lo mostraste y si resulta pero al integrar el código de lenguaje en el código de este video me marca error... Me podrían orientar por favor.

[@informaticadp]

Hola Miguel muchas gracias! Revisa bien el código, algún punto y coma o algo así a veces causa ese error. Otra cosa, vacía la caché del navegador. También podes definir la Datatables y asignarla a una variable, por ejemplo, tabla. Luego a tabla la usas para definir mas propiedades. Hay muchas formas.

[@angelchanameorbe1282]

no puedo bajar el ejemplo ..tiene virus.. como puedo hacer ?¿ GRACIAS

[@informaticadp]

Hola, no son virus. Es publicidad. Ya voy a sacar ese link. Mas tarde subo el link que va directo al proyecto.

[@informaticadp]

Listo. Link limpio en la descripción del vídeo.

[@abdielreyes3221]

Excelente video, tendras alguno que funcione con mysql ?

[@informaticadp]

Muchas gracias Abdiel! En el canal hay de todo con MySql. Te paso algunos. kzbin.info/aero/PLrAw40DbN0l2oWoEN4_6oDWIV_MJB7Kia

[@abdielreyes3221]

@@informaticadp muchas gracias

[@argentino00000]

Exelente.pero me gustaria poder insertar imagenes . graciass

[@informaticadp]

Gracias! Lo vamos anotar a ese tema de imágenes. Auqnue entraría en un curso de CRUD

[@nicodominguez5136]

Muchas gracias está genial. Una duda: Uno de los js añadidos interfiere con la ventana modal que tengo desaparece las dimensiones de la ventana modal en la que tengo un h1, un textarea y un botón y no hace caso de los estilos del max-height ymax-width pese a que les he puesto un !important. Y aparte de eso en el textarea hace una cosa rara donde aumentar/reducir el tamaño cuando lo tocas se hace tan largo que ocupa todo el alto. ¿Alguién sabe como solucionarlo?

[@informaticadp]

Hola Nico! Muchas gracias! Sabes que puede ser el tema de las versiones de Bootstrap, también los estilos y extensiones de Datatables. Fíjate si podes usar los últimos. Para mi es eso. Siempre vacía la caché del.navegador. Saludos!

[@nicodominguez5136]

@@informaticadp muchas gracias y gracias por contestar tan rápido

[@jonaspan115]

Crees que sea possible usar esto con una tabla que obtengo de una consulta de mysql ?

[@informaticadp]

Totalmente, es una extensión y se adapta perfecto. Fíjate en la lista de reproducción de Datatables y hay mucho material con MySql. Va a funcionar bien.

[@jonaspan115]

@@informaticadp gracias lo voy a intentar porque yo llamaba a un archivo php que con jquery que hace la consulta y la inserta en un archivo html para visualizar, pero me aparece un error, como soy un poco nuevo voy a revisar lo que me indicas

[@informaticadp]

No dudes en preguntar. Si no te respondo, algún compañero lo hará seguro. Este video seguro te va a servir para lo que necesitas, te paso. kzbin.info/www/bejne/jIqbpoqqqp2ZhaM

[@jonaspan115]

@@informaticadp Muchas gracias pude hacerlo sin mucha dificultad, excelentes videos, me aparecia un warning pero fue por culpa mia de no cambiar los id en los scripts, gracias

[@informaticadp]

Excelente Jonathan!

[@jonathanjimenez1302]

necesito este proyecto en server side, alguien lo tiene?

[@andresortega5944]

Excelente video, tengo un inconveniente con el resposive, tengo al rededor de 15 columnas y antes de añadir el código me funciono muy bien, al momento de ingresar el código para los filtros por columna el responsive se daña y todo se va hacia la derecha tomando su orden pero se crea un scroll hacia la derecha, como lo puedo solucionar? adjunto las imágenes 1drv.ms/f/s!AnLwxRFwBAYpgb50RHfCI2U5O00-WQ

[@andresortega5944]

Tal vez alguna solución?

[@black_pubg_cl]

@@andresortega5944 hola Andrés, encontraste alguna solución? se me presento el mismo problema

[@andresortega5944]

@@black_pubg_cl no, no lo solucione lo deje como esta con el scroll horizontal y ya me acostumbre a q este de esa manera.

[@vbullsey]

jquery en 2020, no lo sé rick

Sé que existen mejores tecnologías a nivel de escalabilidad y calidad, pero es una forma de empezar a desenvolverse en el basto mundo del desarrollo web. Además, aún hay empresas que usan jQuery para el desarrollo a nivel Frontend de sus módulos o apps satélites. Aparte, ahora que existe el esquema de desarrollo por microservicios, es buena idea no centralizar todo en una sola tecnología, sino en varias en las que cada una de ellas tenga mejor rendimiento.

[@informaticadp]

@ totalmente de acuerdo, jQuery se sigue usando y espectacular para muchas situaciones.

[@rodriguezfranciscosalvador4831]

como puedo crear el filtro solo para una columna?