How to implement pagination in custom widget?

[greenuser]

Hi,

I'm trying to create a custom widget to show data from custom table in tabular form on service portal. I'm able to show data on portal but couldn't implement pagination.

Please suggest to implement pagination on custom widget to manage data.

Thanks in advance.

Regards

Arun

[SanjivMeher]

Did you try using the Data Table from Instance Definition widget. It will give you the same result with the record list+ pagination.

If you dont want to use the OOB widget, you can copy the code used in widget with ID 'widget-data-table'.

[greenuser]

Hi Sanjiv,

Thank you for your reply.

I tried but no luck,

Below are my code...what should I do for pagination.

HTML:

<div ng-app="myApp">
<pre>
Sort by : {{orderField}}
</pre>
<div>

<label>Search</label><input type="text" ng-model="searchText"/>

<select ng-model="pageSize" id="pageSize" class="form-control">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
Previous
</button>
{{currentPage+1}}/{{numberOfPages()}}
<!-- {{currentPage}}/ {{pageSize}}-->
<button ng-disabled="currentPage >= getData().length/pageSize - 1" ng-click="currentPage=currentPage+1">
Next
</button>

</div>
<table>
<tr>
<th>
<button ng-click = "changeSort('number')">
Number
</button>
</th>
<th>
<button ng-click="changeSort('short_description')">
Short Description
</button>
</th>
<th>
<button ng-click="changeSort('sys_updated_on')">
Updated
</button>
</th>
</tr>
<tr ng-repeat="incident in data.incidents | orderBy:orderField | filter:searchText | limitTo:pageSize">
<td>
{{incident.number}}
</td>
<td>
{{incident.short_description}}
</td>
<td>
{{incident.sys_updated_on}}
</td>
</tr>

</table>
</div>

CSS:

table, th, td {
border: 1px solid black;
}

CLIENT SCRIPT:

function($scope){
var c = this;
$scope.currentPage = 0;
$scope.pageSize = 10;
$scope.searchText='';
$scope.getData = function () {

}

}

SERVER SCRIPT:

(function() {
data.incidents = [];
var gr = new GlideRecord('incident');
gr.addActiveQuery();
gr.orderBy('sys_updated_on');
gr.query();
while(gr.next()){
var incident = {};
incident.number = gr.getDisplayValue('number');
incident.short_description = gr.getDisplayValue('short_descriptiion');
incident.sys_id = gr.getUniqueValue();
incident.sys_updated_on = gr.getValue('sys_updated_on');
data.incidents.push(incident);
}

})();

Thank in advance,

Regards

Arun

[SanjivMeher]

You also need changes to the server script alongwith HTML. Look at the server script the way it has queried record in 'widget-data-table'

[sethhumphrey]

Here's how we did it: https://community.servicenow.com/community?id=community_question&sys_id=bdb9f178db129340c310fb651f96...

Hope it helps,

Seth