DataTable requires column metadata and a datasource as requires options. A column definition has the following properties;
Datasource on the other hand, can either be a javascript array or a function to load data from a remote location. In eager mode, datasource is loaded only once and in lazy mode ,invoked everytime whenever the state changes like paging or sorting. To update the datasource use $('#example').puidatatable('option', 'datasource', newdatasource).
$('#tbl').puidatatable({ columns: [], datasource: [], ... });
<div id="tbl"></div>
Name | Type | Default | Description |
---|---|---|---|
columns | Array | null | An array of columns definition instances. |
datasource | Array/Function | null | Datasource to load the data, valid options are a local javascript array or a function. |
paginator | Object | null | Configuration for paginator, see paginator widget for the options. |
selectionMode | string | null | Selection mode for datatable, valid values are single and multiple. |
caption | String | null | Caption text of the datatable. |
lazy | boolean | false | Determines if the remote data loading is lazy, only the current page is loaded if true. |
sortField | String | null | Determines the column on which the rows are initially sorted. |
sortOrder | int | null | Determines the order of the initial sorting 1 is up, -1 is down. |
keepSelectionInLazyMode | boolean | false | When true, the pagination in lazy mode will keep the selected rows. Developer is responsible for the fact that always the same rows in the same order needs to be returned in order to make the selection behave correctly. |
scrollable | boolean | false | In scrollable mode, data in body is scrollable with fixed header and footer. |
scrollHeight | boolean | null | Height of the scrollable body section, can be a fixed value in pixels like 50 or a percentage 50%. |
scrollWidth | boolean | null | Width of the scrollable body section, can be a fixed value in pixels like 50 or a percentage 50%. |
responsive | boolean | false | When enabled, columns for a row are displayed as stacked in small screens. |
expandableRows | boolean | false | Allows row expansion to display detailed content. |
expandedRowContent | function | null | Callback that receives the row data and returns the content for the expansion. |
rowExpandMode | string | multiple | Defines whether one row at a time can be toggled or not. Valid values are "multiple" and "single". |
resizableColumns | boolean | false | Makes columns resizable using drag drop. |
columnResizeMode | string | fit | Defines if overall table width should change or not, valid values are "fit" and "expand". |
draggableRows | boolean | false | Makes rows draggable for reorder. |
draggableColumns | boolean | false | Makes columns draggable for reorder. |
filterDelay | integer | 500 | Delay in milliseconds to trigger filtering. |
stickyHeader | boolean | false | When enabled, header is kept inside the viewport during page scroll. |
editMode | boolean | cell | Defines edit mode of data, only valid value is cell. |
tabindex | integer | 0 | tabindex to be used at keyboard support such as row navigation. |
Name | Parameters | Description |
---|---|---|
sort | event: puidatatablesort event
sortOrder: Order as integer value sortField: Field of column |
Fired when a row is selected. |
rowSelect | event: puidatatablerowselect event
data: Selected data |
Fired when a row is selected. |
rowUnselect | event: puidatatablerowunselect event
data: Unselected data |
Fired when a row is unselected. |
rowExpand | event: puidatatablerowexpand event
data: Expanded row data |
Fired when a row is expanded. |
rowCollapse | event: puidatatablerowcollapsed event
data: Collapsed row data |
Fired when a row is collapsed. |
colReorder | event: puidatatablecolreorder event
dragIndex: Index of dragged column dropIndex: Index of dropped column |
Fired when a row is collapsed. |
colResize | event: puidatatablecolresize event
element: Resized column header |
Fired when a column is resized. |
rowReorder | event: puidatatablerowreorder event
fromIndex: Original index of row toIndex: New index of row |
Fired when a column is resized. |
rowSelectContextMenu | event: puidatatablerowselectcontext event
data: Selected data |
Fired when a row is selected with context menu. |
cellEdit | event: puidatatablecelledit event
oldValue: Old value of cell newValue: New value of cell data: Row data field: Field of the cell |
Fired when a row is selected with context menu. Returning false rejects the edit. |
$('#tbl').puidatatable({ rowSelect: function(event, data) { //... } });
Name | Parameters | Description |
---|---|---|
sort | field: Name of the sort field, order: 1 or -1 for sort order. | Sorts the data. |
unselectAllRows | - | Cleans datatable selection. |
selectRow(row, silent) | row: tr element as jquery, silent: Flag not to trigger select event. | Selects a given row. |
unselectRow(row, silent) | row: tr element as jquery, silent: Flag not to trigger select event. | Unselects a given row. |
reset | - | Resets the datatable state. |
getSelection | - | Retrieves selected data. Warning: In Lazy loading mode, it retrieves only the selected rows on the current page of the paginator. |
getContextMenuSelection | - | Retrieves selected data by context menu. |
$('#default').puidatatable('unselectAllRows');
<script type="text/javascript"> $(function() { var localData = [ {'brand': 'Volkswagen', 'year': 2012, 'color': 'White', 'vin': 'dsad231ff'}, {'brand': 'Audi', 'year': 2011, 'color': 'Black', 'vin': 'gwregre345'}, {'brand': 'Renault', 'year': 2005, 'color': 'Gray', 'vin': 'h354htr'}, {'brand': 'BMW', 'year': 2003, 'color': 'Blue', 'vin': 'j6w54qgh'}, {'brand': 'Mercedes', 'year': 1995, 'color': 'White', 'vin': 'hrtwy34'}, {'brand': 'Volvo', 'year': 2005, 'color': 'Black', 'vin': 'jejtyj'}, {'brand': 'Honda', 'year': 2012, 'color': 'Yellow', 'vin': 'g43gr'}, {'brand': 'Jaguar', 'year': 2013, 'color': 'White', 'vin': 'greg34'}, {'brand': 'Ford', 'year': 2000, 'color': 'Black', 'vin': 'h54hw5'}, {'brand': 'Fiat', 'year': 2013, 'color': 'Red', 'vin': '245t2s'} ]; $('#tbllocal').puidatatable({ caption: 'Local Datasource', columns: [ {field: 'vin', headerText: 'Vin'}, {field: 'brand', headerText: 'Brand'}, {field: 'year', headerText: 'Year'}, {field: 'color', headerText: 'Color'} ], datasource: localData }); $('#tblremoteeager').puidatatable({ caption: 'Remote Restful Webservice - Eager', paginator: { rows: 10 }, columns: [ {field: 'vin', headerText: 'Vin'}, {field: 'brand', headerText: 'Brand'}, {field: 'year', headerText: 'Year'}, {field: 'color', headerText: 'Color'} ], datasource: function(callback) { $.ajax({ type: "GET", url: 'rest/cars/list', dataType: "json", context: this, success: function(response) { callback.call(this, response); } }); } }); $('#tblremotelazy').puidatatable({ lazy: true, caption: 'Remote Restful Webservice - Lazy', paginator: { rows: 10, totalRecords: 200 }, columns: [ {field: 'vin', headerText: 'Vin'}, {field: 'brand', headerText: 'Brand'}, {field: 'year', headerText: 'Year'}, {field: 'color', headerText: 'Color'} ], datasource: function(callback, ui) { var uri = 'rest/cars/lazylist/' + ui.first; if (ui.sortField) { uri += '/' + ui.sortField + '/' + ui.sortOrder; } $.ajax({ type: "GET", url: uri, dataType: "json", context: this, success: function(response) { callback.call(this, response); } }); } }); }); </script>
<div id="tbllocal"></div> <div id="tblremoteeager"></div> <div id="tblremotelazy"></div>