How can I change a client-side pagination of divs to a server-side pagination?

Question

I currently use client-side pagination of divs as the following image: The divs are loaded by a SQL-Query (oracle). It builds the divs inside a "while" cursor. Each rectangle is one row of my SQL-Query. It loads a lot of rows (more than 4064) and I would like to change it to server-side pagination, where it loads only 20 rows/divs each time that I go to a page or search it in the search bar.

That's the JS code in my PHP file.

       $(function(){
            var keywordInput = document.querySelector("input[name='keyword']");

            function performMark() {
                $(".content.panel").show();

                // Read the keyword
                var keyword = keywordInput.value;
                $('.content').removeClass('hidden');                 
                $('.content:not(:contains(' + keyword + '))').addClass('hidden');

                /* Tentar refazer paginação */          
                var items = $(".content.panel").not(".hidden");

                var numItems = items.length;
                var perPage = 16;

                // Only show the first 2 (or first `per_page`) items initially.
                items.slice(perPage).hide();   

                $("#pagination").pagination({
                    items: numItems,
                    itemsOnPage: perPage,
                    cssStyle: "light-theme",

                    // This is the actual page changing functionality.
                    onPageClick: function(pageNumber) {
                        // We need to show and hide `tr`s appropriately.
                        var showFrom = perPage * (pageNumber - 1);
                        var showTo = showFrom + perPage;

                        // We'll first hide everything...
                        items.hide()
                            // ... and then only show the appropriate rows.
                            .slice(showFrom, showTo).show();
                    }
                });                
            };

            // Listen to input and option changes            
            keywordInput.addEventListener("input", performMark);                      
        }); 
        $(function() {
            var items = $(".content.panel").not(".hidden");

            var numItems = items.length;
            var perPage = 16;

            // Only show the first 2 (or first `per_page`) items initially.
            items.show();
            items.slice(perPage).hide();

            // Now setup the pagination using the `.pagination-page` div.
            $("#pagination").pagination({
                items: numItems,
                itemsOnPage: perPage,
                cssStyle: "light-theme",

                // This is the actual page changing functionality.
                onPageClick: function(pageNumber) {
                    // We need to show and hide `tr`s appropriately.
                    var showFrom = perPage * (pageNumber - 1);
                    var showTo = showFrom + perPage;

                    // We'll first hide everything...
                    items.hide()
                        // ... and then only show the appropriate rows.
                        .slice(showFrom, showTo).show();
                }
            });



            // EDIT: Let's cover URL fragments (i.e. #page-3 in the URL).
            // More thoroughly explained (including the regular expression) in: 
            // https://github.com/bilalakil/bin/tree/master/simplepagination/page-fragment/index.html

            // We'll create a function to check the URL fragment
            // and trigger a change of page accordingly.
            function checkFragment() {
                // If there's no hash, treat it like page 1.
                var hash = window.location.hash || "#page-1";

                // We'll use a regular expression to check the hash string.
                hash = hash.match(/^#page-(\d+)$/);

                if(hash) {
                    // The `selectPage` function is described in the documentation.
                    // We've captured the page number in a regex group: `(\d+)`.
                    $("#pagination").pagination("selectPage", parseInt(hash[1]));
                }
            };

            // We'll call this function whenever back/forward is pressed...
            $(window).bind("popstate", checkFragment);

            // ... and we'll also call it when the page has loaded
            // (which is right now).
            checkFragment();
        });

The input "keyword" is the search input.

<input name="keyword" type="text" class="form-control" placeholder="Pesquisar" aria-describedby="sizing-addon1" onload="performMark()">

If anyone is interested in the code, here it is: https://gist.github.com/rodrigokiller/2396a0eb7a8787613120d7a3bade9a4c

The pagination plugin that I'm using: http://flaviusmatis.github.io/simplePagination.js

EDIT

I made a JSFiddle with an example: https://jsfiddle.net/rodrigokiller/n85w0rfh/11/

EDIT 2

I also have build a dbfiddle: https://dbfiddle.uk/?rdbms=oracle_11.2&fiddle=4d6fcac6204e99e16d5292a14b293f3a