(javascript) Как создать разбиение на страницы?

Question

Я хочу использовать разбиение на страницы div, но результат не может быть успешно разбит на страницы. Как внести изменения? Я долго думал об этом, но не смог. Мне нужно использовать div для моего контента. Я попробовал несколько методов, но ни один из них не имеет эффекта пагинации. Мне нужно его использовать. Это содержимое.

<div id =" Company '+ i +' "class =" btn btn-success btn-lg "> </ div>

Как мне это сделать? Большое вам спасибо!

Код

<style>
    fieldset.scheduler-border {
        border: solid 3px #000000 !important;
        padding: 10px 10px 10px 10px;
        border-bottom: none;
    }

    legend.scheduler-border {
        width: auto !important;
        border: none;
        font-size: 36px;
    }  
    .item-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 30px;
        padding: 0 30px 15px;
    }
        .item-container .item:not(:first-child) {
        }
</style>

<form>
    <fieldset class="scheduler-border">
        <legend class="scheduler-border"> Test </legend>       
        <div id="content" class="item-container"  style="width:605px;height:400px">           
        </div>
        <div id="pages" style="font-size:12px; width:605px; line-height:40px; text-align:center;">
            PageNumber
        </div>
    </fieldset>
</form>

<script>
    var jsonData = [
        {
            "CoompanyId": "244",
            "CoompanyName": "Coompany1",
            "status": "1"
        },
        {
            "CoompanyId": "123",
            "CoompanyName": "Coompany2",
            "status": "1"
        },
        {
            "CoompanyId": "345",
            "CoompanyName": "Coompany3",
            "status": "0"
        }
    ];
     function CreateObject() {       
                for (i in jsonData) {
                    for (k = 0; k < 99; k++) {
                        $("#content").append('<div class="item"><div id="Company' + i + '" class="btn btn-success btn-lg">' + jsonData[i].CoompanyName + '</div> </div>');
                    }
                }          
    }
    getApi()
     function getApi() {
        setTimeout(getApi, 1 * 1000);
                for (i in jsonData) {
                    data = jsonData[i];
                    console.log("data.CoompanyName", jsonData[i].CoompanyName);
                    console.log("data.status", jsonData[i].status);
                    if (jsonData[i].status == "1") {
                        $('#Company' + i).removeClass("btn btn-danger btn-lg");
                        $('#Company' + i).addClass("btn btn-success btn-lg");
                    } else {
                        $('#Company' + i).removeClass("btn btn-success btn-lg");
                        $('#Company' + i).addClass("btn btn-danger btn-lg");
                    }
                }                 
    }
var obj = document.getElementById("content");  
var pages = document.getElementById("pages");       
var pgindex=1;    

window.onload = function () {
CreateObject()
var allpages = Math.ceil(parseInt(obj.scrollHeight)/parseInt(obj. offsetHeight));
pages.innerHTML = "<b>"+allpages+"pages</b> ";     
for (var i=1;i<=allpages;i++){
pages.innerHTML += "<a href=\"javascript:showPage('"+i+"');\">"+i+"page</a> ";
    }
pages.innerHTML += " <a href=\"javascript:gotopage('-1');\">Previous</a>  <a href=\"javascript:gotopage('1');\">Next page</a>"
    };

function gotopage(value){
try{
value=="-1"?showPage(pgindex-1):showPage(pgindex+1);
}catch(e){  
 }
}
function showPage(pageINdex)
{     
 obj.scrollTop=(pageINdex-1)*parseInt(obj.offsetHeight);                                                                  
 pgindex=pageINdex;
}
</script>

Большое вам спасибо!