Пагинация с JQuery на HTML страницу - PullRequest
Новая
       11

Пагинация с JQuery на HTML страницу

0 голосов
/ 03 августа 2020

Я использую Go для написания бэкэнда с MongoDB. Я использую JQuery AJAX для отправки запросов к API.

У меня есть API, который принимает параметры (страница, ограничение, смещение) и возвращает все записи в качестве ответа. Я хочу выполнить разбиение на страницы и отправить эти параметры на page Number button click. У меня около 450 000 записей в коллекции.

Я искал несколько примеров, используя плагин разбиения на страницы, но насколько я понял, он сначала загрузит все записи из БД, а затем выполнит разбиение на страницы, но я не хочу загружать все записи потому что я уже отправляю параметры (page, limit, offset для ограничения записей. Как мы можем это сделать, используя HTML и JQuery? 

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

Я использую Find (). skip () .limit (). All (& result) в golang. И мой код HTML похож на первую таблицу, показывающую первые 10 строк из db, а затем 

<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(){}
}

Я хочу сделать это динамически c со следующим и предыдущим, например, с разбивкой на страницы

Ответы [ 2 ]

1 голос
/ 03 августа 2020

Это самый простой пример, который я мог придумать.

Первоначально вы должны заполнить серверную часть результатов шаблоном html. Или у вас может быть сценарий, который сделает это и заполнит их так же, как я это делаю в обратном вызове нажатия кнопки. 

<!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

Если вы хотите поместите html в элемент списка, затем используйте метод html ().

0 голосов
/ 03 августа 2020

Похоже, плагины разбиения на страницы, которые вы используете, ориентированы на интерфейс. Я бы посоветовал переписать запросы данных в вашем бэкэнде таким образом, чтобы во внешний интерфейс отправлялись только необходимые данные вместо всех записей. Вы можете использовать limit() для limit и skip() для offset , интерфейсы методов mongodb, которые предлагает ваш драйвер.

Проверить этот ответ , чтобы понять, как это сделать для mon go - go -driver . Если вы используете какой-либо другой драйвер, вы можете использовать эквивалент того, что используется в mon go - go -driver.

...