Thanks Daniel, I see.. that's one solution.. with the tab title

But what if there are, for example, 20 paragraphs and we want to divide every 3 or 4 paragraphs into one pagination..

Using Prev... Next... to switch between

The tabs in the text object can be added, renamed, moved and deleted.

-----

Haha... I think I reversed the links.

Thanks Daniel.. you are right, it can be solution for me to use tab and I can change the title with the "paragraph...", thank you so much

Hi John.. I am interested too with this way, can be applied with some textobject x5.... I've understood how to make the anchor in each textobject..  Would you please give the script for but the menu in the left bottom of the page? Thanks..

Thanks Miguel for sample of search and pagination.. It also can be used although enter all data manually, but it is possible make long text or paragraph too in every row, isn't it?

Please send the code.. thanks a lot

Okay, here's the code to insert into an HTML object.

-----------------------

<style>
/* Table styles */
.paginated-table {
width: 100%;
border-collapse: collapse;
font-family: sans-serif;
text-align: left;
}
.paginated-table thead th {
padding: 20px 10px;
background-color: #444;
color:#999;
border-bottom: 2px solid #333;
text-align: left;
}
.paginated-table tbody td {
padding: 10px;
border-bottom: 4px solid #777;
}
/* Pagination container styles */
.pagination-container {
text-align: center;
margin-top: 20px;
user-select: none;
}
/* Pagination button styles */
.pagination-container button {
display: inline-block;
padding: 6px 10px;
margin: 0 2px;
border: 2px solid #444;
background-color: #999;
color: #444;
cursor: pointer;
border-radius: 6px;
font-size: 0.75rem;
}
.pagination-container button:hover:not(:disabled) {
background-color: #444;
color: #ff4800;
}
.pagination-container button.active {
background-color: #555;
color: white;
border-color: #ff4800;
cursor: default;
}
.pagination-container button:disabled {
color: #ccc;
cursor: not-allowed;
border-color: #eee;
}

/* Search box */
#searchBox {
margin-bottom: 15px;
padding: 8px;
width: 320px;
border: 1px solid #666;
border-radius: 3px;
}
</style>

<!-- Caja de búsqueda -->
<input type="text" id="searchBox" placeholder="Buscar...">

<!-- Tabla -->
<table class="paginated-table" id="myPaginatedTable">
<thead>
<tr>
<th scope="col" style="width:10%;">ID</th>
<th scope="col" style="width:15%;">Name</th>
<th scope="col" style="width:75p%;">Objet</th>
</tr>
</thead>
<tbody>
<!-- Start of editing -->
<tr><td>1</td><td>Dato 1</td><td>Imagina una estrella brillante que nos recuerda que todo comenzó con una chispa de inspiración. O una ventana con nieve, donde cada copo trae consigo recuerdos nostálgicos de momentos pasados. También exploramos el significado de un regalo envuelto, porque lo que importa no siempre se ve a simple vista. Y no podemos olvidar las cartas escritas a mano, esas palabras que viajaron sin timbre, cargadas de emociones y anhelos. ¡Acompáñanos en este viaje literario y deja que cada cuento te hable al corazón!</td></tr>
<tr><td>2</td><td>Dato 2</td><td>Silla</td></tr>
<tr><td>3</td><td>Dato 3</td><td>Taburete</td></tr>
<tr><td>4</td><td>Dato 4</td><td>Cama</td></tr>
<tr><td>5</td><td>Dato 5</td><td>Escritorio</td></tr>
<tr><td>6</td><td>Dato 6</td><td>Ventana</td></tr>
<tr><td>7</td><td>Dato 7</td><td>Piso</td></tr>
<tr><td>8</td><td>Dato 8</td><td>Pared</td></tr>
<tr><td>9</td><td>Dato 9</td><td>Jardín</td></tr>
<tr><td>10</td><td>Dato 10</td><td>Terraza</td></tr>
<tr><td>11</td><td>Dato 11</td><td>Maceta</td></tr>
<tr><td>12</td><td>Dato 12</td><td>Lámpara</td></tr>

