Hello community,

I am trying to work with pagination. Facing some problems. What I have right now:
paginationAccount.html:
<template>
<lightning-card title="Pagination Test" icon-name="custom:custom63">
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
<thead>
<tr>
<th>
<div>Id</div>
</th>
<th>
<div>Name</div>
</th>
<th>
<div>Phone</div>
</th>
</tr>
</thead>
<tbody>
<template for:each={accounts} for:item="account">
<tr key={account.Id}>
<td key={account.Id}>
{account.Id}
</td>
<td key={account.Name}>
{account.Name}
</td>
<td key={account.Phone}>
{account.Phone}
</td>
</tr>
</template>
</tbody>
</table>
<br>
<div style="text-align:center;">
<c-my-test-paginator onprevious={handlePrev} onnext={handleNext}></c-my-test-paginator>
</div>
</lightning-card>
</template>

paginationAcount.js
import { LightningElement,track,wire } from 'lwc';
import fetchAccountRecord from '@salesforce/apex/PaginationAccountController.fetchAccountRecord';
import TotalAccounts from '@salesforce/apex/PaginationAccountController.TotalAccounts';
export default class PaginationAccount extends LightningElement {
@track accounts;
@track error;
@track offset=0;
@track Prevoffset=0;
limit = 8;
@wire(fetchAccountRecord, { offset: '$offset', l: '$limit' }) wiredAccounts({ error, data }) {
if (data) {
this.accounts = data;
if(this.accounts.length == 0){
this.offset = this.Prevoffset;
}
} else if (error) {
this.error = error;
this.accounts = undefined;
}
}
constructor(){
super();
TotalAccounts().then(count =>{
if(count){
this.totalRecords= count;
fetchAccountRecord().then(data =>{
this.accounts = data;
})
}
})
}
handlePrev(_event){
if(this.offset - this.limit >=0){
this.Prevoffset=this.offset;
this.offset = this.offset - this.limit;
}
}
handleNext(_event){
this.Prevoffset=this.offset;
this.offset = this.offset + this.limit;
}
}

Apex:
public with sharing class PaginationAccountController {
@AuraEnabled(cacheable=true)
public static List<Account> fetchAccountRecord(Integer offset, Integer l){
return [SELECT Id, Name, Phone FROM Account LIMIT :l OFFSET :offset ];
}
@AuraEnabled(cacheable=true)
public static Integer TotalAccounts(){
return [SELECT COUNT() FROM Account];
}
}

paginator.html:
<template>
<lightning-button variant="brand" label="Prev" icon-name="utility:chevronleft" title="Base action"
onclick={handlePrev} class="slds-m-left_x-small"></lightning-button>
<lightning-button variant="brand" label="Next" icon-name="utility:chevronright" title="Base action"
onclick={handleNext} class="slds-m-left_x-small"></lightning-button>
</template>

paginator.js:
import { LightningElement } from 'lwc';
export default class MyTestPaginator extends LightningElement {
handlePrev(_event) {
debugger;
this.dispatchEvent(new CustomEvent('previous'));
}
handleNext(_event) {
this.dispatchEvent(new CustomEvent('next'));
}
}



First of all, my code looks not optimized. I have two buttons "previous" and "next" to switch in between the pages. I also want to have page numbers "1,2,3..." so that I can jump in pages more than just with "previous" or "next". I was thinking how to implement it? Probably, using a list or something like that.

Please, advice.