• Hi All

    Please note that at the Chandoo.org Forums there is Zero Tolerance to Spam

    Post Spam and you Will Be Deleted as a User

    Hui...

  • When starting a new post, to receive a quicker and more targeted answer, Please include a sample file in the initial post.

Save Excel as Web Page (html) and filter table...how to achieve this?

PP3321

Active Member
Thanking you in advance for your generous help and support...

I have a table like this (saved as web page, & viewed by browser)
screenshot.PNG

My requirement is to be able to filter table on the web page

If possible, how can I achieve this?

I searched below by Google but want to know if there are better ways...

1. Use JavaScript
http://www.hotscripts.com/blog/15-javascript-data-grids-enhance-html-tables/

2. Use C# WPF

Thanking you in advance...
__________________________________________________________________
Mod edit : thread moved to appropriate forum !
 
There's many ways to go about this. But, I'd recommend one of following 2 method (especially 2nd).

1. JQuery plug-in
If you are hosting the page, this is probably the easiest route. Many are designed to work with Bootstrap and mobile device friendly. One example below.
https://github.com/asier-laukoa/FooTable

2. JQuery Content Delivery Network (CDN)
Hosted script library that you can leverage. Read w3schools documentation for details.
http://www.w3schools.com/jquery/jquery_get_started.asp

You will add reference to CDN <script src="...."></script> for CDN of your choice (Microsoft & Google offer CDN, as well as code.jquery.com).
Ex:
Code:
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

Note that in either case, you will need thead, tbody tag. Along with data attribute for each column in thead.

You can construct html table via VBA (there may be ready made code out there).

You can see sample set up/usage in link below.
http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_filters_tables
 
See attached. This may not be exactly what you are looking for. But code will generate responsive html table from any table you choose on workbook. Just select any cell within table range when prompted.

Did not implement hide column function. To do that, you'd need to set "data-priority" in thead for each "th" tag (i.e. Column). In general you should have at least one column without "data-priority" to have it always visible.

Change oPath variable as needed (path\filename).
 

Attachments

  • Html_ResponsiveTable.xlsb
    19.5 KB · Views: 197
Here you go. This one is not as mobile friendly as the other one.

Also has added feature to sort based on each column and few other things.

Test and let me know if it works fine.
EDIT: "tfoot" tag is used as place holder, but using style, it's been appended just below "thead" instead of at bottom of the table. You can change this by removing following section from "Public Const htmlTop" located in Module2.

Code:
            "<style type=" & """" & "text/css" & """" & " class=" & """" & "init" & """" & ">" & vbNewLine & _
            "  tfoot {" & vbNewLine & _
            "      display: table-header-group;" & vbNewLine & _
            "  }" & vbNewLine & _
            "</style>" & vbNewLine

This got me thinking and...
I might be posting workbook sample in the Vault with option to choose between 2 filter types when exporting.

1. Dropdown like this one.
2. Each dropdown replaced with searchbox.

2nd option might be more desirable if there's large number of unique item in a column.
 

Attachments

  • Html_FilterTable.xlsb
    24.5 KB · Views: 141
@Chihiro
Sorry for delay. It took me some time to digest what you shared with me.

1. Both of the files work just fine!

2. I prefer search box but drop-down list is also great.

This is really really helpful to my current requirement.
Thank you so much!!!!!!!!!!!!!!!!!!!
 

Attachments

  • example.png
    example.png
    57.7 KB · Views: 149
A very old post, but maybe you are still there for help: I downaloded the files in the example, because I feel some of them can help, but when I export as WebPage, I lose the macro. Can you help?
 
Normal as a so called 'macro' can be located only within an Excel workbook​
so very not on a WebPage as this is very not the same coding language used !​
 
Back
Top