Repeater List View repeater-list.js

The repeater list view plug-in will render data in a tabular format, with many options and methods to suit your needs.

Example

Awesome Repeater
- of items
Per Page
Page
    of

    Usage

    The repeater list plug-in extends repeater functionality. This plug-in follows the steps specified in the repeater docs. You can also use the following additional features:

    Data Source

    The dataSource function behaves as described in the repeater docs. However, the function potentially provides a few additional attributes in the options argument:

    Attribute type description
    sortDirection string If the list view is sortable and has been sorted by the user, this will indicate the sort direction. Values are either 'asc' or 'desc'.
    sortProperty string If the list view is sortable and has been sorted by the user, this will indicate the column property that has been sorted on.

    Additionally, the function requires a few additional parameters on the returned data object to render the data properly:

    Attribute type description
    columns array Array of objects representing the desired columns within the rendered list. The column objects contain three attributes:
    • className - String representing the classes to be added to any DOM items associated with the column. Multiple classes can be adding a space between each name
    • label - String or jQuery attribute containing the content to be displayed as the "name" of the column
    • property - String value that dictates which item attribute is displayed within the column
    • sortable - Optional Boolean or string value dictating whether user can sort the column. A true value indicates sorting on the property value. A string value sorts on the specified value. This attribute defaults to false
    • sortDirection - Optional string to set initial sort direction of the column. Values can be either 'asc' or 'desc'. NOTE: only one column can be sorted upon at a time.
    • width - String or Number dictating this column's width
    (ex: [ { label: 'Name', property: 'name', sortable: true }, ... ] )
    items array Array of objects representing the item data that will be displayed within the repeater. The item objects can contain any number of attributes. The attribute name must match the column property value to display within a column.

    Options

    You can pass options via Javascript upon initialization.

    Name type default description
    list_actions object null Can be used to configure an additional actions column in the repeater. It will positioned as the rightmost column and will always be visible. It creates a dropdown menu that can be populated with x number of actions to be applied to the row. If multi select is also enabled will allow for bulk actions.
    • width - optional width to the actions column
    • items - Array of objects representing the different action items in the dropdown
      • name - String representing the name of the action
      • html - HTML string that would modify the markup of the action item
      • clickAction - returns a helpers obj once this action item has been clicked
        • helpers returns an object that contains helpers.item which is the jquery element of the current table row. Also returns helpers.rowData which are all key/value data from the current item/row in the dataSource
    
list_actions:  {
  width: 37,
  items: [{
    name: 'delete'
	html: ' Delete',
	clickAction: function(helpers, callback, e) {
		e.preventDefaul();
		console.log('hey it worked');
		console.log(helpers);
		console.log(e);
		callback();
	}
}
    list_columnRendered function null If set, the repeater calls this function after rendering each table cell within a row. It passes a helpers object and a callback function as arguments. This function is the preferred way to modify table cell markup.
    • helpers.rowData - All key/value data from the current item/row in the dataSource
    • helpers.columnAttr - The key name specified by dataSource.columns of the current column/cell
    • helpers.container - jQuery element of the current tr or table row
    • helpers.item - jQuery element of the current td or table cell
    • callback - Call this function to continue rendering the view
    list_columnSizing boolean true Dictates whether the repeater should run the intelligent column resizing algorithm. This feature only resizes columns without a set value. Setting this value to false will disable this feature entirely.
    list_columnSyncing boolean true Dictates whether the repeater should run the post-render column syncing algorithm. This feature keeps the `.repeater-list-heading` classed divs in alignment with the columns. Setting this value to false will disable this feature entirely.
    list_frozenColumns number 0 Dictates whether the repeater should create frozen columns in the repeater. This feature creates x number of frozen columns on the left side of the repeater. Frozen columns means that when scrolled left to right these columns will not move and always be visible.
    list_infiniteScroll boolean or object false Dictates whether the repeater list view should utilize infinite scrolling instead of pagination. A true value enables infinite scrolling with default settings. Additionally, you can set this value to an object with attributes matching the options available in the infinite scroll control. This option allows for further customization and ignores the dataSource option.
    list_noItemsHTML string or jQuery object '' Specifies what is displayed if no items return from the dataSource. You can use a string or jQuery object.
    list_selectable boolean or string false Specifies whether a user can select rendered item rows. If you set the value to true, users can select only one row at a time. If you set the value to 'multi', users can select multiple rows at once.
    list_sortClearing boolean false Specifies whether users can clear sortable columns with a third click:
    • one click, sort ASC.
    • second click, sort DESC
    • third click, no sorting
    list_rowRendered function null If set, the repeater calls this function after the repeater renders each row, passing a helpers object and callback function as arguments. This function is the preferred way to modify table row markup.
    • helpers.rowData - All key/value data from the current item/row in the dataSource
    • helpers.container - jQuery element of the row's parent (tbody)
    • helpers.item - jQuery element of the current tr or table row
    • callback - Call this function to continue rendering the view
    list_highlightSortedColumn boolean true Specifies whether sorted columns should be highlighted.

    Methods

    .repeater('list_clearSelectedItems');

    Clears any currently selected row items. You can use selectable row items only by enabling the list_selectable option.

    $('#myRepeater').repeater('list_clearSelectedItems');

    .repeater('list_getSelectedItems');

    Returns the currently selected row items in an array. You can use selectable row items only by enabling the list_selectable option. 

    $('#element').repeater('list_getSelectedItems');

    .repeater('list_setSelectedItems');

    Set the selected row items for the current displayed data. This function accepts an array of items objects and force boolean as arguments. 

    $('#myRepeater').repeater('list_setSelectedItems', [ {...}, ...]);
    Parameter description
    items Required Array of items objects. The items objects specify which item to select with attributes to identify the item. If the items object contains an index property, that items object will select the matching item index within the currently displayed data. If the items object contains a property attribute and value attribute, that items object will select items with properties matching the specified value.
    (ex: [ { index: 4 }, { property: 'name', value: 'nameValue' } ] )
    force Optional Boolean specifying whether to ignore current list_selectable mode when selecting items. This value defaults to false and allows only one selectable item if list_selectable does not equal multi, regardless of how many items are passed into the items array parameter. Set the value to true to override this behavior and select all provided items.

    Events

    Event Type Description
    deselected.fu.repeaterList If list_selectable is enabled, fires whenever the user deselects a row. Provides an event object and the deselected row as arguments.
    selected.fu.repeaterList If list_selectable is enabled, fires whenever the user selects a row. Provides an event object and the selected row as arguments.

    All repeater-list events are fired on the .repeater classed element.

    
$('#myRepeater').on('selected.fu.repeaterList', function () {
    // do something…
});