Bug 40816 - Upgrade DataTables from 2.1.8 to 2.3.4
Summary: Upgrade DataTables from 2.1.8 to 2.3.4
Status: Passed QA
Alias: None
Product: Koha
Classification: Unclassified
Component: Staff interface (show other bugs)
Version: unspecified
Hardware: All All
: P5 - low enhancement
Assignee: Jonathan Druart
QA Contact: David Cook
URL:
Keywords:
Depends on: 42048 36640
Blocks: 38259 42003 37024
  Show dependency treegraph
 
Reported: 2025-09-16 08:15 UTC by Jonathan Druart
Modified: 2026-03-12 12:24 UTC (History)
8 users (show)

See Also:
GIT URL:
Initiative type: ---
Sponsorship status: ---
Comma delimited list of Sponsors:
Crowdfunding goal: 0
Crowdfunding committed: 0
Crowdfunding contact:
Patch complexity: ---
Documentation contact:
Documentation submission:
Text to go in the release notes:
This enhancement upgrades the DataTables JavaScript library from version 2.1.8 to 2.3.4. This brings in upstream fixes and improvements released since 2.1.8, including bug fixes and general stability updates. No functional changes are expected in Koha beyond those provided by the updated DataTables library.
Version(s) released in:
Circulation function:


Attachments
Bug 40816: DT - Update css and js files (1021.22 KB, patch)
2025-09-16 08:19 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 40816: Cherry-pick previous manual changes after update (8.93 KB, patch)
2025-09-16 08:19 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 40816: [DO NOT PUSH] Use .css instead of .min.css (1.15 KB, patch)
2025-09-16 08:19 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 40816: Fix sort icons (2.32 KB, patch)
2025-09-16 08:19 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 40816: Remove !important from the min version (100.78 KB, patch)
2025-11-03 15:52 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 40816: DT - Update css and js files (1021.16 KB, patch)
2025-11-03 19:27 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 40816: Cherry-pick previous manual changes after update (8.98 KB, patch)
2025-11-03 19:27 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 40816: Fix sort icons (2.37 KB, patch)
2025-11-03 19:27 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 40816: Remove !important from the min version (100.83 KB, patch)
2025-11-03 19:28 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 40816: DT - Update css and js files - OPAC (567.12 KB, patch)
2025-11-14 13:15 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 40816: Remove !important from css files - OPAC (105.20 KB, patch)
2025-11-14 13:15 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 40816: Adjust about page (1.25 KB, patch)
2025-11-14 13:15 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 40816: (follow-up) CSS updates for table sorting icons (2.07 KB, patch)
2025-11-14 13:50 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 40816: (follow-up) CSS updates for table sorting icons (2.14 KB, patch)
2025-11-14 14:00 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 40816: (follow-up) Standardize sort icon alignment (1.29 KB, patch)
2025-12-18 11:58 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 40816: Fix a failing Selenium test (1012 bytes, patch)
2025-12-18 12:22 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 40816: Fix Auth/csrf.ts (1.50 KB, patch)
2026-01-06 13:58 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 40816: Ignore 'ResizeObserver loop limit exceeded' (1.05 KB, patch)
2026-01-06 13:58 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 40816: DT - Update css and js files (1021.21 KB, patch)
2026-02-17 02:01 UTC, David Cook
Details | Diff | Splinter Review
Bug 40816: Cherry-pick previous manual changes after update (9.04 KB, patch)
2026-02-17 02:01 UTC, David Cook
Details | Diff | Splinter Review
Bug 40816: Fix sort icons (2.42 KB, patch)
2026-02-17 02:01 UTC, David Cook
Details | Diff | Splinter Review
Bug 40816: Remove !important from the min version (100.88 KB, patch)
2026-02-17 02:01 UTC, David Cook
Details | Diff | Splinter Review
Bug 40816: DT - Update css and js files - OPAC (567.06 KB, patch)
2026-02-17 02:01 UTC, David Cook
Details | Diff | Splinter Review
Bug 40816: Remove !important from css files - OPAC (105.25 KB, patch)
2026-02-17 02:01 UTC, David Cook
Details | Diff | Splinter Review
Bug 40816: Adjust about page (1.30 KB, patch)
2026-02-17 02:01 UTC, David Cook
Details | Diff | Splinter Review
Bug 40816: (follow-up) CSS updates for table sorting icons (2.19 KB, patch)
2026-02-17 02:01 UTC, David Cook
Details | Diff | Splinter Review
Bug 40816: (follow-up) Standardize sort icon alignment (1.35 KB, patch)
2026-02-17 02:01 UTC, David Cook
Details | Diff | Splinter Review
Bug 40816: Fix a failing Selenium test (1.04 KB, patch)
2026-02-17 02:02 UTC, David Cook
Details | Diff | Splinter Review
Bug 40816: Fix Auth/csrf.ts (1.55 KB, patch)
2026-02-17 02:02 UTC, David Cook
Details | Diff | Splinter Review
Bug 40816: Ignore 'ResizeObserver loop limit exceeded' (1.12 KB, patch)
2026-02-17 02:02 UTC, David Cook
Details | Diff | Splinter Review
Bug 40816: (follow-up) make search description inline for patron search (796 bytes, patch)
2026-03-06 05:35 UTC, David Cook
Details | Diff | Splinter Review
Bug 40816: (follow-up) change DataTables search descriptions to use text rather than HTML (1.06 KB, patch)
2026-03-06 05:35 UTC, David Cook
Details | Diff | Splinter Review
Bug 40816: (follow-up) change DataTables search descriptions to use text rather than HTML (1.14 KB, patch)
2026-03-06 08:51 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 2025-09-16 08:15:18 UTC
eg. bug 38259 needs DataTables 2.3+ for lengthLabels
Comment 1 Jonathan Druart 2025-09-16 08:19:26 UTC
Created attachment 186448 [details] [review]
Bug 40816: DT - Update css and js files
Comment 2 Jonathan Druart 2025-09-16 08:19:34 UTC
Created attachment 186449 [details] [review]
Bug 40816: Cherry-pick previous manual changes after update

