Как создать нумерацию страниц для моего приложения API с помощью jQuery

Question

У меня проблемы с тем, как реализовать динамическое разбиение на страницы. У меня есть ссылки на работу, но я не могу понять, как получить результаты, которые приходят из моего API, для отображения 10 на страницу. Я продолжаю получать все свои данные API. Если вы, ребята, можете помочь мне с этим, я буду очень признателен.

Ниже приведен код jQuery ...

$(document).ready(function () {

    $.ajax({
        type: 'GET',
        url: 'API CALL THAT PULLS HUNDREDS OF DATA',
        crossDomain: true,
        dataType: 'json',
        success: function (data) {

            var orders = data['orders'];
            //console.log(data);

            /*=============================START PAGINATION CODE===========================*/

            var numberOfItems = orders.length; // Get the total number of orders

            var limitPerPage = 10;


            $("#results:gt("+ (limitPerPage - 1) +")").hide();

            var totalPages = Math.round(numberOfItems / limitPerPage);

            $('.pagination').append("<li class='current-page active'><a href='javascript:void(0)'>" + 1 + "</a></li>");

            for(var i = 2; i <= totalPages; i++){

                $(".pagination").append("<li class='current-page'><a href='javascript:void(0)'>" + i + "</a></li>");

            }
            $(".pagination").append("<li class='next-page'><a href='javascript:void(0)' aria-label='Next'><span aria-hidden='true'>&raquo;</span></a></li>");


            $(".pagination li.current-page").on("click", function(){

                if($(this).hasClass("active")){
                    return false;
                } else {
                    var currentPage = $(this).index();
                    $(".pagination li").removeClass("active");
                    $(this).addClass("active");
                    $(".list-group").hide();
                    alert(currentPage);
                    var grandTotal = limitPerPage * currentPage;

                    for(var i = grandTotal - limitPerPage; i < grandTotal; i++){
                        $(".list-group:eq(" + i + ")").show();
                    }

                }

            });

                $(".next-page").on("click", function(){
                    var currentPage = $(".pagination li.active").index();
                    if(currentPage === totalPages){
                        return false;
                    } else {
                        currentPage++;
                        $(".pagination li").removeClass("active");
                        $(".list-group").hide();

                        var grandTotal = limitPerPage * currentPage;

                    for(var i = grandTotal - limitPerPage; i < grandTotal; i++){
                        $(".list-group:eq(" + i + ")").show();
                    }
                    $(".pagination li.current-page:eq(" + (currentPage - 1) + ")").addClass("active");  
                    }
                });

                $(".previous-page").on("click", function(){
                    var currentPage = $(".pagination li.active").index();
                    if(currentPage === 1){
                        return false;
                    } else {
                        currentPage--;
                        $(".pagination li").removeClass("active");
                        $(".list-group").hide();

                        var grandTotal = limitPerPage * currentPage;

                    for(var i = grandTotal - limitPerPage; i < grandTotal; i++){
                        $(".list-group:eq(" + i + ")").show();
                    }
                    $(".pagination li.current-page:eq(" + (currentPage - 1) + ")").addClass("active");  
                    }
                });

            /*=============================END PAGINATION CODE===========================*/

            for(var i = 0; i <= orders.length; i++){
                //console.log(orders[i]);
                var name = orders[i]['shipTo']['name'];
                var orderId = orders[i]['orderNumber'];
                var item = orders[i]['items'][0]['name'];
                var weight_value = orders[i]['weight']['value']; 
                $('#results').append('<p>', 'Name: ' + name + '<br />' + ' Order ID: ' + orderId +'<br /><br /></p>');

                //console.log(item);
            }





        }
    });


});// End document ready function

Ниже приведен HTML-код ...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My API App</title>
    <script src="./jquery-1.11.0.min.js"></script>
    <script src="./pagination.js"></script>
    <script src="api.js"></script>

    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>


<div id="results"></div><!--RESULT WILL BE DISPLAYED HERE FROM api.js file-->

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="previous-page">
      <a href="javascript:void(0)" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
  </ul>
</nav>

</body>
</html>