Page History

<table class="mytable">
<tr><th class="confluenceTh">Name</th><th class="confluenceTh">Description</th><th class="confluenceTh">Values</th><th class="confluenceTh">Default</th></tr>
<tr><td><code>selectors</code></td><td>Javascript object containing selectors for various fragments of the Pager component.</td><td> The object may contain any subset of the following keys: <br/>
<pre>
  pagerBar
  pagerBarSecondary
  summary
  pageSize
  headerSortStylisticOffset
</pre>
Any values not provided will revert to the default.</td>
<td><pre>
selectors: {
    pagerBar: ".flc-pager-top",
    pagerBarSecondary: ".flc-pager-bottom",
    summary: ".flc-pager-summary",
    pageSize: ".flc-pager-page-size",
    headerSortStylisticOffset: ".flc-pager-sort-header"
}
</pre>
</td></tr>
<tr><td><code>styles</code></td>
<td>Javascript object containing CSS style names that will be applied to the Pager component.</td>
<td>The object may contain any subset of the following keys: 
<pre>
  tooltip
  ascendingHeader
  descendingHeader
</pre>
Any values not provided will revert to the default.</td>
<td><pre>
styles: {
    tooltip: "fl-pager-tooltip",
    ascendingHeader: "fl-pager-asc",
    descendingHeader: "fl-pager-desc"
}
</pre></td></tr>
<tr>
    <td><code>strings</code></td>
    <td>Configuration of short messages and strings which the component uses in its UI</td>
    <td>key-value structure with <code>string</code> values</td>
    <td><pre>
strings: {
  last: " (last)"
}
</pre></td>
</tr>
<tr><td><code>sorter</code></td>
    <td>A function used to sort the table's rows with respect to a column as requested via the table's UI.</td>
    <td><pre>function(overallThat, model)
</pre>Return: permutation</td>
    <td><code>sorter: fluid.pager.basicSorter</code></td>
</tr>
<tr><td><code>listeners</code></td>
    <td>JavaScript object containing listeners to be attached to the supported events.</td>
    <td>Keys in the object are event names, values are functions or arrays of functions.</td>
    <td>See Supported Events above</td>
</tr>
<tr><td>New in v1.1:<br/> <pre>decorators</pre></td>
    <td>Information used to modify columns in the results listing to be sortable or unsortable</td>
    <td>One or two arrays of <a href="../display/fluid/Renderer+Decorators">renderer decorator</a> specifications, adding any desired decoration to the headers (e.g. special styling through the <code>addClass</code> decorator).</td>
    <td><pre>decorators: {
    sortableHeader: [],
    unsortableHeader: []
}</pre></td>
</tr>
</table>

<table class="mytable">
<tr><th class="confluenceTh">Name</th><th class="confluenceTh">Description</th><th class="confluenceTh">Values</th><th class="confluenceTh">Default</th></tr>
<tr><td><code>pagerBar</code></td>
<td>The overall "Pager Bar" subcomponent which is responsible for the previous/next, page size and page links controls</td>
<td>A subcomponent specification <pre>
   {type: functionName,
    options: pagerBarOptions}
</pre>Typically the <code>functionName</code> should remain as the default of <code>"fluid.pager.pagerBar"</code>
Configuration of the options structure for <code>PagerBar</code> itself is described in its own section below.</td>
<td><pre>pagerBar: {
  type: "fluid.pager.pagerBar",
  options: null
} </pre></td></tr>
<tr><td><code>summary</code></td>
    <td>A small textual control representing an overall "summary" of the paging state. Typically holds a message reading similarly to "30-31 of 139 items"</td>
    <td>A subcomponent specification <pre>
   {type: functionName,
    options: summaryOptions}
</pre>
Configuration of the options structure for <code>Summary</code> itself is described in its own section below.</td>
    <td>
<pre>
summary: {
  type: "fluid.pager.summary", 
  options: {
    message: "%first-%last of %total items"
  }
}
</pre></td></tr>
<tr><td><code>pageSize</code></td>
    <td>Configuration for a control allowing the user to select the number of items shown per page</td>
    <td>A subcomponent specification <pre>
   {type: functionName,
    options: pageSizeOptions}
