Pagination with JQuery on HTML Page

Question

I'm using Go to write the backend with MongoDB. I am using JQuery AJAX to send requests to the API.

I have an API that accepts parameters (page, limit, offset) and returns all records as a response. I want to perform pagination and send these parameters on page Number button click. I have approx 4,50,000 records in the collection.

I have searched some examples using pagination plugin but from what I understood it will first load all records from DB then perform pagination but I do not want to load all records because I am already sending (page, limit, offset parameters to limit records. How we can do that using HTML and JQuery?

<a href='#' onclick='getRecords(page,limit,offset)'>1</a>

I am using using Find().skip().limit().All(&result) in golang. And My HTML code is like first table show first 10 rows from db and then

<a herf='' onclick='getRecords(1,10,0)'>1</a> 
<a herf='' onclick='getRecords(2,10,10)'>2</a> 
<a herf='' onclick='getRecords(3,10,20)'>3</a>

...

function getRecords(page,limit,offset)
{
$.ajax(){}
}

I want to do it dynamic with next and prev like pagination

My understanding is that you are able to hit the API and get the results you want and you are looking for a solution using JQuery to display the results on page click. Is this so? If yes see my example. — Steven Eckhoff
– Steven Eckhoff, Commented Aug 3, 2020 at 17:42
@Steven Eckhoff I have re-post the question. I am getting my results on page click as well. I am uanable to create pagination as I have aprox. 450000 records. How to create the pagination with next and previous button — Rajandeep Kaur
– Rajandeep Kaur, Commented Aug 3, 2020 at 17:47
@Steven Eckhoff Yes, first 10 records as I am sending limit and offset parameter. — Rajandeep Kaur
– Rajandeep Kaur, Commented Aug 3, 2020 at 17:55
Okay I updated my example. It shows you the basic mechanisms by which you could achieve what you are looking for. — Steven Eckhoff
– Steven Eckhoff, Commented Aug 3, 2020 at 18:09

Steven Eckhoff · Accepted Answer · 2020-08-18 15:38:08Z

This is the most straightforward example I could come up with.

Initially you would populate the results server side with an html template. Or you could have a script do it and populate them similar to how I am doing it in the button click callback.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery Pagination</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
    <a href="#" id="prev">prev</a>
    <span>
    </span>
    <a href="#" id="next">next</a>
</body>
<script
        src="https://code.jquery.com/jquery-3.5.1.js"
        integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
        crossorigin="anonymous"></script>
<script>
    let currentPage = 1
    let $searchList = $("body > ul")
    let $prevButton = $("#prev")
    let $nextButton = $("#next")
    let maxPages = 23
    let maxPageButtons = 5

    let pageButtonClick = function() {
        currentPage = parseInt($(this).text())
        update(currentPage)
        console.log(currentPage)
    }

    let update = function(currentPage) {
        $searchList.children().each(function() {
            $(this).text(currentPage)
        })

        let basePage = currentPage
        if (basePage + maxPageButtons > maxPages) {
            basePage = maxPages - maxPageButtons + 1
        }

        let basePageOffset = 0
        let $newPageButtons = $()
        while (basePageOffset < maxPageButtons) {
            $newPageButtons = $newPageButtons.add(`<a href="#">${basePage + basePageOffset}</a>`)
            basePageOffset++
        }

        $("span").children().remove()
        $("span").append($newPageButtons)

        $("span > a").on("click", pageButtonClick)

        // Get results and display them.
    }

    update(currentPage)

    $prevButton.on("click", function() {
        if (currentPage > 1) {
            currentPage--
            update(currentPage)
        }
    })

    $nextButton.on("click", function () {
        if (currentPage < maxPages) {
            currentPage++
            update(currentPage)
        }
    })
</script>
</html>

JSFiddle

If you want to put html in the list item then use the html() method.

I am checking the maxPage but it is not working in my code. How we can define the max page limit?

Vaibhav Mishra · Accepted Answer · 2020-08-03 17:14:34Z

0

It looks like the pagination plug-ins you are using are frontend facing. I would suggest to rewrite the querying of data in your backend in a way such that only the required data is sent to the frontend instead of all the records. You can use the limit(), for limit, and skip(), for offset, mongodb methods interfaces that your driver offers.

Check out this answer to understand how to do this for mongo-go-driver. If you are using any other driver, you can use an equivalent of what's being used in the mongo-go-driver.

answered Aug 3, 2020 at 17:14

Vaibhav Mishra

4651 gold badge3 silver badges10 bronze badges

2 Comments

Rajandeep Kaur Over a year ago

I am already using Find().skip().limit().All(&result) in golang. And My HTML code is like first table show first 10 rows from db and then <a herf='' onclick='getRecords(1,10,0)'>1</a> ... page=1,10 is limit and 0 is offset and next would be <a href='getRecords(2,10,10)'>2</a>. I want to do it dynamic with next and prev like pagination

Vaibhav Mishra Over a year ago

Please add these details to your original question.

Collectives™ on Stack Overflow

Pagination with JQuery on HTML Page

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related