stickyHeader and Filter - not working well together?
SC-RPotter opened this issue · 3 comments
SC-RPotter commented
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 commented
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 commented
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.
SC-RPotter commented
Thank you Mottie - I appreciate you being so hands on with this project. It's rare you find an active contributor! Thank you!