{"id":1429,"date":"2017-12-20T17:41:34","date_gmt":"2017-12-20T09:41:34","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=1429"},"modified":"2024-10-23T14:20:54","modified_gmt":"2024-10-23T06:20:54","slug":"paging-control","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/paging-control\/","title":{"rendered":"Paging Control"},"content":{"rendered":"\n<p class=\"left-bar\">This article applies to versions 4.4 and later of IFS OI Explorer. For more, see <a href=\"#Release_History\">Release History<\/a>.<\/p>\n<h2 class=\"page-subheading\">Overview<\/h2>\n<p class=\"note\">Note: For this component to work with a dataset, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-server\/connecting-your-data\/creating-a-dataset-datasource\/how-to-write-a-dataset-query\/how-to-write-a-paged-query\/\">paging must be enabled<\/a> on the dataset.\u00a0<\/p>\n<p class=\"intro-text\">The Paging Control allows page designers to split up large amounts of tabular data into smaller chunks, or pages, to make it easier to display many rows of data in a small space. This allows\u00a0the user to move through those pages to view the data in a table.\u00a0<\/p>\n<p class=\"intro-text\">The following screenshot shows a Paging Control being configured:<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-config.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15412 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-config.png\" alt=\"Paging Control 4.4\" width=\"778\" height=\"311\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-config.png 778w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-config-768x307.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-config-150x60.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-config-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-config-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-config-48x19.png 48w\" sizes=\"auto, (max-width: 778px) 100vw, 778px\" \/><\/a><\/p>\n<table>\n<tbody>\n<tr>\n<td><strong>Page Number<\/strong>:<\/td>\n<td>The number that is published when the user clicks through the page control. This is effectively the page of data that the user is viewing. This variable\u00a0is a parameter of the paging-enabled dataset.<\/td>\n<\/tr>\n<tr>\n<td><strong>Page Size<\/strong>:<\/td>\n<td>The\u00a0number of rows of data to display in the table.\u00a0This variable\u00a0is a parameter of the paging-enabled dataset.<\/td>\n<\/tr>\n<tr>\n<td><strong>Total Record Count<\/strong>:<\/td>\n<td>The total number of records in the dataset, rounded up. This is an attribute of the paging-enabled dataset.<\/td>\n<\/tr>\n<tr>\n<td><strong>Style<\/strong>:<\/td>\n<td>The style you want to apply to the Paging Control component. If you are a Style Administrator, you can add a new Paging Control style.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"left-bar-p2blue\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/using-the-page-controls\/using-data-tables\/\">Using Data Tables<\/a> in display mode, Adding a <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/styling-tables\/\">Paging Control style<\/a><\/p>\n<hr \/>\n<h2 id=\"About_Paged_Datasets\" class=\"page-subheading\">About Paged Datasets<\/h2>\n<p class=\"intro-text\">The Paging Control will only work on datasets that have been enabled for paging. This is done by modifying the dataset query in IFS OI Server. When a dataset is paging enabled, the configuration panel for a Data Table will display additional parameters. These are:<\/p>\n<div>\n<table>\n<tbody>\n<tr>\n<td width=\"160\"><strong>Total Row\u00a0Count<\/strong>:<\/td>\n<td>The total number of records in the dataset, rounded up. This is always a variable (totalRowCount) that is published by the paging-enabled dataset.\u00a0<\/td>\n<\/tr>\n<tr>\n<td><strong>Enable Server Paging<\/strong>:<\/td>\n<td>Select this check box to indicate that you want to take advantage of dataset paging.<\/td>\n<\/tr>\n<tr>\n<td><strong>Page Number<\/strong>:<\/td>\n<td>The page number to display when the display is first opened.\u00a0<\/td>\n<\/tr>\n<tr>\n<td><strong>Page Size<\/strong>:<\/td>\n<td>The\u00a0number of rows of data to display in the table.\u00a0<\/td>\n<\/tr>\n<tr>\n<td><strong>SortBy<\/strong>:<\/td>\n<td>\n<p>The\u00a0name of the column in the dataset by which to sort the table. Columns containing text will sort alphabetically, those containing numbers will sort numerically, and those containing dates will sort chronologically. You can also specify whether you want to sort the column in ascending or descending order. Here are some examples:<\/p>\n<ul>\n<li><em><strong>Entity asc<\/strong><\/em><br \/>\nSort by the Entity column in ascending order<\/li>\n<li><strong><em>DowntimeReason desc<\/em><\/strong><br \/>\nSort by the DowntimeReason column in descending order<\/li>\n<li><em><strong>Entity asc, DowntimeReason desc<\/strong><\/em><br \/>\nSort first by the Entity column in ascending order, and then by the DowntimeReason column in descending order.<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-server\/connecting-your-data\/creating-a-dataset-datasource\/how-to-write-a-dataset-query\/how-to-write-a-paged-query\/\">How to Write a Paged Query<\/a><\/p>\n<\/div>\n<hr \/>\n<h2 class=\"page-subheading\"><span id=\"Tutorial\">Tutorial:\u00a0Displaying a Paging Control for a Large Dataset\u00a0Table\u00a0<\/span><\/h2>\n<p class=\"note\">If you're unfamiliar with the process of building pages, read the article\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/building-an-explorer-page\/\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"false\" data-slimstat-async=\"false\">Building an Explorer Page<\/a>.<\/p>\n<p class=\"intro-text\">In this tutorial, we\u2019ll look at adding a Paging Control component that will display pages of downtime information\u00a0in a data table.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15423 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut.png\" alt=\"Paging 4.4\" width=\"626\" height=\"487\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut.png 626w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-150x117.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-36x28.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-48x37.png 48w\" sizes=\"auto, (max-width: 626px) 100vw, 626px\" \/><\/a><\/p>\n<p class=\"intro-text\">Let\u2019s go through this process, step-by-step.<\/p>\n<p class=\"left-bar\"><strong>Note<\/strong>: This configuration uses the <em>Sample Data <\/em>table\u00a0and datasets that can be optionally made available\u00a0during initial installation and setup. If you don't have access to this data, you will need to adjust the configuration to suit your data at your site.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Prepare a Studio Page<\/strong><\/p>\n<p class=\"intro-text\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14281\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage.png\" sizes=\"auto, (max-width: 438px) 100vw, 438px\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-400x100.png 400w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-250x62.png 250w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-36x9.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-48x12.png 48w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage.png 438w\" alt=\"New Page button on ribbon\" width=\"438\" height=\"109\" \/><\/p>\n<p class=\"intro-text\">Before you start, click the <strong>New Page<\/strong>\u00a0button on the Home tab of the ribbon. Choose the Grid layout.<\/p>\n<p class=\"intro-text\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14282\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/gridlayoutchoose.png\" sizes=\"auto, (max-width: 863px) 100vw, 863px\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/gridlayoutchoose-150x93.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/gridlayoutchoose-400x248.png 400w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/gridlayoutchoose-768x475.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/gridlayoutchoose-800x495.png 800w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/gridlayoutchoose-242x150.png 242w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/gridlayoutchoose.png 863w\" alt=\"Grid Layout 4.4\" width=\"863\" height=\"534\" \/><\/p>\n<ul class=\"intro-text\">\n<li>For this exercise, we'll keep the 4 grid cells.<\/li>\n<li>Assign the first row a height of 450.<\/li>\n<li>Assign the second row a height of 50.<\/li>\n<\/ul>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"false\" data-slimstat-async=\"false\">Grid Layout tutorial<\/a><\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<\/div>\n<div>\n<p class=\"intro-text\"><strong>Step 2.\u00a0\u00a0Add the Paging Control\u00a0component to the page<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-2.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15425 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-2.png\" alt=\"Paging 4.4\" width=\"1276\" height=\"537\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-2.png 1276w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-2-768x323.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-2-150x63.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-2-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-2-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-2-48x20.png 48w\" sizes=\"auto, (max-width: 1276px) 100vw, 1276px\" \/><\/a><\/p>\n<p class=\"intro-text\">Drag and drop the Paging Control\u00a0component\u00a0onto a grid cell. The Paging Control is in the Display <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/display.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1844\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/display.png\" alt=\"Display group icon\" width=\"22\" height=\"13\" \/><\/a>\u00a0group.<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 3. Configure the Paging Control component<\/strong><\/p>\n<\/div>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-3a.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15432 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-3a.png\" alt=\"Paging 4.4\" width=\"804\" height=\"336\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-3a.png 804w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-3a-768x321.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-3a-150x63.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-3a-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-3a-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-3a-48x20.png 48w\" sizes=\"auto, (max-width: 804px) 100vw, 804px\" \/><\/a><\/p>\n<p class=\"intro-text\">Configuring the Paging Control consists of assigning variables to each field.\u00a0<\/p>\n<ul class=\"intro-text\">\n<li><strong>Page Number<\/strong>:\u00a0pageNumber<\/li>\n<li><strong>Page Size<\/strong>: pageSize<\/li>\n<li><strong>Total Record Count<\/strong>: totalRowCount<br \/>\n<em>Note: totalRowCount is a special variable that is automatically published by a dataset, so you should not rename this to something else.<\/em><\/li>\n<\/ul>\n<p class=\"intro-text\">We will add\u00a0defaults for these later in this tutorial.<\/p>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-primers\/variables\/\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"false\" data-slimstat-async=\"false\">Variables<\/a><\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<div>\n<p class=\"intro-text\"><strong>Step 4. Add and configure\u00a0a Data Table<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-4.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15434 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-4.png\" alt=\"Paging 4.4\" width=\"1416\" height=\"693\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-4.png 1416w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-4-768x376.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-4-150x73.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-4-1280x626.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-4-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-4-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-4-48x23.png 48w\" sizes=\"auto, (max-width: 1416px) 100vw, 1416px\" \/><\/a><\/p>\n<p class=\"intro-text\">The Paging Control on its own doesn't do anything, it's designed to be used with a Data Table. Drag and drop a Data Table\u00a0component onto the canvas, and configure it as follows.<\/p>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/\">Data Selector<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/data-table\/\">Data Table tutorial<\/a><\/p>\n<\/div>\n<p class=\"intro-text\"><strong>Configuring the Data<\/strong>:\u00a0<\/p>\n<ul class=\"intro-text\">\n<li>Open the <strong>Data<\/strong>\u00a0Data Selector by clicking on the field. You will notice that the Dataset <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14669\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/datasetquerydataicon.png\" alt=\"Dataset icon\" width=\"16\" height=\"13\" \/>\u00a0tab is automatically selected. Staying on that tab, fill in the fields as follows:\n<ul class=\"intro-text\">\n<li><strong>Dataset Query<\/strong>:\u00a0MiningDowntimePaged<em>\u00a0<br \/>\n<\/em><\/li>\n<li><strong>EndDate<\/strong>: (Variable) endTime<\/li>\n<li><strong>Sortby<\/strong>: (leave blank)<\/li>\n<li><strong>StartDate<\/strong>: (Variable) startTime<\/li>\n<li><strong>EnablePaging<\/strong>: <em>select the check box<br \/>\nNote: This check box only appears on datasets that are enabled for paging. If the check box is not present, your data cannot be paged. You will first need to modify the dataset appropriately in IFS OI Server.<\/em><br \/>\n\u00a0<\/li>\n<li><strong>PageNumber<\/strong>: (Variable) pageNumber<\/li>\n<li><strong>PageSize<\/strong>: (Variable) pageSize<\/li>\n<li><strong>TotalRowCount<\/strong>: (Variable) totalRowCount<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-4-1.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15435\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-4-1.png\" alt=\"Paging 4.4\" width=\"331\" height=\"477\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-4-1.png 331w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-4-1-104x150.png 104w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-4-1-17x24.png 17w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-4-1-25x36.png 25w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-4-1-33x48.png 33w\" sizes=\"auto, (max-width: 331px) 100vw, 331px\" \/><\/a><\/p>\n<p class=\"left-bar-blue\"><strong>Refresher<\/strong>: The following parameters are only present on paged datasets: SortBy, EnablePaging, PageNumber, PageSize, TotalRowCount. See <a href=\"#About_Paged_Datasets\">About Paged Datasets<\/a> above.<\/p>\n<p>&nbsp;<\/p>\n<div class=\"best-prac\"><i class=\"fa fa-star fa-2x fa-pull-left\"><\/i><span class=\"best-prac-text\">TOP TIP<\/span><\/p>\n<p class=\"intro-text\">Click the Preview button to check that you are getting data. If the preview window is blank, you may have filled in a parameter incorrectly.<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Configuring the Columns<\/strong>:<\/p>\n<p class=\"intro-text\">You must specify the columns that you want to display, otherwise your data table will appear blank. Let's keep the data table simple, and use the Autofill function.<\/p>\n<ul>\n<li class=\"intro-text\">Click the <strong>Autofill<\/strong> button.<\/li>\n<\/ul>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-4-2.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15443\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-4-2.png\" alt=\"Paging 4.4\" width=\"328\" height=\"215\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-4-2.png 328w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-4-2-150x98.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-4-2-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-4-2-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-4-2-48x31.png 48w\" sizes=\"auto, (max-width: 328px) 100vw, 328px\" \/><\/a><\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 5. Set the\u00a0Defaults<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-5.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15446\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-5.png\" alt=\"Paging 4.4\" width=\"630\" height=\"771\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-5.png 630w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-5-123x150.png 123w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-5-20x24.png 20w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-5-29x36.png 29w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-5-39x48.png 39w\" sizes=\"auto, (max-width: 630px) 100vw, 630px\" \/><\/a><\/p>\n<p class=\"intro-text\">We need to set the defaults for the pageNumber and pageSize variables in order for the Paging Control to work properly.<\/p>\n<ul class=\"intro-text\">\n<li>Click the <strong>Default Values<\/strong> button on the Studio toolbar.<\/li>\n<li>Click the <strong>Add<\/strong> button.<\/li>\n<li>Add a variable called <strong>pageNumber\u00a0<\/strong>with a type of Number<em>.<\/em>\u00a0Type in the following value:\u00a0<em>1<br \/>\nThis will show\u00a0the first page of data when the Explorer page is loaded.<\/em><\/li>\n<li>Click the <strong>Add<\/strong> button.<\/li>\n<li>Add a variable called <strong>pageSize\u00a0<\/strong>with a type of Number<em>.<\/em>\u00a0Type in the following value: <i>20<br \/>\nThis will page the data so that it will show 20 rows per page.<\/i><\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>Note<\/strong>: You do not need to add a default for <strong>totalRowCount<\/strong>, as this is automatically published by the dataset.<\/p>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/default-value\/\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"false\" data-slimstat-async=\"false\">Default Values<\/a><\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<div>\n<p class=\"intro-text\"><strong>Step 6. All done!\u00a0\u00a0<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15423 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut.png\" alt=\"Paging 4.4\" width=\"626\" height=\"487\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut.png 626w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-150x117.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-36x28.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/paging44-tut-48x37.png 48w\" sizes=\"auto, (max-width: 626px) 100vw, 626px\" \/><\/a><\/p>\n<p class=\"intro-text\">Great work! You now have a fully functioning Paging Control that displays tabular data in pages.<\/p>\n<ul class=\"intro-text\">\n<li>Click the preview\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" rel=\"lightbox[1419] lightbox-10\" data-slimstat-tracking=\"true\" data-slimstat-callback=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2896\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/><\/a>\u00a0button on the Studio toolbar\u00a0to see what your page\u00a0will look like in run-time.<\/li>\n<li>Click through the pages to get a feel for the behaviour of the control.<\/li>\n<li>In the defaults, change the page number and page size to see what happens.<\/li>\n<\/ul>\n<p class=\"intro-text\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1348\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save.png\" alt=\"save\" width=\"48\" height=\"53\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save.png 48w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-33x36.png 33w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-43x48.png 43w\" sizes=\"auto, (max-width: 48px) 100vw, 48px\" \/>\u00a0Don\u2019t forget to <a title=\"Saving Your Page\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/saving-your-page\/\" data-slimstat-tracking=\"true\" data-slimstat-callback=\"true\">save your page<\/a>!<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Release History<\/h2>\n<ul class=\"intro-text\">\n<li><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/paging-control\/paging-control-4-3-2\/\">Paging Control 4.3.2<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The Paging Control allows page designers to split up large amounts of tabular data into smaller chunks, or pages. The control allows\u00a0the user to move through those pages to view the data in a table. This is a useful way of displaying many rows of tabular\u00a0data in a small space. For this component to work with a dataset, paging must be enabled on the dataset. This article describes how to configure the paging component in version 4.4 and later of IFS OI Explorer.<\/p>\n<p class=\"continue-reading-button\"> <a class=\"continue-reading-link\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/paging-control\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":4652,"parent":1407,"menu_order":352,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[445],"class_list":["post-1429","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-paging","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/1429","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/comments?post=1429"}],"version-history":[{"count":3,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/1429\/revisions"}],"predecessor-version":[{"id":67044,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/1429\/revisions\/67044"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/1407"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/4652"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=1429"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=1429"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=1429"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}