Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

stickyHeader and Filter - not working well together? #249

Closed
SC-RPotter opened this issue Feb 27, 2013 · 3 comments
Closed

stickyHeader and Filter - not working well together? #249

SC-RPotter opened this issue Feb 27, 2013 · 3 comments

Comments

@SC-RPotter
Copy link

I'm trying to use stickyHeaders with filter. I saw issue #52 saying this was fixed.

However when I place:

thisTable.tablesorter({
    headers: excludeColumns,
    widthFixed: true,
    sortReset: false,
    showProcessing: true,
    widgets: ['zebra', "stickyHeaders", "filter"],
    sortInitialOrder: 'desc',
    widgetZebra: {
        css: ["even", "odd"]
    },
    widgetOptions: {
        filter_reset: '.resetFilters',
        filter_functions: filterFxns
    }
});
excludeColumns = "";

The initial header is sticky, but not the filter thead row.

The markup it outputs is:

<div class="fixed-table-container">
             <div class="header-background"> </div>
             <div class="fixed-table-container-inner">
                    <table class="tablesorter tablesorter-default hasStickyHeaders hasFilters" id="Table1"><colgroup><col style="width: 8.9%;"><col style="width: 11.1%;"><col style="width: 11.3%;"><col style="width: 6.2%;"><col style="width: 6.6%;"><col style="width: 6.3%;"><col style="width: 6.7%;"><col style="width: 6.4%;"><col style="width: 7%;"><col style="width: 6.8%;"></colgroup>
                        <thead>
                            <tr class="tablesorter-headerRow">
                                <th data-placeholder="[ALL]" class="date  tablesorter-header" data-column="0"><div class="tablesorter-header-inner">Date</div></th>
                                <th data-placeholder="Filter" class="description filter-select  tablesorter-header" data-column="1"><div class="tablesorter-header-inner">Meal<br>Type</div></th>
                                <th data-placeholder="Filter" class="filter-select  tablesorter-header" data-column="2"><div class="tablesorter-header-inner">Meal</div></th>
                                <th data-placeholder="[ALL]" data-column="3" class="tablesorter-header"><div class="tablesorter-header-inner">Protein<br>in G</div></th>
                                <th data-placeholder="[ALL]" data-column="4" class="tablesorter-header"><div class="tablesorter-header-inner">Carb<br>in G</div></th>
                                <th data-placeholder="[ALL]" data-column="5" class="tablesorter-header"><div class="tablesorter-header-inner">Fat<br>in G</div></th>
                                <th data-placeholder="[ALL]" data-column="6" class="tablesorter-header"><div class="tablesorter-header-inner">Calories<br>Consumed</div></th>
                                <th data-placeholder="[ALL]" data-column="7" class="tablesorter-header"><div class="tablesorter-header-inner">Daily Total<br>Percent (%)</div></th>
                                <th data-placeholder="[ALL]" data-column="8" class="tablesorter-header"><div class="tablesorter-header-inner">Daily Total<br>Calories<br>Consumed</div></th>
                                <th data-column="9" class="tablesorter-header"><div class="tablesorter-header-inner">Daily<br>Target</div></th>
                            </tr>
                    <tr class="tablesorter-filter-row"><td><select class="tablesorter-filter" data-column="0"></td></tr>
                    </thead>
                        <tbody>
                            <tr class="odd" style="">
                                <td>12/11/2012</td><td>Evening Snack</td><td>Spring, bottled</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>373</td><td>1338</td>
                            </tr>
                        </tbody>
                    </table>

                    <table class="tablesorter tablesorter-default hasStickyHeaders" id="Table1" style="height: 0px; width: 0px; padding: 0px; margin: 0px; border: 0px none;">
                    <colgroup>
                        <col style="width: 8.9%;"><col style="width: 11.1%;">
                        <col style="width: 11.3%;"><col style="width: 6.2%;">
                        <col style="width: 6.6%;"><col style="width: 6.3%;">
                        <col style="width: 6.7%;"><col style="width: 6.4%;">
                        <col style="width: 7%;"><col style="width: 6.8%;">
                    </colgroup>
                    <thead class="tablesorter-stickyHeader" style="width: 908px; position: fixed; margin: 0px; top: 0px; visibility: hidden; z-index: 1;">
                        <tr class="tablesorter-headerRow">
                            <th data-placeholder="[ALL]" class="date  tablesorter-header" data-column="0"><div class="tablesorter-header-inner">Date</div></th>
                            <th data-placeholder="Filter" class="description filter-select  tablesorter-header" data-column="1"><div class="tablesorter-header-inner">Meal<br>Type</div></th>
                            <th data-placeholder="Filter" class="filter-select  tablesorter-header" data-column="2"><div class="tablesorter-header-inner">Meal</div></th>
                            <th data-placeholder="[ALL]" data-column="3" class="tablesorter-header"><div class="tablesorter-header-inner">Protein<br>in G</div></th>
                            <th data-placeholder="[ALL]" data-column="4" class="tablesorter-header"><div class="tablesorter-header-inner">Carb<br>in G</div></th>
                            <th data-placeholder="[ALL]" data-column="5" class="tablesorter-header"><div class="tablesorter-header-inner">Fat<br>in G</div></th>
                            <th data-placeholder="[ALL]" data-column="6" class="tablesorter-header"><div class="tablesorter-header-inner">Calories<br>Consumed</div></th>
                            <th data-placeholder="[ALL]" data-column="7" class="tablesorter-header"><div class="tablesorter-header-inner">Daily Total<br>Percent (%)</div></th>
                            <th data-placeholder="[ALL]" data-column="8" class="tablesorter-header"><div class="tablesorter-header-inner">Daily Total<br>Calories<br>Consumed</div></th>
                            <th data-column="9" class="tablesorter-header"><div class="tablesorter-header-inner">Daily<br>Target</div></th>
                        </tr>
                    </thead>

                    </table>
               </div>
</div>
@SC-RPotter
Copy link
Author

Tried to format the output right, truncated it as well.

Is it confirmed that: widgets: ['zebra', "stickyHeaders", "filter"], should just make it all work together?

This is the markup pre-javascript:

[div class="fixed-table-container"]
         [div class="header-background"] [/div]
         [div class="fixed-table-container-inner"]
                [table id="Table2" class="tablesorter"]
                    [thead]
                        [tr]
                            [th class="date" data-placeholder="[ALL]"]Date[/th]
                            [th class="logged-weight" data-placeholder="[ALL]"]Logged Weight[/th]
                        [/tr]

                [/thead]
                    [tbody][/tbody]
                [/table]
           [/div]
     [/div]

@Mottie
Copy link
Owner

Mottie commented Feb 27, 2013

Well, yes and no.

The sticky header will work with multiple rows properly, but it won't work with the filter widget because it was written that way.

The main issue is that the sticky headers widget needs to duplicate the table head, but if a duplicate of the filter row is included, the filter widget won't know which set filters to use for filtering. I guess I could make it smarter and use the sticky row when it is visible, but then I'd have to update the original row with any new queries. It's just more code bloat in an already monstrosity of a widget.

I'll try to include this in version 3 when I'll break up each widget into it's own file and allow you to customize your tablesorter files.

@Mottie Mottie mentioned this issue Mar 3, 2013
22 tasks
@SC-RPotter
Copy link
Author

Thank you Mottie - I appreciate you being so hands on with this project. It's rare you find an active contributor! Thank you!

@Mottie Mottie closed this as completed in 2134d6d Apr 13, 2013
@Mottie Mottie removed the Version 3 label Apr 11, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants