Simple Pagination with jQuery

In case you have any questions or suggestions, you can leave comments
HERE . Thanks!

Notice that there will be errors if event listener on page-button is written
as

$('.page-button').on('click', function(){
...
})

When dynamically generating elements or manipulation selectors (e.g. removing
and adding classes), we need to use delegated events.

$(element).on('event','selector',callback_function)

where the element should be a static container.

Delegated events have the advantage that they can process events from
descendant elements that are added to the document at a later time. By
picking an element that is guaranteed to be present at the time the
delegated event handler is attached, you can use delegated events to avoid
the need to frequently attach and remove event handlers. This element could
be the container element of a view in a Model-View-Controller design, for
example, or document if the event handler wants to monitor all bubbling
events in the document. The document element is available in the head of the
document before loading any other HTML, so it is safe to attach events there
without waiting for the document to be ready.

The problem with this solution is that when you have a lot of items in the
database, it will take a long time to retrieve and transmit the data when
opening the page. A better solution could use a SQL solution with LIMITs. like

SELECT * FROM table LIMIT offset, iterms_per_page;

<html><head><title>Pagination Test</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></head><body><p><selectid="row_select"><optionvalue="2">2</option><optionvalue="3">3</option><optionvalue="4">4</option></select>
entries per page</p><divclass="entries"></div><spanclass="pagination-buttons"></span><script type="text/javascript">// array to be shownconstarr=['one','two','three','four','five','six','seven','eight','nine']// entries per page, default at start is 2varepp=2// number of pagesvarnp=Math.ceil(arr.length/epp)// drow buttons$(draw_buttons())// show first page$(show_page(1))functiondraw_buttons(){for(leti=1;i<=np;i++){constt=create_button(i)$('.pagination-buttons').append(t)}}functioncreate_button(value){constbutton=$(document.createElement('span'))button.html(`<button class="page-button" id="page-${value}">${value}</button>`);returnbutton}functioncreate_entry(entry_id){constentry=$(document.createElement('p'))entry.attr({'class':'entry'})entry.html(`${arr[entry_id]}`)returnentry}functionshow_page(page_id){$('.entries').text('')for(leti=(page_id-1)*epp;i<page_id*epp&&i<arr.length;i++){$('.entries').append(create_entry(i))}}// wrong to use $('.page-button').on('click')$('.pagination-buttons').on('click','.page-button',function(){constpage_id=$(this).text()show_page(page_id)})$(document).on('change','#row_select',function(){epp=this.valuenp=Math.ceil(arr.length/epp)$('.pagination-buttons').text('')draw_buttons()show_page(1);})</script></body></html>