Bug 27403 - Enable fixedHeader for Datatables
Summary: Enable fixedHeader for Datatables
Status: Needs Signoff
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: unspecified
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Jonathan Druart
QA Contact: Testopia
URL:
Keywords:
: 27417 (view as bug list)
Depends on:
Blocks: 27467
  Show dependency treegraph
 
Reported: 2021-01-12 09:25 UTC by Jonathan Druart
Modified: 2021-01-19 15:22 UTC (History)
2 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Trivial patch
Text to go in the release notes:
Version(s) released in:


Attachments
Bug 27403: Add fixedHeader to Datatables (10.23 KB, patch)
2021-01-12 09:27 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 27403: Add fixedHeader to Datatables (10.29 KB, patch)
2021-01-12 19:03 UTC, Lucas Gass
Details | Diff | Splinter Review
Bug 27403: Add fixedHeader to Datatables (1.04 KB, patch)
2021-01-19 12:14 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 27403: Add fixedHeader to Datatables (1.09 KB, patch)
2021-01-19 14:08 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 27403: (follow-up) Make basket toolbar and table header work together (1.93 KB, patch)
2021-01-19 14:08 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 27403: Disable fixedHeader on itemsearch (1.11 KB, patch)
2021-01-19 15:21 UTC, Jonathan Druart
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Jonathan Druart 2021-01-12 09:25:26 UTC
This is a nice Datatables plugin that we should enable on our tables.
Comment 1 Jonathan Druart 2021-01-12 09:27:12 UTC
Created attachment 115055 [details] [review]
Bug 27403: Add fixedHeader to Datatables

That's a great plugin to have fixed header.

Test plan:
On the cities table or the patron search table confirm that the header
is floating is you scroll down
Comment 2 Lucas Gass 2021-01-12 19:03:02 UTC
Works well in both Chrome and Firefox, this will save a lot of confusion when looking at larger tables.
Comment 3 Lucas Gass 2021-01-12 19:03:29 UTC
Created attachment 115098 [details] [review]
Bug 27403: Add fixedHeader to Datatables

That's a great plugin to have fixed header.

Test plan:
On the cities table or the patron search table confirm that the header
is floating is you scroll down

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Comment 4 Lucas Gass 2021-01-12 19:07:07 UTC
*** Bug 27417 has been marked as a duplicate of this bug. ***
Comment 5 Katrin Fischer 2021-01-17 16:21:54 UTC
This appears to work quite well, but can you please add a note about the new plugin to the About page?

Small thing: for a table like our current circulation conditions it's possible that the header line will hide the row with the input fields when scrolling down. Not sure this should be a blocker really - the feature is nice and people just need to scroll up a bit again.
Comment 6 Jonathan Druart 2021-01-19 12:14:09 UTC
Created attachment 115314 [details] [review]
Bug 27403: Add fixedHeader to Datatables

That's a great plugin to have fixed header.

Test plan:
On the cities table or the patron search table confirm that the header
is floating is you scroll down
Comment 7 Jonathan Druart 2021-01-19 12:14:50 UTC
Sooo, actually we don't need to add the dataTables.fixedHeader.min.js file, the feature exists in the datatables.min.js file we embed.
Comment 8 Owen Leonard 2021-01-19 14:08:04 UTC
Created attachment 115323 [details] [review]
Bug 27403: Add fixedHeader to Datatables

That's a great plugin to have fixed header.

Test plan:
On the cities table or the patron search table confirm that the header
is floating is you scroll down

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Comment 9 Owen Leonard 2021-01-19 14:08:06 UTC
Created attachment 115324 [details] [review]
Bug 27403: (follow-up) Make basket toolbar and table header work together

The fixed header option for DataTables does the same thing that the
hcSticky jQuery plugin does for us on toolbars, so I've gone through the
templates looking for places they might conflict.

On the acquisitions basket page we can add a special class,
"fh-fixedHeader," to the sticky toolbar to tell DataTables that the
table header should float *below* the toolbar.

To test, apply the patch and go to Acquisitions.

- Locate a vendor and a basket for that vendor with multiple orders.
- Adjust the browse window height if necessary to trigger vertical
  scrolling.
- Confirm that as you scroll down the toolbar (with buttons "Add to
  basket," "Edit basket," etc) sticks to the top of the browser window.
- Confirm that as you continue to scroll, the table header sticks below
  the floating toolbar.
Comment 10 Owen Leonard 2021-01-19 14:14:14 UTC
(In reply to Owen Leonard from comment #9)
> I've gone through the
> templates looking for places they might conflict.

The only other instance I found was on the item search page, where there is some strange behavior. To reproduce:

1. Submit an item search that will return multiple results.
2. After the results have loaded, click the "Edit search" button.
3. As you scroll down, the toolbar sticks to the top of the browser window but then the table header jumps into view before the table of results has scrolled into view.
Comment 11 Jonathan Druart 2021-01-19 15:21:34 UTC
Created attachment 115333 [details] [review]
Bug 27403: Disable fixedHeader on itemsearch

It does not work.
Comment 12 Jonathan Druart 2021-01-19 15:22:15 UTC
Thanks for the follow-up, Owen!

I have no idea about what's happening on the item search view so I am suggesting to simply disable fixedHeader on this page.