Skip to content

update datatables.net-bs #3663

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.

Sign up for GitHub

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

Open
darkexplosiveqwx wants to merge 8 commits into
base: development
Choose a base branch
from
Open

update datatables.net-bs #3663

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b52dca4
Update datatables to 1.11.5
darkexplosiveqwx Nov 22, 2025
fcf6432
CSS fix for changes introduced in 1.10.24
darkexplosiveqwx Nov 22, 2025
435bc20
Update datatables to 1.13.11
darkexplosiveqwx Nov 22, 2025
2b09d8f
remove custom CSS for sorting indicators
darkexplosiveqwx Nov 22, 2025
1f1e05e
Apply code review and fixes for alternating color
darkexplosiveqwx Nov 23, 2025
4369db3
use --dt-row-selected
darkexplosiveqwx Jan 29, 2026
d91d8e9
black checkmark on light theme
darkexplosiveqwx Jan 29, 2026
0273c29
make CI happy
darkexplosiveqwx Jan 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 6 additions & 15 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
"chartjs-adapter-moment": "1.0.1",
"chartjs-plugin-deferred": "2.0.0",
"chartjs-plugin-zoom": "2.2.0",
"datatables.net-bs": "1.10.21",
"datatables.net-bs": "1.13.11",
"datatables.net-buttons-bs": "1.7.1",
"datatables.net-select-bs": "1.3.1",
"daterangepicker": "3.1.0",
Expand Down
3 changes: 3 additions & 0 deletions style/themes/default-dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -557,6 +557,9 @@ fieldset[disabled] .form-control {
.table-striped > tbody > tr:nth-of-type(2n + 1) {
background-color: #2d343a;
}
table.dataTable.table-striped > tbody > tr.odd {
background-color: #2d343a;
}
.panel,
.panel-body,
.panel-default > .panel-heading {
Expand Down
3 changes: 3 additions & 0 deletions style/themes/default-darker.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -404,6 +404,9 @@ caption {
.table-striped > tbody > tr:nth-of-type(2n + 1) {
background-color: rgb(27, 30, 31);
}
table.dataTable.table-striped > tbody > tr.odd {
background-color: rgb(27, 30, 31);
}
.table-hover > tbody > tr:hover {
background-color: rgb(30, 32, 33);
}
Expand Down
33 changes: 15 additions & 18 deletions style/themes/high-contrast-dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -742,6 +742,9 @@ fieldset[disabled] .form-control {
.table-striped > tbody > tr:nth-of-type(2n + 1) {
background-color: #1d252d;
}
table.dataTable.table-striped > tbody > tr.odd {
background-color: #1d252d;
}

.panel,
.panel-body,
Expand Down Expand Up @@ -918,29 +921,23 @@ input[type="password"]::-webkit-caps-lock-indicator {
background-color: rgba(0, 64, 64, 0.35);
}

table.dataTable thead .sorting::after,
Copy link
Copy Markdown
Member

@rdwebdesign rdwebdesign Nov 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to try co increase the contrast on these 2 themes

Can you try this for the dark theme?

table.dataTable thead > tr > th.sorting::before {
  opacity: 0.4;
}

table.dataTable thead > tr > th.sorting::after {
  opacity: 0.4;
}

table.dataTable thead > tr > th.sorting:hover::before,
table.dataTable thead > tr > th.sorting:hover::after {
  color: var(--primary-color);
}

table.dataTable thead > tr > th.sorting.sorting_asc::before,
table.dataTable thead > tr > th.sorting.sorting_desc::after {
  opacity: 1;
  color: #fff;
}

Copy link
Copy Markdown
Contributor Author

@darkexplosiveqwx darkexplosiveqwx Nov 23, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[deleted](Commented on the wrong suggestion)

table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after,
table.dataTable thead .sorting_asc_disabled::after,
table.dataTable thead .sorting_desc_disabled::after {
opacity: 1;
width: 20px;
padding: 0 1px;
border-radius: 4px;
text-align: center;
table.dataTable thead > tr > th.sorting::before {
opacity: 0.4;
}

table.dataTable thead .sorting::after {
opacity: 0.6;
table.dataTable thead > tr > th.sorting::after {
opacity: 0.4;
}

table.dataTable thead th:hover.sorting::after,
table.dataTable thead th:hover.sorting_asc::after,
table.dataTable thead th:hover.sorting_desc::after,
table.dataTable thead th:hover.sorting_asc_disabled::after,
table.dataTable thead th:hover.sorting_desc_disabled::after {
table.dataTable thead > tr > th.sorting:hover::before,
table.dataTable thead > tr > th.sorting:hover::after {
color: var(--primary-color);
}

table.dataTable thead > tr > th.sorting.sorting_asc::before,
table.dataTable thead > tr > th.sorting.sorting_desc::after {
opacity: 1;
color: #fff;
background: #000;
}

td.highlight {
Expand Down
35 changes: 14 additions & 21 deletions style/themes/high-contrast.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -382,9 +382,6 @@ select:-webkit-autofill {
.table-bordered > tfoot > tr > td {
border: 1px solid #d0d0d0;
}
.table-striped > tbody > tr:nth-of-type(2n + 1) {
background-color: #fcfcfc;
}

.blocked-row td {
background-color: rgba(230, 160, 160, 0.3);
Expand All @@ -397,27 +394,23 @@ td.highlight {
background-color: rgba(255, 204, 0, 0.333);
}

table.dataTable thead .sorting:after,
Copy link
Copy Markdown
Member

@rdwebdesign rdwebdesign Nov 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And this for the light theme?

table.dataTable thead > tr > th.sorting::before {
  opacity: 0.5;
}

table.dataTable thead > tr > th.sorting::after {
  opacity: 0.5;
}

table.dataTable thead > tr > th.sorting:hover::before,
table.dataTable thead > tr > th.sorting:hover::after {
  color: var(--primary-color);
}

table.dataTable thead > tr > th.sorting.sorting_asc::before,
table.dataTable thead > tr > th.sorting.sorting_desc::after {
  opacity: 1;
  color: #fff;
}

table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
opacity: 1;
width: 20px;
padding: 0 1px;
border-radius: 4px;
text-align: center;
table.dataTable thead > tr > th.sorting::before {
opacity: 0.5;
}

table.dataTable thead > tr > th.sorting::after {
opacity: 0.5;
}
table.dataTable thead .sorting:after {
opacity: 0.6;

table.dataTable thead > tr > th.sorting:hover::before,
table.dataTable thead > tr > th.sorting:hover::after {
color: var(--primary-color);
}
table.dataTable thead th:hover.sorting::after,
table.dataTable thead th:hover.sorting_asc::after,
table.dataTable thead th:hover.sorting_desc::after,
table.dataTable thead th:hover.sorting_asc_disabled::after,
table.dataTable thead th:hover.sorting_desc_disabled::after {

table.dataTable thead > tr > th.sorting.sorting_asc::before,
table.dataTable thead > tr > th.sorting.sorting_desc::after {
opacity: 1;
color: #fff;
background: #000;
}

#domain-frequency .table-responsive table tr th:nth-child(3),
Expand Down
41 changes: 12 additions & 29 deletions style/themes/lcars.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1361,44 +1361,27 @@ table.table-bordered.dataTable td {
border: 1px solid #111 !important;
}

table.dataTable thead .sorting::before {
Copy link
Copy Markdown
Member

@rdwebdesign rdwebdesign Nov 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree most of the old CSS can be removed here, but I still think the default opacity is too low and the controls look too faded in this theme.

Can you please try these CSS rules?

table.dataTable thead > tr > th.sorting::before {
  bottom: calc(50% + 2px);
  opacity: 0.2;
}

table.dataTable thead > tr > th.sorting::after {
  opacity: 0.2;
}

table.dataTable thead > tr > th.sorting.sorting_asc::before {
  opacity: 1;
}

table.dataTable thead > tr > th.sorting.sorting_desc::after {
  opacity: 1;
}

content: "\25B3";
position: absolute;
bottom: 16px;
right: 8px;
display: block;
font-family: "Glyphicons Halflings";
opacity: 0.3;
font-size: 0.6em;
table.dataTable thead > tr > th.sorting::before {
bottom: calc(50% + 2px);
opacity: 0.2;
}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
opacity: 0.6;
table.dataTable thead > tr > th.sorting::after {
opacity: 0.2;
}

table.dataTable thead .sorting:after {
opacity: 0.3;
content: "\25BD";
font-size: 0.6em;
}

table.dataTable thead .sorting_asc::after {
content: "\25B2";
table.dataTable thead > tr > th.sorting.sorting_asc::before {
opacity: 1;
}

table.dataTable thead .sorting_desc::after {
content: "\25BC";
table.dataTable thead > tr > th.sorting.sorting_desc::after {
opacity: 1;
}

table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
color: #eee;
table.dataTable.table-striped > tbody > tr.odd {
background: none;
background-color: rgba(80, 80, 80, 0.1);
}

.table-striped > tbody > tr:nth-of-type(2n + 1) {
Copy link
Copy Markdown
Member

@rdwebdesign rdwebdesign Nov 22, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new CSS changed the selector here, so we need to changed it to make sure the table rows have alternating background colors:

Suggested change
.table-striped > tbody > tr:nth-of-type(2n + 1) {
table.dataTable.table-striped > tbody > tr:nth-of-type(2n + 1) {

Copy link
Copy Markdown
Contributor Author

@darkexplosiveqwx darkexplosiveqwx Nov 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about using tr.odd instead of tr:nth-of-type(2n + 1)?

Suggested change
.table-striped > tbody > tr:nth-of-type(2n + 1) {
table.dataTable.table-striped > tbody > tr.odd {

From the Domains page:

<tbody>
    <tr
        class="odd"
        data-id="0064006f006d00610069006e0031002e0063006f006d_deny_exact"
    ></tr>
    <tr
        class="even"
        data-id="0064006f006d00610069006e0032002e0063006f006d_deny_exact"
    ></tr>
    <tr
        class="odd"
        data-id="0064006f006d00610069006e0033002e0063006f006d_deny_exact"
    ></tr>
    <tr
        class="even"
        data-id="0064006f006d00610069006e0034002e0063006f006d_deny_exact"
    ></tr>
</tbody>

Copy link
Copy Markdown
Contributor Author

@darkexplosiveqwx darkexplosiveqwx Nov 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Both table.dataTable.table-striped > tbody > tr.odd and table.dataTable.table-striped > tbody > tr:nth-of-type(2n + 1) seem to work for Domains, Groups, Clients, Lists and Query Log.
But neither seems to work for the "homepage":
Example using Midnight:
This is with table.dataTable.table-striped > tbody > tr.odd and table.dataTable.table-striped > tbody > tr:nth-of-type(2n + 1):
Screenshot from 2025-11-23 10-56-19
Screenshot from 2025-11-23 10-59-13

The old .table-striped > tbody > tr:nth-of-type(2n + 1) is working for the homepage, but not something like Domains:
Screenshot from 2025-11-23 10-58-02
Screenshot from 2025-11-23 10-58-24

The table on the homepage does not have even and odd classes.

We would need something like this for default-dark.css:

.table-striped > tbody > tr:nth-of-type(2n + 1) {
  background-color: #2d343a;
}
table.dataTable.table-striped > tbody > tr.odd {
  background-color: #2d343a;
}

The same is true for all other themes as well.
For LCARS:

Suggested change
.table-striped > tbody > tr:nth-of-type(2n + 1) {
table.dataTable.table-striped > tbody > tr.odd {
background: none;
background-color: rgba(80, 80, 80, 0.1);
}
.table-striped > tbody > tr:nth-of-type(2n + 1) {

Copy link
Copy Markdown
Contributor Author

@darkexplosiveqwx darkexplosiveqwx Nov 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For High contrast light we dont seem to need it at all.
With

.table-striped > tbody > tr:nth-of-type(2n + 1) {
  background-color: #fcfcfc;
}
table.dataTable.table-striped > tbody > tr.odd {
  background-color: #fcfcfc;
}
Screenshot from 2025-11-23 11-10-11 Screenshot from 2025-11-23 11-10-36

Without:
Screenshot from 2025-11-23 11-12-10
Screenshot from 2025-11-23 11-12-34

We might want to keep it, but use a color with better contrast instead, I will commit the Without changes for now.

Copy link
Copy Markdown
Member

@rdwebdesign rdwebdesign Nov 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmmm...

I only used the group management pages for testing my suggestions.

Your suggestions will probably fix all issues, but I will take a look an check (using the last commit) why some tables are working differently, to make sure nothing else is broken.

background: none;
background-color: rgba(80, 80, 80, 0.1);
Expand Down
6 changes: 3 additions & 3 deletions vendor/datatables/datatables.min.css
View file
Open in desktop

Large diffs are not rendered by default.

Loading