Show More Button does not work as my expection

[Hoa Do]

Hello everyone, I am implementing the function of "Show More" button. However, it does not work as I expected. There are two total issues.

1. I cannot show all record. For example, when the number of record in the table is 42, it cannot show the left record (42/51)  

2. When the table shows all the record , how can I hide the "Show More" button

Here are some of my code:

 HTML Template:

<div>
  <table class="table" >
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Number</th>
        <th scope="col">Caller</th>
        <th scope="col">Category</th>
        <th scope="col">Short Description</th>
        <th scope="col">State</th>
        <th scope="col">Created</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in c.data.incidentData"> 
        <!-- <tr ng-repeat="item in data.incidentArr"> -->
        <th scope="row">{{item.number}}</th>
        <td>{{item.caller}}</td>
        <td>{{item.category}}</td>
        <td>{{item.shortDesc}}</td>
        <td>{{item.dateCreated}}</td>
        <td>{{item.state}}</td>
      </tr>
    </tbody>
  </table>
  <!-- SHOW MORE -->
  <div class="show-more-section" ng-class="{'none': (c.data.incidentData == c.data.incidentData[0].numIncRecord)}">
    <div class="text-a-c">{{data.show_msg}}</div>
    <button
            class="m-t-xs btn btn-default btn-loadmore"
            ng-click="loadMore()"
            >
      ${Show More}
    </button> 
  </div>
</div>

Client Script:

api.controller = function ($scope, $timeout, $animate) {
	var c = this;
	c.data.items = c.data.incidentData;
	
	$scope.filteredData = c.data.incidentData.splice(
		c.data.limit,
		c.data.incidentData.length - c.data.limit
	);

	var prevIndex = 1;
	// /** SHOW MORE FUNCTIONS */
	$scope.loadMore = function () {
		prevIndex++;

		var nextIndex = c.data.limit * prevIndex;
		c.data.incidentData = $scope.filteredData.slice(0, nextIndex);
		console.log(c.data.incidentData);
		console.log(c.data.incidentData[0].numIncRecord);
	};
};

Server Script:

(function () {
	var incidentUtils = new Incident_Utils();
	data.incidentData = incidentUtils.getAllIncident();
	data.limit = parseInt(options.data_limit) || 5;
	data.show_msg = gs.getMessage("Showing more " + data.limit + " cards of " + " " + data.incidentData[0].numIncRecord);
})();

Script Include:

var Incident_Utils  = Class.create();
Incident_Utils .prototype = {
	initialize: function() {
	},

	getAllIncident: function() {
		var incArr = []; 
		var totalCurrentRecords = {};
		var incidentGR = new GlideRecord("incident");
		incidentGR.addQuery("active", "true");
		incidentGR.query();
		totalCurrentRecords.numIncRecord = incidentGR.getRowCount();
		incArr.push(totalCurrentRecords);
		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.dateCreated = incidentGR.getDisplayValue("sys_created_on");
			incidentObj.state = incidentGR.getDisplayValue("state");
			incArr.push(incidentObj);
		}
		return incArr;
	},

	type: 'Incident_Utils '
};

Thank you so much!

[Shakeel Shaik]

Hi @Hoa Do 

Once check the OOB widget which has a Show more button to get a better understanding of where you went wrong.

Please check and let us know.

Thanks 🙂

Shakeel Shaik.

[Hoa Do · Accepted solution]

Hi @Shakeel Shaik - Smudge  

Thank you for your suggestion. I know how to solve this issue. I have made the OOB widget named "KB Category Page" which has "Show more" button function. Here are some lines of my code that helps it work:

  HTML Template:

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

Client Script:

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

	/** SHOW MORE FUNCTIONS */
	$scope.loadMore = function () {
		c.data.new_limit = c.data.limit + (parseInt(c.options.data_limit) || 10);
		c.server.update();
		console.log('Limit: ' + c.data.limit);
		console.log('Current Length: ' + c.data.incidentData.length);
		console.log('diff: ' + c.data.difference);
		
};

Server Script:

(function () {
	var incidentUtils = new Incident_Utils();
	data.incidentData = incidentUtils.getAllIncident();
	data.limit = parseInt(options.data_limit) || 10;
	data.show_msg = gs.getMessage("Showing more " + data.limit + " cards of " + " " + data.incidentData[0].numIncRecord);
	if (input && input.new_limit)
    data.limit = input.new_limit;

	var diff = data.incidentData.length - data.limit;
	data.difference = diff;
	if (diff <= 0) {
		data.showMore = false;
	} else {
	  data.incidentData.splice(data.limit);
		data.showMore = true;
	}
})();