</pre>
Configuration of the options structure for <code>PageSize</code> itself is described in its own section below.</td>
    <td><pre>pageSize: {
  type: "fluid.pager.directPageSize"
}</pre></td></tr>

<tr><td><code>rangeAnnotator</code></td>
    <td>A tooltip that indicates the range of data included covered by each page link.</td>
    <td>A subcomponent specification <pre>
   {type: functionName}
</pre>
Configuration of the options structure for <code>RangeAnnotator</code> itself is described in its own section below.</td>
    <td><pre>rangeAnnotator: {
    type: "fluid.pager.rangeAnnotator"
}</pre></td></tr>

<tr><td><code>bodyRenderer</code></td>
    <td>Used only if the pager is being run in "data-driven" mode. Contains a subcomponent specification for a component capable of responding to model update events in order to render the visible page segment.</td>
    <td>A subcomponent specification <pre>
   {type: functionName,
    options: bodyRendererOptions}
</pre>
Configuration of the options structure for <code>BodyRenderer</code> itself is described in its own section below.</td>
    <td><pre>bodyRenderer: {
    type: "fluid.emptySubcomponent"
}</pre>This is a dummy implementation that does not render anything. It is used by the default, markup-driven mode of the Pager.</td></tr>

</table>

<table class="mytable">
<tr><th class="confluenceTh">Name</th><th class="confluenceTh">Description</th>
    <th class="confluenceTh">Values</th><th class="confluenceTh">Default</th></tr>
<tr><td><code>dataModel</code></td>
    <td>A "pure data" data model which the pager control will operate on. EL paths expressed 
    in component trees and configuration are expressed relative to this model</td>
    <td>[data]</td>
    <td><code>dataModel: undefined</code></td>
    </tr>
<tr><td><code>columnDefs</code></td>
    <td>Configuration for the rules for extracting and presenting data from the data model into columns. One entry for each column which is to be rendered in the table. This data structure is described in its own documentation section below.</td>
    <td>Array of <code>columnDef</code> objects, or the string <code>"explode"</code>.<br/>
If <code>"explode"</code> is used, the Renderer assumes that the keys in the data model map directly to the <code>rsf:id</code>s attached to the associated HTML elements in the table.</td>
    <td><code>columnDefs: "explode"<br/>
        <span class="purple">In version 1.3.1 only:</span><br/>
        <pre>columnDefs: [
    {
        key: "column1",
        valuebinding: "*.value1",  
        sortable: true
    }
]</pre></code>
</td>
<tr><td><code>dataOffset</code></td>
    <td>An EL path, relative to the root of <code>dataModel</code> to which "standard columns" in <code>columnDefs</code> are to be referred. These standard columns have EL paths beginning with <code>*.</code> - the value held in <code>dataOffset</code>will be prepended in place of <code>*.</code> (together with the column index)</td>
    <td><code>string</code></td>
    <td><code>dataOffset: ""</code></td>
</tr>
</tr>
<tr><td><code>modelFilter</code></td>
    <td>Specifies a function signature which will be used to perform the "filtering" portion of the data preparation work required by the <code>bodyRenderer</code> with respect to preparing the visible page view. The <code>modelFilter</code> is a <code>function (model, pagerModel) -> data</code>, where <code>model</code> is the value held in <code>options.dataModel</code>, <code>pagerModel</code> is the pager's model, and the return value is a segment of the data model in a form suitable to be supplied directly to the <code>bodyRenderer</code>. A basic implementation is supplied in <code>fluid.pager.directModelFilter</code></td>
    <td>function or function name</td>
    <td><code>modelFilter: fluid.pager.directModelFilter</code></td></tr>
</table>

<table class="mytable">
<tr><th class="confluenceTh">Name</th><th class="confluenceTh">Description</th><th class="confluenceTh">Values</th></tr>
<tr><td><code>key</code></td>
    <td>The core field of the columnDefs structure. Represents a unique key which is used to identify the column</td>
    <td><code>string</code></td>
