Datatable - DataSource DataTable has 3 initialization modes; local, remote eager and remote lazy. Data type should be a array of JSON objects for all cases. In local mode, data is represented as a local variable, in remote eager mode, datasource is a function to fetch the data only once from the server and in remote lazy mode datasource function is called whenever necessary such as initialization, paging, sorting and filtering.

DataTable requires column metadata and a datasource as requires options. A column definition has the following properties;

field: Name of field.
headerText: Column header value.
footerText: Column footer value.
sortable: Controls sorting.
content: A function that takes row data and expects a string or a jQuery object to customize the cell.
headerStyle: Inline style of the header cell.
headerClass: Style class of the header cell.
bodyStyle: Inline style of the body cell.
bodyClass: Style class of the body cell.
colspan: Column span value for grouping.
rowspan: Row span value for grouping.
filter: Defines if filtering is enabled.
filterMatchMode: Built-in filter algorithm, valid values are "startsWith" and "contains".
filterFunction: Custom filter function that takes the cell value and filter value to return a boolean.
editor: Boolean value that controls if this column is editable.
rowToggler: Boolean value that controls if this column displayed a toggle icon.

Datasource on the other hand, can either be a javascript array, a url as string 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).

Markup

<div id="tbl"></div>

Local Data

$('#tbl').puidatatable({
    columns: [],
    datasource: [],
    ...
});

Remote Data

$('#tbl').puidatatable({
    columns: [],
    datasource: function(callback) {
        $.ajax({
            type: "GET",
            url: 'showcase/resources/data/cars-large.json',
            dataType: "json",
            context: this,
            success: function(response) {
                callback.call(this, response);
            }
        });
    },
    ...
});

Lazy Remote Data

$('#tbl').puidatatable({
    columns: [],
    datasource: function(callback, ui) {
        //ui.first = Index of the first record
        //ui.rows = Number of rows to load
        //ui.sortField = Field name of the sorted column
        //ui.sortOrder = Sort order of the sorted column
        //ui.sortMeta = Array of field names and sort orders of the sorted columns 
        //ui.filters = Filtering information with field-value pairs like ui.filters['fieldname'] = 'filtervalue'

        //builds a url based on parameters
        var uri = 'showcase/resources/data/cars-large.json';
        if (ui.sortField) {
            uri += '/' + ui.sortField + '/' + ui.sortOrder;
        }

        $.ajax({
            type: "GET",
            url: uri,
            dataType: "json",
            context: this,
            success: function(response) {
                //imitate lazy loading by slicing a new list from whole data, in real application the response should actually contain just the new chunk
                callback.call(this, response.slice(ui.first, ui.first + 10));
            }
        });
    }
});

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.
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.
emptyMessage	string	No records found	If there are no records in datatable this option displays a message about it.
globalFilter	string	null	Selector of an input field to use as a global filter in filtering.
sortMode	string	single	Defined the number of columns to sort at a time, valid values are single and multiple.

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.

Example

$('#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.
reload	-	Reloads the data and resets the state.
getPaginator	-	Returns the paginator element.
setTotalRecords(value)	value: New value	Updates the paginator with new total records.

Example

$('#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: 'showcase/resources/data/cars-large.json',
                    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 = 'showcase/resources/data/cars-large.json';
                if (ui.sortField) {
                    uri += '/' + ui.sortField + '/' + ui.sortOrder;
                }

                $.ajax({
                    type: "GET",
                    url: uri,
                    dataType: "json",
                    context: this,
                    success: function(response) {
                        //imitate lazy loading by slicing a new list from whole data, in real application the response should actually contain just the new chunk
                        callback.call(this, response.slice(ui.first, ui.first + 10));
                    }
                });
            }
        });
    });
</script>

                            
<div id="tbllocal"></div>

<div id="tblremoteeager"></div>

<div id="tblremotelazy"></div>

Usage

DataTable requires a datasource and p-column elements to specify each column.

Load from a URL

<p-datatable datasource="rest/cars/list" paginator rows="10" selectionmode="single" onrowselect="handleRowSelect">
    <p-column field="vin" headertext="Vin" sortable filter></p-column>
    <p-column field="year" headertext="Year" sortable filter></p-column>
    <p-column field="brand" headertext="Brand" sortable filter></p-column>
    <p-column field="color" headertext="Color" sortable filter> 
        <template>
            <span style="color:{{color}}">{{color}}</span>
        </template>
    </p-column>
</p-datatable>

Load with a Function

<p-datatable datasource="DataDemo.cars" paginator rows="10" selectionmode="single" onrowselect="handleRowSelect">
    <p-column field="vin" headertext="Vin" sortable filter></p-column>
    <p-column field="year" headertext="Year" sortable filter></p-column>
    <p-column field="brand" headertext="Brand" sortable filter></p-column>
    <p-column field="color" headertext="Color" sortable filter> 
        <template>
            <span style="color:{{color}}">{{color}}</span>
        </template>
    </p-column>
</p-datatable>

Local Data

var DataDemo = { 
    
    cars: [
        {'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'}
    ]

};

Remote Data

var DataDemo = {
    
    cars: function (callback) {
        $.ajax({
            type: "GET",
            url: 'rest/cars/list',
            dataType: "json",
            context: this,
            success: function (response) {
                callback.call(this, response);
            }
        });
    }
    
}

Custom Content

Value of field per row data is used to display content in column by default, in order to customize the content use a mustache template where row object is available with {{}} syntax.

<p-column field="color" headertext="Color" sortable filter> 
    <template>
        <span style="color:{{color}}">{{color}}</span>
    </template>
</p-column>

Columns

A p-column component provides the following attributes for configuration;

field: Name of field.
headertext: Column header value.
footertext: Column footer value.
sortable: Controls sorting.
content: A function that takes row data and expects a string or a jQuery object to customize the cell.
headerstyle: Inline style of the header cell.
headerclass: Style class of the header cell.
bodystyle: Inline style of the body cell.
bodyclass: Style class of the body cell.
colspan: Column span value for grouping.
rowspan: Row span value for grouping.
filter: Defines if filtering is enabled.
filtermatchmode: Built-in filter algorithm, valid values are "startsWith" and "contains".
filterFunction: Custom filter function that takes the cell value and filter value to return a boolean.
editor: Boolean value that controls if this column is editable.
rowtoggler: Boolean value that controls if this column displayed a toggle icon.

Attributes

Name	Type	Default	Description
id	string	null	Identifier of the element.
datasource	Array/Function	null	Datasource to load the data, valid options are a local javascript array, a url string or a function.
paginator	boolean	false	Boolean value to enable paginator.
totalrecords	integer	null	Logical number of rows to be used in lazy mode.
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.
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.
emptymessage	string	No records found	If there are no records in datatable this option displays a message about it.

Methods

Name	Parameters	Description
reload()	-	Reloads the data and resets the state.
setTotalRecords(value)	value: New value	Updates the paginator with new total records.