This is a cherry-pick of
  commit e0193051e173557351d3da6697cb5f9c3e801185
  Bug 36640: (follow-up) CSS fixes for DataTables controls

I have only kept the changes to datatables.css
Comment 3 Jonathan Druart 2025-09-16 08:19:40 UTC
Created attachment 186450 [details] [review]
Bug 40816: [DO NOT PUSH] Use .css instead of .min.css

What the clean way to generate the min version?
Comment 4 Jonathan Druart 2025-09-16 08:19:48 UTC
Created attachment 186451 [details] [review]
Bug 40816: Fix sort icons
Comment 5 Jonathan Druart 2025-09-16 08:21:02 UTC
Why do we have a lot of duplicated CSS rules between _tables.scss and _common.scss?

Shouldn't all the .dataTable rules from _common be moved to _tables?
Comment 6 Jonathan Druart 2025-11-03 15:52:33 UTC
Created attachment 188979 [details] [review]
Bug 40816: Remove !important from the min version
Comment 7 Jonathan Druart 2025-11-03 15:53:11 UTC
(In reply to Jonathan Druart from comment #5)
> Why do we have a lot of duplicated CSS rules between _tables.scss and
> _common.scss?
> 
> Shouldn't all the .dataTable rules from _common be moved to _tables?

Let's do that on a separate bug report if needed.
Comment 8 Owen Leonard 2025-11-03 19:27:51 UTC
Created attachment 188991 [details] [review]
Bug 40816: DT - Update css and js files

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Comment 9 Owen Leonard 2025-11-03 19:27:54 UTC
Created attachment 188992 [details] [review]
Bug 40816: Cherry-pick previous manual changes after update

This is a cherry-pick of
  commit e0193051e173557351d3da6697cb5f9c3e801185
  Bug 36640: (follow-up) CSS fixes for DataTables controls

I have only kept the changes to datatables.css

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Comment 10 Owen Leonard 2025-11-03 19:27:57 UTC
Created attachment 188993 [details] [review]
Bug 40816: Fix sort icons

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Comment 11 Owen Leonard 2025-11-03 19:28:00 UTC
Created attachment 188994 [details] [review]
Bug 40816: Remove !important from the min version

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Comment 12 Owen Leonard 2025-11-04 13:26:27 UTC
We should do the same for the OPAC shouldn't we?
Comment 13 Jonathan Druart 2025-11-04 13:40:36 UTC
(In reply to Owen Leonard from comment #12)
> We should do the same for the OPAC shouldn't we?

Yes!
Comment 14 David Nind 2025-11-06 17:38:24 UTC
The license details in the about page also needs updating.
Comment 15 Jonathan Druart 2025-11-14 13:15:26 UTC
Created attachment 189599 [details] [review]
Bug 40816: DT - Update css and js files - OPAC

Patch from commit 372bfb4
Comment 16 Jonathan Druart 2025-11-14 13:15:28 UTC
Created attachment 189600 [details] [review]
Bug 40816: Remove !important from css files - OPAC

Patch from commit 20bdf8f
Comment 17 Jonathan Druart 2025-11-14 13:15:29 UTC
Created attachment 189601 [details] [review]
Bug 40816: Adjust about page

Patch from commit 42a5269
Comment 18 Jonathan Druart 2025-11-14 13:20:06 UTC
It's still missing a "Fix sort icons" patch for the OPAC.
Comment 19 Owen Leonard 2025-11-14 13:50:51 UTC
Created attachment 189605 [details] [review]
Bug 40816: (follow-up) CSS updates for table sorting icons
Comment 20 Jonathan Druart 2025-11-14 14:00:04 UTC
Created attachment 189606 [details] [review]
Bug 40816: (follow-up) CSS updates for table sorting icons

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 21 Jonathan Druart 2025-11-14 14:00:32 UTC
OPAC is ready for testing! :)

Thanks Owen!
Comment 22 Victor Grousset/tuxayo 2025-12-17 06:58:27 UTC
This test fails with the patches:
t/db_dependent/selenium/patrons_search.t

#   at t/db_dependent/selenium/patrons_search.t line 660.
Error while executing command: no such element: Unable to locate element: //table[@id="memberresultst"]//th[@aria-label="Date of birth: Activate to sort"]/input at /usr/share/perl5/Selenium/Remote/Driver.pm line 411.


(I'm sorting out Cypress issues also check them)
Comment 23 Jonathan Druart 2025-12-18 09:19:32 UTC
Ha, I think it's where I left this bug and why I was asking comment 5.

There is the sorting arrows not correctly displayed in the headers, and the class is no longer on the the but in a span child.

https://snipboard.io/olhaYc.jpg
Comment 24 Owen Leonard 2025-12-18 11:58:22 UTC
Created attachment 190614 [details] [review]
Bug 40816: (follow-up) Standardize sort icon alignment

DataTables wants to change the alignment of the sorting icons when it
detects the column contents as numeric or date. This patch overrides
that.
Comment 25 Jonathan Druart 2025-12-18 12:22:54 UTC
Created attachment 190615 [details] [review]
Bug 40816: Fix a failing Selenium test

Patch from commit 3040a99
Comment 26 Victor Grousset/tuxayo 2025-12-18 19:51:28 UTC
Thanks for the fix :)


(In reply to Victor Grousset/tuxayo from comment #22)
> (I'm sorting out Cypress issues also check them)

Finally!

Unfortunately there are 3 tests that fails with the patches:

cypress run --config video=false --spec "t/cypress/integration/Tools/ManageMarcImport_spec.ts,t/cypress/integration/Auth/csrf.ts,t/cypress/integration/ERM/Agreements_spec.ts"

-------------
  1) loads the manage MARC import page
       upload a MARC record:
     AssertionError: Timed out retrying after 10000ms: Expected to find content: 'View batch' but never did.
      at Context.eval (webpack://koha/./t/cypress/integration/Tools/ManageMarcImport_spec.ts:75:11)
----------------
  1) CSRF
       Add:
     AssertionError: Timed out retrying after 10000ms: Expected to find element: `select[name='libraries_length']`, but never found it.
      at Context.eval (webpack://koha/./t/cypress/integration/Auth/csrf.ts:112:11)

--------------------
  1) Agreement CRUD operations
       Delete agreement:

     Error: The following error originated from your application code, not from Cypress.

  > ResizeObserver loop limit exceeded

When Cypress detects uncaught errors originating from your application it will automatically fail the current test.

This behavior is configurable, and you can choose to turn this off by listening to the `uncaught:exception` event.

https://on.cypress.io/uncaught-exception-from-application
    at <unknown> (http://koha:8081/cgi-bin/koha/erm/agreements:0:0)
Comment 27 Victor Grousset/tuxayo 2025-12-18 20:13:48 UTC
QA script complains about koha-tmpl/opac-tmpl/lib/datatables/datatables.min.js but it shouldn't be checked so it's a false positive. Since it's only checked when being touched by a commit, that doesn't seem to an issue even if left as is.
Comment 28 Jonathan Druart 2026-01-06 13:58:16 UTC
Created attachment 190937 [details] [review]
Bug 40816: Fix Auth/csrf.ts

Patch from commit b69cdec
Comment 29 Jonathan Druart 2026-01-06 13:58:18 UTC
Created attachment 190938 [details] [review]
Bug 40816: Ignore 'ResizeObserver loop limit exceeded'

I have NO idea how to fix this error. I don't see it on the Koha UI,
neither using Cypress UI.

It seems safe for now to ignore this error (The internet says so).
Comment 30 Jonathan Druart 2026-01-06 13:58:33 UTC
(In reply to Victor Grousset/tuxayo from comment #26)
> cypress run --config video=false --spec
> "t/cypress/integration/Tools/ManageMarcImport_spec.ts,t/cypress/integration/
> Auth/csrf.ts,t/cypress/integration/ERM/Agreements_spec.ts"
> 
> -------------
>   1) loads the manage MARC import page
>        upload a MARC record:
>      AssertionError: Timed out retrying after 10000ms: Expected to find
> content: 'View batch' but never did.
>       at Context.eval
> (webpack://koha/./t/cypress/integration/Tools/ManageMarcImport_spec.ts:75:11)

Known random failure, see bug 41368.


>   1) CSRF
>        Add:
>      AssertionError: Timed out retrying after 10000ms: Expected to find
> element: `select[name='libraries_length']`, but never found it.
>       at Context.eval
> (webpack://koha/./t/cypress/integration/Auth/csrf.ts:112:11)

Should be fixed. 

>   1) Agreement CRUD operations
>        Delete agreement:
> 
>      Error: The following error originated from your application code, not
> from Cypress.
> 
>   > ResizeObserver loop limit exceeded
> 
> When Cypress detects uncaught errors originating from your application it
> will automatically fail the current test.
> 
> This behavior is configurable, and you can choose to turn this off by
> listening to the `uncaught:exception` event.
> 
> https://on.cypress.io/uncaught-exception-from-application
>     at <unknown> (http://koha:8081/cgi-bin/koha/erm/agreements:0:0)

I am stuck on this one, I've decided to ignore the error for now.
Comment 31 David Cook 2026-02-16 00:22:55 UTC
So what do we need to do to move this one forward?
Comment 32 Jonathan Druart 2026-02-16 08:53:51 UTC
(In reply to David Cook from comment #31)
> So what do we need to do to move this one forward?

It's ready for QA.
Comment 33 David Cook 2026-02-17 01:39:08 UTC
(In reply to Jonathan Druart from comment #32)
> (In reply to David Cook from comment #31)
> > So what do we need to do to move this one forward?
> 
> It's ready for QA.

Ok, I'll take a look...

Little merge conflict but easy enough to fix.
Comment 34 David Cook 2026-02-17 02:01:19 UTC
Created attachment 193272 [details] [review]
Bug 40816: DT - Update css and js files

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: David Cook <dcook@prosentient.com.au>
Comment 35 David Cook 2026-02-17 02:01:24 UTC
Created attachment 193273 [details] [review]
Bug 40816: Cherry-pick previous manual changes after update

This is a cherry-pick of
  commit e0193051e173557351d3da6697cb5f9c3e801185
  Bug 36640: (follow-up) CSS fixes for DataTables controls

I have only kept the changes to datatables.css

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: David Cook <dcook@prosentient.com.au>
Comment 36 David Cook 2026-02-17 02:01:28 UTC
Created attachment 193274 [details] [review]
Bug 40816: Fix sort icons

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: David Cook <dcook@prosentient.com.au>
Comment 37 David Cook 2026-02-17 02:01:32 UTC
Created attachment 193275 [details] [review]
Bug 40816: Remove !important from the min version

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: David Cook <dcook@prosentient.com.au>
Comment 38 David Cook 2026-02-17 02:01:39 UTC
Created attachment 193276 [details] [review]
Bug 40816: DT - Update css and js files - OPAC

Signed-off-by: David Cook <dcook@prosentient.com.au>
Comment 39 David Cook 2026-02-17 02:01:43 UTC
Created attachment 193277 [details] [review]
Bug 40816: Remove !important from css files - OPAC

Signed-off-by: David Cook <dcook@prosentient.com.au>
Comment 40 David Cook 2026-02-17 02:01:47 UTC
Created attachment 193278 [details] [review]
Bug 40816: Adjust about page

Signed-off-by: David Cook <dcook@prosentient.com.au>
Comment 41 David Cook 2026-02-17 02:01:51 UTC
Created attachment 193279 [details] [review]
Bug 40816: (follow-up) CSS updates for table sorting icons

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: David Cook <dcook@prosentient.com.au>
Comment 42 David Cook 2026-02-17 02:01:57 UTC
Created attachment 193280 [details] [review]
Bug 40816: (follow-up) Standardize sort icon alignment

DataTables wants to change the alignment of the sorting icons when it
detects the column contents as numeric or date. This patch overrides
that.

Signed-off-by: David Cook <dcook@prosentient.com.au>
Comment 43 David Cook 2026-02-17 02:02:01 UTC
Created attachment 193281 [details] [review]
Bug 40816: Fix a failing Selenium test

Signed-off-by: David Cook <dcook@prosentient.com.au>
Comment 44 David Cook 2026-02-17 02:02:05 UTC
Created attachment 193282 [details] [review]
Bug 40816: Fix Auth/csrf.ts

Signed-off-by: David Cook <dcook@prosentient.com.au>
Comment 45 David Cook 2026-02-17 02:02:09 UTC
Created attachment 193283 [details] [review]
Bug 40816: Ignore 'ResizeObserver loop limit exceeded'

I have NO idea how to fix this error. I don't see it on the Koha UI,
neither using Cypress UI.

It seems safe for now to ignore this error (The internet says so).

Signed-off-by: David Cook <dcook@prosentient.com.au>
Comment 46 David Cook 2026-02-17 02:05:29 UTC
Looks good and works for me. False positives on the QA tools and tests pass. 

I'll be glad to get DT updated so we can update it again soon.
Comment 47 David Cook 2026-03-06 05:16:30 UTC
Jonathan pointed out on bug 42003 that in patron search the following happens when using filters:

Before:
Patrons found for: Library=Institut Protestant de Théologie, Category=Inter-Library Loan

After:
Patrons found for:
Library
=Institut Protestant de Théologie,
Category
=Inter-Library Loan

It's because the Datatable header used to just be two span elements but now they're wrapper in a <div> which has a default "display: block" CSS property. 

In koha-tmpl/intranet-tmpl/prog/js/datatables.js you can see the following:

1363                 column_searches.push(
1364                     "%s=%s".format(
1365                         table_dt.column(i).header().innerHTML,
1366                         search
1367                     )
1368                 );

That's what's setting up this %s=%s text...
Comment 48 David Cook 2026-03-06 05:20:38 UTC
(In reply to David Cook from comment #47)
> Jonathan pointed out on bug 42003 that in patron search the following
> happens when using filters:
> 
> Before:
> Patrons found for: Library=Institut Protestant de Théologie,
> Category=Inter-Library Loan
> 
> After:
> Patrons found for:
> Library
> =Institut Protestant de Théologie,
> Category
> =Inter-Library Loan
> 
> It's because the Datatable header used to just be two span elements but now
> they're wrapper in a <div> which has a default "display: block" CSS
> property. 
> 
> In koha-tmpl/intranet-tmpl/prog/js/datatables.js you can see the following:
> 
> 1363                 column_searches.push(
> 1364                     "%s=%s".format(
> 1365                         table_dt.column(i).header().innerHTML,
> 1366                         search
> 1367                     )
> 1368                 );
> 
> That's what's setting up this %s=%s text...

I don't know if anywhere but koha-tmpl/intranet-tmpl/prog/en/includes/patron-search.inc actually uses the "show_search_descriptions" option of $.fn.kohaTable...  I am struggling to find somewhere else. As a positional argument, it's pretty tough to grep for this one...
Comment 49 David Cook 2026-03-06 05:33:00 UTC
(In reply to David Cook from comment #48)
> I don't know if anywhere but
> koha-tmpl/intranet-tmpl/prog/en/includes/patron-search.inc actually uses the
> "show_search_descriptions" option of $.fn.kohaTable...  I am struggling to
> find somewhere else. As a positional argument, it's pretty tough to grep for
> this one...

So I've got two ideas for this one... 

One is to update the CSS just for the patron search page to change the div in question to an inline display.

The other is to change datatables.js to use ".textContent" rather than ".innerHTML". I actually think I like this one better, because we don't actually need the HTML. We just need the text content.

My only reservation about the latter is that I don't know where all these search descriptions end up. I've only noticed patron search so far but it could be elsewhere, since kohaTable is used in a lot of places.

Anyway, I'll add both and people can pick and choose...
Comment 50 David Cook 2026-03-06 05:35:27 UTC
Created attachment 194613 [details] [review]
Bug 40816: (follow-up) make search description inline for patron search
Comment 51 David Cook 2026-03-06 05:35:31 UTC
Created attachment 194614 [details] [review]
Bug 40816: (follow-up) change DataTables search descriptions to use text rather than HTML

We shouldn't really be picking the HTML from the header
when all we really need is the text content of the header cell.
Comment 52 Jonathan Druart 2026-03-06 08:51:22 UTC
Created attachment 194621 [details] [review]
Bug 40816: (follow-up) change DataTables search descriptions to use text rather than HTML

We shouldn't really be picking the HTML from the header
when all we really need is the text content of the header cell.

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 53 Jonathan Druart 2026-03-06 08:52:59 UTC
Excellent, thanks David!

The second patch is definitely better. I am not aware of other places where we use the search description.

Yes I do agree that the list of parameters we pass to kohaTable is too long and we should use named parameters instead.
Comment 54 Jonathan Druart 2026-03-06 08:57:01 UTC
(In reply to Jonathan Druart from comment #53)
> Yes I do agree that the list of parameters we pass to kohaTable is too long
> and we should use named parameters instead.

Opened bug 42009.