</tr>
<tr><td>valuebinding</td>
    <td>The EL path through the <code>dataModel</code> structure of the data this column is to be taken from. If this is of the form <code>*.endPath</code>, the <code>dataOffset</code> path will be applied as well as the row number. If it is of the form <code>startPath.*.endPath</code>, the <code>*</code> will be replaced by only the row number</td>
   <td><code>string</code> (EL path)</td>
</tr>
<tr><td><code>components</code></td>
   <td>A cloneable represention of the section of component tree to be used when rendering cells from this column with the [Renderer|Fluid Renderer - Background]. Typically this will take the form of just a single component, maybe <code>UIBound</code>, <code>UISelect</code> or <code>UILink</code>. See further comments on component expansion below</td>
<td>component tree or <code>function-></code>component tree</td>
</tr>
<tr><td><code>sortable</code></td>
<td>Boolean flag representing whether this column should be made sortable, by clicking on the 
column header toggle</td>
<td><code>boolean</code></td>
</tr>
</table>

<table class="mytable">
<tr><th class="confluenceTh">Name</th><th class="confluenceTh">Description</th><th class="confluenceTh">Values</th><th class="confluenceTh">Default</th></tr>
<tr><td><code>previousNext</code></td><td>A subcomponent, nested within the PagerBar, which operates the pair of previous/next links for navigating by single pages</td><td>A subcomponent specification</td><td><code>"fluid.pager.previousNext"</code></td></tr>
<tr><td><code>pageList</code></td><td>A subcomponent, nested within the PagerBar which operates a list of links allowing quick random access to individual pages. This listens for changes in the pager's state, and updates the activity and appearance of the link list. It may also additionally take responsibility for rendering the link list dynamically, in response to the state of the user's data model</td>
<td>Standard implementations are <code>fluid.pager.directPageList</code>, which simply accepts a pre-rendered set of page index links which are already in the DOM, and simply takes charge of styling and binding, and <code>fluid.pager.renderedPageList</code> which can operate a dynamic strategy to render the page index links, in addition to the responsibilities of <code>directPageList</code></td>
<td><code>"fluid.pager.directPageList"</code></tr>
<tr><td><code>selectors</code></td><td>Javascript object containing selectors for various fragments of the PagerBar subcomponent.</td><td> The object may contain any subset of the following keys: <br/>
<pre>
  pageLinks
  previous
  next
</pre>
Any values not provided will revert to the default. Each of these selectors is expected to identify link components, most likely of tag &lt;a&gt;</td>
<td><pre>
selectors: {
    pageLinks: ".flc-pager-pageLink",
    pageLinkSkip: ".flc-pager-pageLink-skip",
    pageLinkDisabled: ".flc-pager-pageLink-disabled",
    previous: ".flc-pager-previous",
    next: ".flc-pager-next"
}
</pre>
</td></tr>
<tr><td><code>styles</code></td>
<td>Javascript object containing CSS style names that will be applied to the Page List subcomponent.</td>
<td>The object may contain any subset of the following keys: 
<pre>
  currentPage
  disabled
</pre>
Any values not provided will revert to the default.</td>
<td><pre>
styles: {
    currentPage: "fl-pager-currentPage",
    disabled: "fl-pager-disabled"
}
</pre></td></tr>
<table>

<table class="mytable">
<tr><th class="confluenceTh">Name</th><th class="confluenceTh">Description</th><th class="confluenceTh">Values</th><th class="confluenceTh">Default</th></tr>
<tr><td><code>selectors</code></td>
<td>Allows configuration of a selector name <code>root</code>, which defines the root of the document section which is to form the HTML template for the rendered page links. This cooperates with the top-level selector <code>pageLinks</code> which is intended to identify individual nodes under this root which correspond to the actual links</td>
<td>Selector value for <code>root</code></td>
<td><pre>
selectors: {
  root: ".flc-pager-links"
  }
