I want to make a table that is separated by pages, and the numbers in the form will not start counting from a new page because of a different page. However, it will count from beginning to end.
For example, this is the first page:
10 XXX
9 XXX
8 XXX
7 XXX
6 XXX
And this is the second page:
5 XXX
4 XXX
3 XXX
2 XXX
1 XXX
However, I could not let it counite counting, and now it happened a problem when I change to the next page:
The counter still like this:
10 XXX
9 XXX
8 XXX
7 XXX
6 XXX
5 XXX
note: the post Notice always appears above, then after that is a normal post.
This my code:
const rawData = [
{
writter: "Admin",
post_admin: true,
new_post: false,
title: "Test",
slug: "test",
code: "230109000001",
created_at: "2023-01-09 15:56:59",
view: 3,
share: 1,
jumlah_like: 0,
jumlah_komen: 4,
},
{
writter: "Dafni Lanahtadya",
post_admin: false,
new_post: false,
title: "pink",
slug: "pink",
code: "230120000112",
created_at: "2023-01-20 13:19:23",
view: 2,
share: 0,
jumlah_like: 0,
jumlah_komen: 0,
},
{
writter: "Dafni Lanahtadya",
post_admin: false,
new_post: false,
title: "weather 3",
slug: "weather-3",
code: "230120000111",
created_at: "2023-01-20 13:16:32",
view: 1,
share: 0,
jumlah_like: 0,
jumlah_komen: 0,
},
{
writter: "Dafni Lanahtadya",
post_admin: false,
new_post: false,
title: "weather 2",
slug: "weather-2",
code: "230120000110",
created_at: "2023-01-20 13:15:10",
view: 2,
share: 0,
jumlah_like: 0,
jumlah_komen: 0,
},
{
writter: "Dafni Lanahtadya",
post_admin: false,
new_post: false,
title: "weather",
slug: "weather",
code: "230120000109",
created_at: "2023-01-20 13:13:47",
view: 1,
share: 0,
jumlah_like: 0,
jumlah_komen: 0,
},
{
writter: "Putri Seprina",
post_admin: false,
new_post: false,
title: "postingan 19 saya",
slug: "postingan-19-saya",
code: "230120000102",
created_at: "2023-01-20 10:08:46",
view: 4,
share: 1,
jumlah_like: 1,
jumlah_komen: 5,
},
{
writter: "Putri Seprina",
post_admin: false,
new_post: false,
title: "postingan 1 saya",
slug: "postingan-1-saya",
code: "230120000056",
created_at: "2023-01-20 10:00:38",
view: 1,
share: 0,
jumlah_like: 0,
jumlah_komen: 0,
},
{
writter: "Dafni Lanahtadya",
post_admin: false,
new_post: false,
title: "57",
slug: "57",
code: "230120000045",
created_at: "2023-01-20 09:58:37",
view: 0,
share: 0,
jumlah_like: 0,
jumlah_komen: 0,
},
{
writter: "Dafni Lanahtadya",
post_admin: false,
new_post: false,
title: "58",
slug: "58",
code: "230120000044",
created_at: "2023-01-20 09:58:22",
view: 0,
share: 0,
jumlah_like: 0,
jumlah_komen: 0,
},
{
writter: "Dafni Lanahtadya",
post_admin: false,
new_post: false,
title: "59",
slug: "59",
code: "230120000043",
created_at: "2023-01-20 09:58:14",
view: 0,
share: 0,
jumlah_like: 0,
jumlah_komen: 0,
},
];
function Index() {
const [listSubPost, setListSubPost] = useState(rawData);
const [countPage, setCountPage] = useState(0);
const [currentPage, setCurrentPage] = useState(1);
const [perPage, setPerPage] = useState(5);
const [dataCount, setDataCount] = useState(31);
const [dataAdminCount, setDataAdminCount] = useState(0);
const [initialPage, setInitialPage] = useState(1);
const setPage = (array, page_size, page_number) => {
// human-readable page numbers usually start with 1, so we reduce 1 in the first argument
setListSubPost(
array.slice((page_number - 1) * page_size, page_number * page_size)
);
};
let _indexUser = 0;
let _countAll = dataCount - dataAdminCount;
return (
<>
<div>
<table
aria-label="Example static collection table"
style={{
height: "auto",
minWidth: "100%",
overflowX: "auto",
}}
>
<thead>
<td>Number</td>
<td>TITLE</td>
<td>WRITER</td>
<td>DATE</td>
<td>LIKES</td>
<td>VIEWS</td>
</thead>
<tbody>
{listSubPost.map((item, index) => {
if (!item?.post_admin) {
_indexUser = _indexUser 1;
}
return (
<tr key={index}>
<td>
{item?.post_admin
? "Notice"
: _countAll -
(_indexUser - 2) -
Math.ceil(currentPage / perPage)}
</td>
<td>{item.title}</td>
<td>{item.writter}</td>
<td>{item.created_at}</td>
<td>{item.jumlah_like}</td>
<td>{item.view}</td>
</tr>
);
})}
</tbody>
</table>
<button onClick={() => setPage(rawData, 5, 1)}>page 1</button>
<button onClick={() => setPage(rawData, 5, 2)}>page 2</button>
</div>
</>
);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>CodePudding user response：
thank you all for the answer,
after several hours of searching for the right formula, I finally found the solution. this for my formula at column Number
{item?.post_admin ? 'Notice' : (dataCount - ((currentPage - 1) * perPage)) - index}
if someone search about my problem or same with my question :)
CodePudding user response：
This code can work:
<table id="TableNum">
<tr></tr>
</table>
<table id="TableInfor">
</table>
<script>
var AllMessage = 12;
var SinglePage = 5;
var NowPage = 1; //*********It is from 1*********
var ParentTR = document.getElementById("TableNum");
var Array = new Array();
//--------
for (var i = 0;i < Math.ceil(AllMessage/SinglePage);i ){
for (var r = 0;r < SinglePage;r ){
Array[r i * SinglePage] = "Change this to your data:" Math.random()*10;
}}
//--------
//console.log(Math.ceil(AllMessage/SinglePage))
for (var i = 1;i < Math.ceil(AllMessage/SinglePage) 1;i ){
for (var r = 1;r < SinglePage 1;r ){
if(NowPage == i){
if(AllMessage >= r i * SinglePage - SinglePage){ //This will not permit overflow message;
//For example. If you have 11 message and you are on P3, this will block 12,13...15 Message;
//Why did I need to add this instead of changing the equation?
//Because I could not find what's wrong, and this is the simiplest way to finish it!~
var tr = document.createElement("tr");
var td = document.createElement("td");
var text = document.createTextNode(AllMessage 1 - (r i * SinglePage - SinglePage));
document.body.appendChild(tr);
tr.parentNode.insertBefore(ParentTR, td.nextElementSibling)
ParentTR.appendChild(tr)
//--------
td.appendChild(text);
document.body.appendChild(td);
td.parentNode.insertBefore(ParentTR, td.nextElementSibling);
tr.appendChild(td);
//--------
var td2 = document.createElement("td");
var text2 = document.createTextNode(Array[AllMessage 1 - (r i * SinglePage - SinglePage)]);
//--------
td2.appendChild(text2);
document.body.appendChild(td2);
td2.parentNode.insertBefore(tr, td.nextElementSibling);
tr.appendChild(td2);
}
}
}
r = 0;
}
</script>