Table with Filter

Andy012

Hello,

Is there a way to replicate the following link using only HTML / CSS and JS ?
https://ghpl.co/products.html

colin

I don't follow, sorry. That's using DataTables - which is HTML/CSS/JS - or am I missing something?

Colin

Andy012

Hi, sorry for not expressing myself clearly.

I'm new to DataTables. The website mentioned above seem to be using it. I have checked the demos here on this website but cannot find one that is using the filter (buttons).

My question is about whether you have a demo like this one and if not, do you have documentation to achieve this ?

Thanks for any help !

colin

Ah I see. That's just calling column().search() on column 7 with the string on the button. If you view the page source you can see that - they're using a legacy version with different API calls, but it has the same effect,

Colin

Andy012

Thanks,

not sure I will be able to implement this. I was thinking that there would be a demo here and I could just edit the HTML / JS

kthorngren

Here is a simple example of using buttons to search:
http://live.datatables.net/sicumexe/1/edit

Kevin

Andy012

Thank you so much.

One last thing, is there an example where I can replace the button by a dropdown ? My issue is that I have some 30+ filters. So buttons will not be appropriate.

Have tried:

Original HTML:
<button value="London">London</button> <button value="Edinburgh">Edinburgh</button> <button value="">View All</button>

New HTML :
<select name="menu1" id="menu1"> <option value="select">Select</option> <option value="London">London</option> <option value="Edinburgh">Edinburgh</option> <option value="">View All</option> </select>

JS Added
var urlmenu = document.getElementById( 'menu1' ); urlmenu.onchange = function() { window.open( this.options[ this.selectedIndex ].value ); };

Thanks !

Andy012

Hi all,

forget about my last post all sorted ! ;-)