How do I make a dynamic pagination run the same function it was rendered?

Question

I’m dynamically rendering a view with the pagination defined and to perform this action I use the following function:

$('#form').submit(function (e) {
    e.preventDefault();

    const request = $.ajax({
        url: '/module/controller/action',
        method: 'POST',
        data: $(this).serialize()
    });

    request.done(function (data) {
        $('#dynamic_elements').html(data);
    });
});

I would like paging to perform the same function by sending the page number through the method GET for the same controller which is used for rendering view via POST.

Follow the example of pagination:

<ul class="pagination">
    <li class="active"><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
</ul>

Answer 1

Create a Event Handler for links that are not within the <li> with class .active, firing a Trigger for the event .submit form, passing a parameter with the button number:

$(".pagination a").on("click", function(e){
   e.preventDefault();
   if(!$(this).parent().hasClass("active")) $('#form').trigger("submit", $(this).text().trim());
});

The if above will prevent the link that is inside the li with class .active Fire Trigger. Maybe the active page doesn’t matter if it reloads, but if you want it to be enabled to click as well, just remove the if:

$(".pagination a").on("click", function(e){
   e.preventDefault();
   $('#form').trigger("submit", $(this).text().trim());
});

Note that Trigger sends as parameter for event .submit the text of the link, then you need to put in the event function .submit a second variable to receive this information:

$('#form').submit(function (e, v) {
                               ↑

Now just concatenate in the controller URL the parameter of the page that will be sent via GET:

url: '/module/controller/action'+ (v ? '?pagina='+ v : ''),

The ternary operator will check whether the variable v has some value and concatenate in the controller URL the parameter ?pagina= plus the value in v (in place of pagina you use the name you think best).

In the controller you will receive the value in pagina with $_GET['pagina'];. The form itself you will receive normal with $_POST.

---

If pagination links are being created on the page after loading the page, change the Event Handler for the form below (delegated form):

$(document).on("click", ".pagination a", function(e){
   e.preventDefault();
   $('#form').trigger("submit", $(this).text().trim());
});