Show more button not showing exact solution

[SNow Learner41]

Hi all,

i have one requirement like when i am click show more button then next records will concat with previous records in the same page but it is redirecting next to page instead of concat in the same page can any one please help me to solve this problem.

HTML:

<div ng-if="showWidget == 'problem'">
<div>
<table class="table">
<thead>
<tr>
<th scope="col">Number</th>
<th scope="col">Caller</th>
<th scope="col">Category</th>
<th scope="col">Short Description</th>
<th scope="col">Assigned_To</th>
<th scope="col">State</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in c.data.incidentData">
<th scope="row">{{item.number}}</th>
<td>{{item.caller}}</td>
<td>{{item.category}}</td>
<td>{{item.shortDesc}}</td>
<td>{{item.assigned_to}}</td>
<td>{{item.state}}</td>
</tr>
</tbody>
</table>
<!-- SHOW MORE -->
<div class="show-more-section" ng-if="c.data.showMore">
<div class="text-a-c">{{c.data.show_msg}}</div>
<button class="m-t-xs btn btn-default btn-loadmore" ng-click="loadMore()">
Show More
</button>
</div>
</div>

Client:
api.controller = function ($scope, $timeout, $animate) {
var c = this;
c.data.items = c.data.incidentData;
c.maxsize=0;
$scope.loadMore = function () {

c.data.currentPage = c.data.currentPage*(parseInt(c.data.currentPage)+1);
c.maxsize=+5;
//c.data.action = "showMorebtn";
c.server.update().then(function (r) {
// Appending new data to the existing data
c.data.items = c.data.items.concat(r.data.incidentData);
c.data.showMore = r.data.showMore;
c.data.show_msg = r.data.show_msg;
c.data.action = undefined;
});
};
$scope.showWidget = "";
$rootScope.$on('showHideWidget', function(event, data) {
$timeout(function() {
$scope.showWidget = data;
});
});
}

Server:

(function () {
function getAllIncident(currentPage, maxSize) {
var incArr = [];
var incidentGR = new GlideRecord('incident');
incidentGR.addQuery('active', 'true');
incidentGR.chooseWindow((currentPage - 1) * maxSize, currentPage * maxSize);
incidentGR.query();
while (incidentGR.next()) {
var incidentObj = {};
incidentObj.number = incidentGR.getDisplayValue('number');
incidentObj.caller = incidentGR.getDisplayValue('caller_id');
incidentObj.category = incidentGR.getDisplayValue('category');
incidentObj.shortDesc = incidentGR.getDisplayValue('short_description');
incidentObj.assigned_to = incidentGR.getDisplayValue('assigned_to');
incidentObj.state = incidentGR.getDisplayValue('state');
incArr.push(incidentObj);
}
return incArr;
}

function getTotalRecord() {
var incidentGR = new GlideRecord('incident');
incidentGR.addQuery('active', 'true');
incidentGR.query();
return incidentGR.getRowCount();
}

data.numIncidents = getTotalRecord();
var diff = data.numIncidents - data.maxSize;
data.showMore = true;

if (!input) {
data.currentPage = 1;
data.maxSize = 5;
data.incidentData = getAllIncident(data.currentPage, data.maxSize);
data.show_msg = gs.getMessage(
"Showing more " + data.maxSize + " cards of " + " " + data.numIncidents
);
}

if (input) {
data.incidentData = getAllIncident(input.currentPage, input.maxSize);
data.show_msg = gs.getMessage(
"Showing more " +
input.maxSize * input.currentPage +
" cards of " +
" " +
data.numIncidents
);

diff = data.numIncidents - input.maxSize * input.currentPage;
data.difference = diff;
data.showMore = diff > 0;
}
})();

Output:

Thank you advance.

[Dnyaneshwaree]

Hello @SNow Learner41  ,

Please refer below article:
https://www.servicenow.com/community/now-platform-forum/show-more-button-does-not-work-as-my-expecti...

If my solution helps you any way then mark it as accepted and helpful.

Thank You!!

[SNow Learner41]

Hi @Dnyaneshwaree 

Thank you for your response, i was already refer that article and implemented this code. i want to say one thing my entire code is working properly but the contact is not working that is only one problem i am facing. i think i did very minor mistake but i am unable to find out that so can you please tell me where i did mistake.

[Dnyaneshwaree]

Hello @SNow Learner41 ,

Check This:

To ensure that your "Show More" button loads more records and appends them to the existing list instead of redirecting to the next page, you need to make sure the data binding and pagination logic are set correctly.

