pagination fix
This commit is contained in:
parent
8f4650227f
commit
3a639d9a3c
@ -64,8 +64,9 @@ return [
|
|||||||
"overwrite" => "Überschreiben",
|
"overwrite" => "Überschreiben",
|
||||||
|
|
||||||
# data table
|
# 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",
|
"controls" => "Steuerung",
|
||||||
|
"entries_per_page" => "pro Seite",
|
||||||
|
|
||||||
# date / time
|
# date / time
|
||||||
"date" => "Datum",
|
"date" => "Datum",
|
||||||
|
@ -64,8 +64,9 @@ return [
|
|||||||
"overwrite" => "Overwrite",
|
"overwrite" => "Overwrite",
|
||||||
|
|
||||||
# data table
|
# 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",
|
"controls" => "Controls",
|
||||||
|
"entries_per_page" => "per Page",
|
||||||
|
|
||||||
# date / time
|
# date / time
|
||||||
"date" => "Date",
|
"date" => "Date",
|
||||||
|
@ -33,9 +33,12 @@
|
|||||||
|
|
||||||
.pagination-controls {
|
.pagination-controls {
|
||||||
margin-top: 6px;
|
margin-top: 6px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 75px auto;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination-page-size > div {
|
.pagination-controls select {
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
padding-bottom: 5px;
|
padding-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import React, {useState} from "react";
|
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";
|
import {sprintf} from "sprintf-js";
|
||||||
|
|
||||||
class Pagination {
|
class Pagination {
|
||||||
@ -55,14 +55,18 @@ class Pagination {
|
|||||||
|
|
||||||
renderPagination(L, numEntries, options = null) {
|
renderPagination(L, numEntries, options = null) {
|
||||||
options = options || [10, 25, 50, 100];
|
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 <Box display={"grid"} gridTemplateColumns={"75px auto"} className={"pagination-controls"}>
|
return <Box className={"pagination-controls"}>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
|
<InputLabel id="page-size-label">{L("general.entries_per_page")}</InputLabel>
|
||||||
<Select
|
<Select
|
||||||
native
|
native
|
||||||
|
labelId="page-size-label"
|
||||||
|
label={L("general.entries_per_page")}
|
||||||
value={this.data.pageSize}
|
value={this.data.pageSize}
|
||||||
className={"pagination-page-size"}
|
className={"pagination-page-size"}
|
||||||
label={L("general.entries_per_page")}
|
|
||||||
onChange={(e) => this.setPageSize(parseInt(e.target.value))}
|
onChange={(e) => this.setPageSize(parseInt(e.target.value))}
|
||||||
size={"small"}
|
size={"small"}
|
||||||
>
|
>
|
||||||
@ -74,7 +78,7 @@ class Pagination {
|
|||||||
onChange={(_, page) => this.setPage(page)}
|
onChange={(_, page) => this.setPage(page)}
|
||||||
/>
|
/>
|
||||||
<Box gridColumn={"1 / 3"} mt={1}>
|
<Box gridColumn={"1 / 3"} mt={1}>
|
||||||
{sprintf(L("general.showing_x_of_y_entries"), numEntries, this.data.total)}
|
{sprintf(L("general.showing_x_to_y_of_z_entries"), start, end, this.data.total)}
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user