apl.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>pagination example</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.4/pagination.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.4/pagination.css"/>
</head>
<body>

<div>
    <section>
        <div id="data-container"></div>
        <div id="pagination"></div>
    </section>
</div>

<script>
    let  arr  = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

    $(function () {
        let container = $('#pagination');
        container.pagination({
                callback: function (arr, pagination) {
                var dataHtml = '<ul>';

                $.each(arr, function (arr, item) {
                    dataHtml += '<li>' + item.name + '</li>';
                });

                dataHtml += '</ul>';

                $("#data-container").html(dataHtml);
            }
        })
    })
</script>
</body>
</html> 