</pre></td></tr>
<tr><td><code>linkBody</code></td><td>An optional selector which allows an "offset" to be specified between the nodes identified by <code>pageLinks</code> and the actual <code>&lt;a&gt;</code> tag to be the peer of the page index and <code>UILink</code> control.</td>
<td>A selector string</td>
<td><code>"a"</code></td></tr>
<tr><td><code>pageStrategy</code></td>
<td>A configurable strategy for generating the list of page indices which should have links generated for them, given a particular range of available page indices</td>
<td>A function that returns an array of the indices which should be supplied with page links </td><td><code>fluid.pager.everyPageStrategy</code>, which simply generates an entry, and hence a link, for every page in the range</td></tr>
</table>

<table class="mytable">

<tr><th class="confluenceTh">Name</th><th class="confluenceTh">Description</th><th class="confluenceTh">Values</th><th class="confluenceTh">Default</th></tr>
<tr><td><code>message</code></td>
<td>A string template for formatting the summary message. This may make use of substitution variables 
<code>%first</code>, representing the index position of the first visible item, <code>%last</code>, representing the index position of the last visible item, and <code>%total</code>, being the total length of the user's data model</td>
<td>A string template</td>
<td><code>"%first-%last of %total items"</code></td>
</tr>
</table>

<table class="mytable">
<tr><th class="confluenceTh">Name</th><th class="confluenceTh">Description</th><th class="confluenceTh">Values</th><th class="confluenceTh">Default</th></tr>
<tr><td><code>annotateColumnRange</code></td>
    <td>One of the values of the <code>key</code> fields in <code>columnDefs</code>, which will be used to highlight the range of values that a particular column will take, usually by displaying a tooltip as the mouse hovers over a page link. Requires
a <code>rangeAnnotator</code> component to be configured.</td>
    <td><code>string</code></td>
    <td><code>annotateColumnRange: undefined</code><br/>
        <span class="purple">In version 1.3.1 only:</span><br/>
        <code>annotateColumnRange: "column1"</code></td>
  </tr>
<tr><td><code>tooltipDelay</code></td>
    <td>The delay, ms, in hovering over a control to displaying its tooltip</td>
    <td><code>number</code></td>
    <td><code>tootipDelay: 300</code></td>
  </tr>
<tr><td><code>tooltipId</code></td>
    <td>The document id of the displayed tooltip (this markup is generated internally)</td>
    <td><code>string</code></td>
    <td><code>tooltipIt: "tooltip"</code></td>
    </tr>
</table>

<table class="mytable">
<tr><th class="confluenceTh">Name</th><th class="confluenceTh">Description</th><th class="confluenceTh">Values</th><th class="confluenceTh">Default</th></tr>
<tr><td><code>selectors</code></td>
    <td>Javascript object containing selectors for various fragments of the selfRender subcomponent.</td>
    <td></td>
    <td><pre>selectors: {
  root: ".flc-pager-body-template"
}</pre>
</td></tr>
<tr><td><font color="purple">New in v1.1</font><br/><code>styles</code></td>
    <td>Javascript object containing CSS style names that will be applied to the selfRender subcomponent.</td>
    <td></td>
    <td><pre>styles: {
  root: ".fl-pager"
}</pre>
</td></tr>
<tr><td><code>renderOptions</code></td>
    <td>An options structure, to be passed through to the Fluid Renderer when rendering the body of the table</td>
    <td><code>An options structure</code></td>
    <td><code>{}<code></td>
</tr>
<tr><td><code>row</code>
    <td>The <code>rsf:id</code> to be used for the container, when generating each successive row of the table</td>
    <td><code>string</code> (an <code>rsf:id</code>)</code></td>
    <td><code>"row:"</code></td>
</tr>
<tr><td><code>header</code>
    <td>The <code>rsf:id</code> to be used for the container, when generating the table header row</td>
    <td><code>string</code> (an <code>rsf:id</code>)</code></td>
    <td><code>"header:"</code></td>
</tr>
</table>