<!-- End of editing -->
</tbody>
</table>

<!-- Controles de paginación -->
<div class="pagination-container" id="paginationControls"></div>

<script>
function paginateTable(tableId, rowsPerPage) {
const table = document.getElementById(tableId);
const tbody = table.querySelector('tbody');
const allRows = Array.from(tbody.querySelectorAll('tr'));
let filteredRows = [...allRows];
let currentPage = 1;

const paginationControls = document.getElementById('paginationControls');
const searchBox = document.getElementById('searchBox');

function displayPage(page) {
currentPage = page;
allRows.forEach(row => row.style.display = 'none');

const totalPages = Math.ceil(filteredRows.length / rowsPerPage);
const startIndex = (page - 1) * rowsPerPage;
const endIndex = startIndex + rowsPerPage;
const pageRows = filteredRows.slice(startIndex, endIndex);

pageRows.forEach(row => row.style.display = '');
renderControls(totalPages);
}

function renderControls(totalPages) {
paginationControls.innerHTML = '';

// Botón Prev
const prevButton = document.createElement('button');
prevButton.innerHTML = '&laquo; Prev';
prevButton.disabled = currentPage === 1;
prevButton.addEventListener('click', () => displayPage(currentPage - 1));
paginationControls.appendChild(prevButton);

// Primera página
const firstButton = document.createElement('button');
firstButton.innerText = 1;
if (currentPage === 1) firstButton.classList.add('active');
firstButton.addEventListener('click', () => displayPage(1));
paginationControls.appendChild(firstButton);

// "..." si estamos lejos del inicio
if (currentPage > 4) {
const dots = document.createElement('button');
dots.innerText = '...';
dots.disabled = true;
paginationControls.appendChild(dots);
}

// Páginas cercanas a la actual
const start = Math.max(2, currentPage - 1);
const end = Math.min(totalPages - 1, currentPage + 1);

for (let i = start; i <= end; i++) {
const pageButton = document.createElement('button');
pageButton.innerText = i;
if (i === currentPage) pageButton.classList.add('active');
pageButton.addEventListener('click', () => displayPage(i));
paginationControls.appendChild(pageButton);
}

// "..." si faltan páginas al final
if (currentPage < totalPages - 3) {
const dots = document.createElement('button');
dots.innerText = '...';
dots.disabled = true;
paginationControls.appendChild(dots);
}

// Última página
if (totalPages > 1) {
const lastButton = document.createElement('button');
lastButton.innerText = totalPages;
if (currentPage === totalPages) lastButton.classList.add('active');
lastButton.addEventListener('click', () => displayPage(totalPages));
paginationControls.appendChild(lastButton);
}

// Botón Next
const nextButton = document.createElement('button');
nextButton.innerHTML = 'Next &raquo;';
nextButton.disabled = currentPage === totalPages;
nextButton.addEventListener('click', () => displayPage(currentPage + 1));
paginationControls.appendChild(nextButton);
}

// Filtrado con paginación
searchBox.addEventListener('input', () => {
const query = searchBox.value.toLowerCase().trim();
if (query === "") {
filteredRows = [...allRows]; // todas las filas
} else {
filteredRows = allRows.filter(row =>
row.innerText.toLowerCase().includes(query)
);
}
currentPage = 1;
displayPage(1);
});

displayPage(1);
}

paginateTable('myPaginatedTable', 5);
</script>

-----------------------

The section between "start of editing" and "end of editing" is what you'll need to change. Also, if you're creating more rows, copy and paste row #12. I hope that's clear.

You can edit the object's style as you like.

Regards.

Test with code from Miguel and HTML code <br><br> for line break and <b>Bold</b>, see

-----

-----

Also can use images, see my test page

>> https://findelinks.de/123test-aufklappmenue-2/suche-in-tabelle-mit-seitenzahl.html

-----