koalyptus / TableFilter

A Javascript library making HTML tables filterable and a bit more :)
https://www.tablefilter.com
MIT License
324 stars 94 forks source link

Is there a way to filter a column with a drop-down for ascending/descending? #726

Closed Guyver1wales closed 5 years ago

Guyver1wales commented 5 years ago

This is in relation to the bug I just submitted.

I have a column of decimal number values that are the free disk space values in GB of all my vcenter datastores. I would like a drop down filter to filter either ascending or descending.

I have read through as much of the wiki as I can that I feel is relevant and am currently looking at your excellent examples on your website http://www.tablefilter.com/ but I cannot seem to find an example piece of code that shows this filtering option?

Is this possible in TableFilter and if so do you have a example or sample code to share please?

Thanks,

Leon.

cjohnsonuk commented 5 years ago

You can click the column header to change the sort order as in this example : http://www.tablefilter.com/sort.html Click the word "Phone" to sort by phone number, an arrow appears in the column header to show the sort direction, click again to reverse the sort direction

Does this solve your sort order problem?

Guyver1wales commented 5 years ago

I'm not getting that option on any of my column headings, I've just been looking at this for the past 10-20 minutes trying to get it to work. Does it rely on bootstrap? as i notice this in the code when looking at the source code on tablefilter.com.

I'm using CSS Grid and plain html. the only javascript I am using in my entire website is the tablefilter script elements. (I've been using the sample.html provided in the tableFilter download as my template and working with that)

cjohnsonuk commented 5 years ago

Are you sure you have the sort.js file in the folder with your table filter is file? Check the example to see where the sort is file is and compare with yours.

koalyptus commented 5 years ago

@Guyver1wales refer to this comment, as seems to be a symptom of same issue. TableFilter needs to know more precisely which row is the headers row. Cheers

Guyver1wales commented 5 years ago

so I managed to get round to looking at this some more and when I downloaded the zip file from git the zip was only previously giving me the /dist folder that contained the sample.html and the /TableFilter folder that only has the tablefilter.js.

When I just downloaded the zip again, i got the entire repo.

so my website currently (IIS) only has the following: ---tablefilter tablefilter.js tablefilter.js.map tf-0-539d4df8c7c919f5b3d8.js tf-0-539d4df8c7c919f5b3d8.js.map
\---style
    |   colsVisibility.css
    |   filtersVisibility.css
    |   tablefilter.css
    |
    \---themes
        |   blank.png
        |   btn_clear_filters.png
        |   btn_filter.png
        |   btn_first_page.gif
        |   btn_last_page.gif
        |   btn_next_page.gif
        |   btn_previous_page.gif
        |   downsimple.png
        |   icn_clp.png
        |   icn_exp.png
        |   icn_filter.gif
        |   icn_filterActive.gif
        |   upsimple.png
        |
        +---default
        |   |   default.css
        |   |
        |   \---images
        |           bg_infDiv.jpg
        |           bg_th.jpg
        |           btn_eraser.gif
        |           btn_first_page.gif
        |           btn_last_page.gif
        |           btn_next_page.gif
        |           btn_over_eraser.gif
        |           btn_over_first_page.gif
        |           btn_over_last_page.gif
        |           btn_over_next_page.gif
        |           btn_over_previous_page.gif
        |           btn_previous_page.gif
        |           img_loading.gif
        |
        +---mytheme
        |   |   mytheme.css
        |   |
        |   \---images
        |           bg_headers.jpg
        |           bg_infDiv.jpg
        |           btn_filter.png
        |           btn_first_page.gif
        |           btn_last_page.gif
        |           btn_next_page.gif
        |           btn_previous_page.gif
        |           img_loading.gif
        |
        +---skyblue
        |   |   skyblue.css
        |   |
        |   \---images
        |           bg_skyblue.gif
        |           btn_first_page.gif
        |           btn_last_page.gif
        |           btn_next_page.gif
        |           btn_prev_page.gif
        |           icn_clear_filters.png
        |           img_loading.gif
        |
        \---transparent
            |   transparent.css
            |
            \---images
                    btn_first_page.gif
                    btn_last_page.gif
                    btn_next_page.gif
                    btn_prev_page.gif
                    icn_clear_filters.png
                    img_loading.gif

what other .js files do I need from the /lib and /src folders from the zip to be able to use all the filtering/sorting options available in tablefilter? Also, where do i put these .js files? in the same folder as tablefilter.js?

apologies for what may seem like basic questions but i'm not a web developer or devops person, I'm a windows server admin / powershell automation chap who's just trying to build a very simple/basic automation/reporting website internally for our server admins.

Guyver1wales commented 5 years ago

IIS structure:

image