rowGroup.endRender
Provide a function that can be used to control the data shown in the end grouping row.
Please note - this property requires the RowGroup extension for DataTables.
Description
It can be really useful to modify the contents of the grouping row that is displayed by RowGroup. By default it simply shows the grouping data value, but often you might wish to show more complex data, such as aggregations, counts and other summary information. This option provides that ability by letting you specify a function that will return the data to be shown for the group's ending row.
The function defined by this option will be called once for every group shown in the DataTables' current page, and will be called again every time the page is changed (e.g. paging, search or sort) to keep the grouping information current. As such it is important that the function used should be relatively fast in its execution - e.g. do not make any asynchronous Ajax calls!
Types
function endRender( rows, group, level )
- Parameters:
Name Type Optional 1 rowsNo A DataTables API instance resulting from
rows()on the rows in this group, displayed on the current page.2 groupNo The value of the group's data point (defined by
rowGroup.dataSrc).3 levelNo Since 1.1.0: The nesting level. Top level is index 0.
- Returns:
The information returned by the rendering function may be one of:
- A string, in which case RowGroup will create
trandtdelements for the grouping row, with acolspanvalue to have the single cell spanning the width of the table. - A
trnode which contains a row that will be injected into the table as the group end row. This is useful if you wish to use multiple cells in the grouping row - e.g. to provide alignment with the host data. - A jQuery object containing a
trnode. This acts in exactly the same way as atrelement and is provided for convenience.
- A string, in which case RowGroup will create
Default
- Value:
null
A grouping end row is not shown.
Examples
Show the number of rows in the group along with the group data value:
new DataTable('#myTable', {
rowGroup: {
endRender: function (rows, group) {
return group + ' (' + rows.count() + ' rows)';
}
}
});Disable the start grouping row:
new DataTable('#myTable', {
rowGroup: {
startRender: null,
endRender: function (rows, group) {
return group + ' (' + rows.count() + ' rows)';
}
}
});Show aggregate data in the footer:
new DataTable('#myTable', {
rowGroup: {
endRender: function (rows, group) {
var avg =
rows
.data()
.pluck('salary')
.reduce(function (a, b) {
return a + b.replace(/[^\d]/g, '') * 1;
}, 0) / rows.count();
return (
'Average salary in ' +
group +
': ' +
DataTable.render.number(',', '.', 0, '$').display(avg)
);
}
}
});