Laravel JsGrid not loading all the data

[indecheojukwu]

I am using jsgrid to display my data in a table. Laravel is handling the retrieval of data in json format successfully but then in the table instead of getting 20 records as per my pagination needs I am getting only 6. The pagination css is also not working

<script>
$(function() {
    $("#jsGrid").jsGrid({
        width: "100%",
        height: "auto",

        inserting: false,
        editing: false,
        sorting: true,
        pageLoading: true,
        filtering: true,
        autoload: true,

        paging: true,
        pagerContainer: null,
        pageIndex: 1,
        pageSize: 20,
        pageButtonCount: 15,
        pagerFormat: "Pages: {first} {prev} {pages} {next} {last}    {pageIndex} of {pageCount}",
        pagePrevText: "Prev",
        pageNextText: "Next",
        pageFirstText: "First",
        pageLastText: "Last",
        pageNavigatorNextText: "...",
        pageNavigatorPrevText: "...",

        rowClick: function(args) {
            var $row = this.rowByItem(args.item),
                selectedRow = $("#jsGrid").find('tr.highlight');

            if (selectedRow.length) {
                selectedRow.toggleClass('highlight');
            }

            $row.toggleClass("highlight");
        },

        controller: {
            loadData: function(filter) {
                var deferred = $.Deferred();
                $.ajax({
                    type: "GET",
                    url: "{{ route('get_transactions') }}",
                    data: filter,
                    dataType: "json"
                }).done(function(response) {
                        console.log("Response Data:", response);
                    deferred.resolve({
                        data: response.data,
                        itemsCount: response.itemsCount
                    });
                }).fail(function(jqXHR, textStatus, errorThrown) {
                    console.error("Error:", textStatus, errorThrown);
                });
                return deferred.promise();
            }
        },

        fields: [
            {
                name: "rowIndex",
                title: "#",
                type: "number",
                width: 30,
                align: "center",
                filtering: false,
                itemTemplate: function(_, item) {
                    return $.inArray(item, $("#jsGrid").jsGrid("option", "data")) + 1;
                }
            },
            { name: "WAYBILL", type: "text", width: 80, validate: "required" },
            {
                name: "DATE",
                type: "text",
                width: 100,
                itemTemplate: function(value) {
                    var date = new Date(value);
                    return date.toLocaleDateString(); // or any other format you prefer
                }
            },
            { name: "DESTINATION", type: "text", width: 80, validate: "required" },
            { name: "SENDER", type: "text", width: 100, validate: "required" },
            { name: "SENDER_PHONE", type: "text", width: 100, validate: "required" },
            { name: "SENDING_TO", type: "text", width: 100, validate: "required" },
            { name: "RECEIVER_PHONE", type: "text", width: 100, validate: "required" },
            { name: "AMOUNT", type: "number", width: 50 },
{
type: "control",
                filtering: false,
                itemTemplate: function(value, item) {
                    return $("<a>").attr("href", "transactions/" + item.id)
                        .addClass("mdi mdi-eye-outline")
                        .css({"font-size": "15px"})
                        .html('<span class="sr-only"></span>');
                }
            }
        ]
    });
});
</script>