Here are the modifications needed in your client and server code:

Client-side Controller (JavaScript)

1. Fix the pagination logic in the loadMore function:
2. Ensure the c.data.items is used correctly in your HTML.

Here's the updated client-side code:

api.controller = function ($scope, $timeout, $animate) {
    var c = this;
    c.data.items = c.data.incidentData;
    c.maxsize = 5; // Set initial maxsize value
    c.currentPage = 1; // Set initial currentPage value

    $scope.loadMore = function () {
        c.currentPage += 1; // Increment the currentPage value
        c.server.update({
            currentPage: c.currentPage,
            maxSize: c.maxsize
        }).then(function (r) {
            // Appending new data to the existing data
            c.data.items = c.data.items.concat(r.data.incidentData);
            c.data.showMore = r.data.showMore;
            c.data.show_msg = r.data.show_msg;
            c.data.action = undefined;
        });
    };

    $scope.showWidget = "";
    $rootScope.$on('showHideWidget', function (event, data) {
        $timeout(function () {
            $scope.showWidget = data;
        });
    });
}

HTML

Ensure that your HTML correctly binds to c.data.items instead of c.data.incidentData.

<div ng-if="showWidget == 'problem'">
    <div>
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">Number</th>
                    <th scope="col">Caller</th>
                    <th scope="col">Category</th>
                    <th scope="col">Short Description</th>
                    <th scope="col">Assigned_To</th>
                    <th scope="col">State</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in c.data.items">
                    <th scope="row">{{item.number}}</th>
                    <td>{{item.caller}}</td>
                    <td>{{item.category}}</td>
                    <td>{{item.shortDesc}}</td>
                    <td>{{item.assigned_to}}</td>
                    <td>{{item.state}}</td>
                </tr>
            </tbody>
        </table>
        <!-- SHOW MORE -->
        <div class="show-more-section" ng-if="c.data.showMore">
            <div class="text-a-c">{{c.data.show_msg}}</div>
            <button class="m-t-xs btn btn-default btn-loadmore" ng-click="loadMore()">
                Show More
            </button>
        </div>
    </div>
</div>

Server-side Script

Ensure that the server-side script correctly handles pagination based on the currentPage and maxSize parameters.

(function () {
    function getAllIncident(currentPage, maxSize) {
        var incArr = [];
        var incidentGR = new GlideRecord('incident');
        incidentGR.addQuery('active', 'true');
        incidentGR.chooseWindow((currentPage - 1) * maxSize, currentPage * maxSize);
        incidentGR.query();
        while (incidentGR.next()) {
            var incidentObj = {};
            incidentObj.number = incidentGR.getDisplayValue('number');
            incidentObj.caller = incidentGR.getDisplayValue('caller_id');
            incidentObj.category = incidentGR.getDisplayValue('category');
            incidentObj.shortDesc = incidentGR.getDisplayValue('short_description');
            incidentObj.assigned_to = incidentGR.getDisplayValue('assigned_to');
            incidentObj.state = incidentGR.getDisplayValue('state');
            incArr.push(incidentObj);
        }
        return incArr;
    }

    function getTotalRecord() {
        var incidentGR = new GlideRecord('incident');
        incidentGR.addQuery('active', 'true');
        incidentGR.query();
        return incidentGR.getRowCount();
    }

    data.numIncidents = getTotalRecord();
    var diff = data.numIncidents - data.maxSize;
    data.showMore = true;

    if (!input) {
        data.currentPage = 1;
        data.maxSize = 5;
        data.incidentData = getAllIncident(data.currentPage, data.maxSize);
        data.show_msg = gs.getMessage(
            "Showing more " + data.maxSize + " cards of " + " " + data.numIncidents
        );
    }

    if (input) {
        data.incidentData = getAllIncident(input.currentPage, input.maxSize);
        data.show_msg = gs.getMessage(
            "Showing more " +
            input.maxSize * input.currentPage +
            " cards of " +
            " " +
            data.numIncidents
        );

        diff = data.numIncidents - input.maxSize * input.currentPage;
        data.difference = diff;
        data.showMore = diff > 0;
    }
})();

With these changes, the "Show More" button should correctly append the next set of records to the existing table without redirecting to a new page.

If my solution helps you any way then mark it as accepted and helpful.

Thank You!!

[SNow Learner41]

Hi @Dnyaneshwaree 

Thank you very much for your efforts and response. i have copied your modified code into my widget but when i am clicking show more button it is not working it means clicking is not working.