Easily Create Searchable HTML Tables with JavaScript

Подписаться 133 тыс.

Просмотров 19 тыс.

50% 1

In today's video I'll be showing you how to create a HTML table which can be searched using it's heading columns. This is easily done with a small amount of JavaScript code 🙂
Source code:
codepen.io/dcode-software/pen...
🏫 My Udemy Courses - www.udemy.com/user/domenic-co...
🎨 Download my VS Code theme - marketplace.visualstudio.com/...
💜 Join my Discord Server - / discord
🐦 Find me on Twitter - / dcodeyt
💸 Support me on Patreon - / dcode
📰 Follow me on DEV Community - dev.to/dcodeyt
📹 Join this channel to get access to perks - / @dcode-software
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #html #javascript

Опубликовано:

6 июн 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 33

@yitzchaksviridyuk932 3 года назад

Hey, I'd love a video on server side searching. 😄

@diegognoatto8706 4 месяца назад

this is beautiful, i never worked with tables in js, just had too, this is awesome little tip, got one sub one thumbs up for that.

@stacherski 2 года назад

Brilliant! I love vanilla JS being used, this gives you so much more power and independence! Care to share ideas on how to deal with tables that load extra data on scroll?

@salamina_ Год назад

Thoroughly enjoy all you videos Dom. Thank you for all that you do!

@ColinMarksPlus 2 года назад

Nice. It would be worth looking at a product like DataTables, or the editable Editor/CloudTables, as it gives far more functionality on top of the table searching!

@user-mma173 3 года назад

I like your tables tutorials. I think you should put them together in a simple library. Personally, I would choose it over the well-known ones. Thanks'

@NotBeHaris 3 года назад

Awesome sir.

@beinyourguard 3 года назад

pretty nice!

@lorimills5456 2 года назад

This is great! I have a question. I need to wrap the text of one of my column headers but cannot figure out how to do this within the code provided. How would you recommend doing this?

@retroprime7244 Год назад

thank you 👍

@romanryaboshtan9270 3 года назад

It's a cool video, i like this

@lappdev5071 2 года назад

Great video!!

@dcode-software 2 года назад

Thanks, glad it helped you!

@peshotod Год назад

Hey Dom.Great tutorial as always.But thereis one small tweak.When i create additional rows in the existing columns js search works with them.But when I create additional column and then additional rows in this column js search does not work for the newly created rows.I will try to figure out what's going on with js in this case though useful hint will be greatly appreciated.

@alieytamang8868 3 года назад

Love from Nepal ❤🇳🇵

@dcode-software 3 года назад

Love from AUS

@manmathan0762 2 года назад

is that possible can we able to set the source data as CSV and search the data

@talhasupport3670 2 года назад

Great sir, Can you explain that what is difference between "DOMContentLoaded" and "load" event in javascript

@2theOmega 8 месяцев назад

I probably won't get a response to this, but I just used this wonderful Table coding for a site I'm creating. I took it a step further, by making the text in the table clickable to the point that it automatically populates in the search inputs. However, in doing this, the table doesn't reload like it does when you type it in. Is there any way to fix that? I'll be using this for a pretty large database.

@guccireset 2 года назад

I'm getting an error code saying "TypeError: undefined is not an object (evaluating 'tableCell.closest')" (line 14 btw) any reason you can think of as to why?

@rossrivalbendillo5582 Год назад

Can you add a search button with dropdown. What I am trying to create an online library. The search button dropdown list will be genre. So that the search will only push table rows with the said genre

@RianY2K 3 года назад

finally, I can make datatable with jquery free, thank you for tutorial

@syaifulbahri1525 Год назад

Thanks for the explanation. My question is, how to hide the entire table content while nothing to the input box? The expectation result is to keep the page clean when the input box is empty, until beginning to type something in the box.

@streamx2 3 года назад

could you do server side and use mongodb please?

@DGronki 3 года назад

I think instead Array.from better to use spread operator so [...document.querySelectorAll('....')]

@bssgiridhar Год назад

Please make a video of server side

@m-saaif Год назад

Thanks… In Safari for iPhone there is a problem. If I search for a name, every non match rows will reserve its places but not shown. So if the name is 1000 row down I have to scroll down until I find it. Other rows will be completely white. In chrome for macOS it is OK.

@lalafah 3 года назад

how to hyperlink those items?

@vedprakash-zz6hb 3 года назад

If I type ss in occupation and , Da in name, Then Names without Da are shown. It's not working properly, as multiple filters gives weird results. It should allow multiple filters .

@dcode-software 3 года назад

Good point, it probably should handle multiple filters. In that case, it would need to be a much more structured solution