My requests and My Open incidents Widgets should have pagination.

[Sandeep Bharate]

In the service portal home page , My requests and My Open incidents Widgets should have pagination instead row count beside that there should be a selection with choices 5,10,15,20,25,30,35,40,45,50. When the user selects 5 it should display 5 records in the widget. When 10 , should show 10 records. Same for the remaining. By default it should be 5 for the both My requests and My Open incidents Widgets.

How to achieve this?

[Raju Koyagura]

Have you tried this https://community.servicenow.com/community?id=community_blog&sys_id=4cac2225dbd0dbc01dcaf3231f96198b

[sethhumphrey]

We wanted this too and decided just paging through at the options maximum entries size was the way to go.  Here's the result:

Here's the approach we used:

HTML

  <div class="panel-footer" ng-if="c.options.maximum_entries && c.data.count > c.options.maximum_entries">
    
    <div class="h4 number-show-label panel-title" style="line-height: 20px">
      ${Showing items {{c.start + 1}} - {{c.end}} of {{c.data.count}}}
    </div>
  
    <nav id="prev-tab-nav" class="pull-right" aria-label="Previous requests and tasks page navigation">
      <ul class="pagination">
        <li>
          <a href="#" aria-label="Previous" ng-disabled="c.currentPage == 1" ng-click="c.setCurrentPage(c.currentPage -1)">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <li>
          <a href="#" aria-label="Next" id="prev-tab-next" ng-disabled="c.currentPage == c.numPages" ng-click="c.setCurrentPage(c.currentPage + 1)">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>
    
    
    <div class="clearfix"></div>
  </div>

CSS

#prev-tab-nav > ul {
  margin:0;
}

CLIENT SCRIPT

	this.currentPageItems = c.data.list.slice(0, c.options.maximum_entries)
	this.currentPage = 1;
	this.numPages = Math.ceil(c.data.list.length / c.options.maximum_entries);
	this.start = 0;
	this.end = this.start + c.options.maximum_entries < c.data.list.length ? this.start + c.options.maximum_entries : c.data.list.length - 1;
	
	this.setCurrentPage = function(pageNum) {
		if (pageNum < 1 || pageNum > this.numPages) return;
		this.start = (pageNum - 1) * c.options.maximum_entries;
		this.end = this.start + 5 < c.data.list.length - 1 ? this.start + c.options.maximum_entries : c.data.list.length;
		this.currentPageItems = c.data.list.slice(this.start, this.end);
		this.currentPage = pageNum;
	};

I hope this helps you out.

Seth

[Anis]

This works great. Saved time. Thanks

[fery_susanto992]

Hi sethhumphrey,, 

I have tried it but failed, for the button next and previous it must be linked to where like "a href =" ...... "?

Thank you