diff --git a/Core/Localization/de_DE/general.php b/Core/Localization/de_DE/general.php index a994ede..a09daff 100644 --- a/Core/Localization/de_DE/general.php +++ b/Core/Localization/de_DE/general.php @@ -64,8 +64,9 @@ return [ "overwrite" => "Überschreiben", # data table - "showing_x_of_y_entries" => "Zeige %d von %d Einträgen", + "showing_x_to_y_of_z_entries" => "Zeige %d bis %d von %d Einträgen", "controls" => "Steuerung", + "entries_per_page" => "pro Seite", # date / time "date" => "Datum", diff --git a/Core/Localization/en_US/general.php b/Core/Localization/en_US/general.php index 8dff1b9..d26f23e 100644 --- a/Core/Localization/en_US/general.php +++ b/Core/Localization/en_US/general.php @@ -64,8 +64,9 @@ return [ "overwrite" => "Overwrite", # data table - "showing_x_of_y_entries" => "Showing %d of %d entries", + "showing_x_to_y_of_z_entries" => "Showing %d to %d of %d entries", "controls" => "Controls", + "entries_per_page" => "per Page", # date / time "date" => "Date", diff --git a/react/shared/elements/data-table.css b/react/shared/elements/data-table.css index 729955f..1852cf8 100644 --- a/react/shared/elements/data-table.css +++ b/react/shared/elements/data-table.css @@ -33,9 +33,12 @@ .pagination-controls { margin-top: 6px; + display: grid; + grid-template-columns: 75px auto; + align-items: center; } -.pagination-page-size > div { +.pagination-controls select { padding-top: 5px; padding-bottom: 5px; } diff --git a/react/shared/hooks/pagination.js b/react/shared/hooks/pagination.js index 114b832..4b1e6f1 100644 --- a/react/shared/hooks/pagination.js +++ b/react/shared/hooks/pagination.js @@ -1,5 +1,5 @@ import React, {useState} from "react"; -import {FormControl, Box, Select, Pagination as MuiPagination} from "@mui/material"; +import {FormControl, Box, Select, Pagination as MuiPagination, InputLabel} from "@mui/material"; import {sprintf} from "sprintf-js"; class Pagination { @@ -55,14 +55,18 @@ class Pagination { renderPagination(L, numEntries, options = null) { options = options || [10, 25, 50, 100]; + let start = (this.getPage() - 1) * this.data.pageSize + 1; + let end = Math.min(this.data.total, start + numEntries - 1); - return + return + {L("general.entries_per_page")}