mirror of
https://github.com/DataTables/DataTables.git
synced 2025-01-19 12:52:11 +01:00
New: Header renderers
- Rendering functions can now be provided for the header cells in the table, which will format HTML in the cells (note only the cells that are identified as the 'control' cell for the column have the renderer applied) and apply any classes needed (thus the renderers should listen for the 'sort' event). - This is done to provide integration options for other frameworks and advanced styling controls. For example, FontAwesome could now easily be used to style a header with sorting icons sourced from the font. - jQuery UI header rendering has been seperated out into its own renderer which is activated by the bJQueryUI initialisation option. This, along with the whole of DataTables' jQuery UI ThemeRoller support will be moved into a plug-in in 1.11 (it is very tempting make that change now, but one major version for the decprecated option is correct I think). This is the last part of the jQuery UI integration that needed to be decoupled from the DataTables core - it can now all be provided by plug-ins. - This fixed issue #153 - Renderers still be to documented.
This commit is contained in:
parent
81a76059ae
commit
01444af1a6
@ -179,6 +179,7 @@
|
||||
require('ext.sorting.js');
|
||||
require('ext.types.js');
|
||||
require('ext.filter.js');
|
||||
require('ext.renderer.js');
|
||||
|
||||
// jQuery aliases
|
||||
$.fn.dataTable = DataTable;
|
||||
|
@ -179,6 +179,13 @@ if ( oInit.bJQueryUI )
|
||||
/* Set the DOM to use a layout suitable for jQuery UI's theming */
|
||||
oSettings.sDom = '<"H"lfr>t<"F"ip>';
|
||||
}
|
||||
|
||||
if ( ! oSettings.renderer ) {
|
||||
oSettings.renderer = 'jqueryui';
|
||||
}
|
||||
else if ( $.isPlainObject( oSettings.renderer ) && ! oSettings.renderer.header ) {
|
||||
oSettings.renderer.header = 'jqueryui';
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
|
@ -130,30 +130,16 @@ function _fnBuildHead( oSettings )
|
||||
if ( column.sTitle != cell.html() ) {
|
||||
cell.html( column.sTitle );
|
||||
}
|
||||
|
||||
_fnRenderer( oSettings, 'header' )(
|
||||
oSettings, cell, column, i, classes
|
||||
);
|
||||
}
|
||||
|
||||
if ( createHeader ) {
|
||||
_fnDetectHeader( oSettings.aoHeader, thead );
|
||||
}
|
||||
|
||||
/* Add the extra markup needed by jQuery UI's themes */
|
||||
if ( oSettings.bJUI )
|
||||
{
|
||||
for ( i=0, ien=columns.length ; i<ien ; i++ )
|
||||
{
|
||||
cell = columns[i].nTh;
|
||||
|
||||
var nDiv = document.createElement('div');
|
||||
nDiv.className = classes.sSortJUIWrapper;
|
||||
$(cell).contents().appendTo(nDiv);
|
||||
|
||||
var nSpan = document.createElement('span');
|
||||
nSpan.className = classes.sSortIcon+' '+columns[i].sSortingClassJUI;
|
||||
nDiv.appendChild( nSpan );
|
||||
cell.appendChild( nDiv );
|
||||
}
|
||||
}
|
||||
|
||||
/* ARIA role for the rows */
|
||||
$(thead).find('>tr').attr('role', 'row');
|
||||
|
||||
@ -511,7 +497,7 @@ function _fnAddOptionsHtml ( oSettings )
|
||||
j++;
|
||||
}
|
||||
|
||||
/* Replace jQuery UI constants */
|
||||
/* Replace jQuery UI constants @todo depreciated */
|
||||
if ( sAttr == "H" )
|
||||
{
|
||||
sAttr = oSettings.oClasses.sJUIHeader;
|
||||
|
@ -68,27 +68,6 @@ function _fnFeatureHtmlPaginate ( settings )
|
||||
}
|
||||
|
||||
|
||||
function _fnRenderer( settings, type )
|
||||
{
|
||||
var renderer = settings.renderer;
|
||||
var host = DataTable.ext.renderer[type];
|
||||
|
||||
if ( $.isPlainObject( renderer ) && renderer[type] ) {
|
||||
// Specific renderer for this type. If available use it, otherwise use
|
||||
// the default.
|
||||
return host[renderer[type]] || host._;
|
||||
}
|
||||
else if ( typeof renderer === 'string' ) {
|
||||
// Common renderer - if there is one available for this type use it,
|
||||
// otherwise use the default
|
||||
return host[renderer] || host._;
|
||||
}
|
||||
|
||||
// Use the default
|
||||
return host._;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Alter the display settings to change the page
|
||||
* @param {object} settings DataTables settings object
|
||||
|
@ -42,7 +42,7 @@ function _fnSortFlatten ( settings )
|
||||
function _fnSort ( oSettings, bApplyClasses )
|
||||
{
|
||||
var
|
||||
i, ien, iLen, j, jLen, k, kLen,
|
||||
i, ien, iLen, j, jLen, k, kLen, sortedColumns={},
|
||||
sDataType, nTh,
|
||||
aSort = [],
|
||||
aiOrig = [],
|
||||
@ -59,6 +59,7 @@ function _fnSort ( oSettings, bApplyClasses )
|
||||
|
||||
for ( i=0, ien=aSort.length ; i<ien ; i++ ) {
|
||||
sortCol = aSort[i];
|
||||
sortedColumns[ sortCol.col ] = sortCol.dir;
|
||||
|
||||
// Track if we can use the fast sort algorithm
|
||||
if ( sortCol.formatter ) {
|
||||
@ -165,7 +166,7 @@ function _fnSort ( oSettings, bApplyClasses )
|
||||
|
||||
/* Tell the draw function that we have sorted the data */
|
||||
oSettings.bSorted = true;
|
||||
$(oSettings.oInstance).trigger('sort', oSettings);
|
||||
$(oSettings.nTable).trigger('sort', [oSettings, aSort, sortedColumns]);
|
||||
}
|
||||
|
||||
|
||||
@ -301,7 +302,7 @@ function _fnSortAttachListener ( settings, attachTo, colIdx, callback )
|
||||
|
||||
|
||||
/**
|
||||
* Set the sorting classes on the header, Note: it is safe to call this function
|
||||
* Set the sorting classes on table's body, Note: it is safe to call this function
|
||||
* when bSort and bSortClasses are false
|
||||
* @param {object} oSettings dataTables settings object
|
||||
* @memberof DataTable#oApi
|
||||
@ -309,78 +310,27 @@ function _fnSortAttachListener ( settings, attachTo, colIdx, callback )
|
||||
function _fnSortingClasses( settings )
|
||||
{
|
||||
var oldSort = settings.aLastSort;
|
||||
var columns = settings.aoColumns;
|
||||
var classes = settings.oClasses;
|
||||
var sortIcon = classes.sSortIcon;
|
||||
var sortClass = settings.oClasses.sSortColumn;
|
||||
var sort = _fnSortFlatten( settings );
|
||||
var features = settings.oFeatures;
|
||||
var sortFeature = features.bSort;
|
||||
var sortClasses = features.bSortClasses;
|
||||
var i, ien, col, colIdx, jqTh;
|
||||
var i, ien, colIdx;
|
||||
|
||||
// Remove old sorting classes
|
||||
for ( i=0, ien=oldSort.length ; i<ien ; i++ ) {
|
||||
colIdx = oldSort[i].col;
|
||||
col = columns[ colIdx ];
|
||||
jqTh = $(col.nTh);
|
||||
if ( features.bSort && features.bSortClasses ) {
|
||||
// Remove old sorting classes
|
||||
for ( i=0, ien=oldSort.length ; i<ien ; i++ ) {
|
||||
colIdx = oldSort[i].col;
|
||||
|
||||
// Remove base TH sorting
|
||||
jqTh
|
||||
.removeClass(
|
||||
classes.sSortAsc +" "+
|
||||
classes.sSortDesc +" "
|
||||
)
|
||||
.addClass( col.sSortingClass );
|
||||
|
||||
// Remove icon sorting
|
||||
if ( sortIcon ) {
|
||||
jqTh
|
||||
.find( 'span.'+sortIcon )
|
||||
.removeClass(
|
||||
classes.sSortJUIAsc +" "+
|
||||
classes.sSortJUIDesc +" "+
|
||||
classes.sSortJUI +" "+
|
||||
classes.sSortJUIAscAllowed +" "+
|
||||
classes.sSortJUIDescAllowed
|
||||
)
|
||||
.addClass( col.sSortingClassJUI );
|
||||
}
|
||||
|
||||
// Remove column sorting
|
||||
if ( sortClasses ) {
|
||||
// Remove column sorting
|
||||
$( _pluck( settings.aoData, 'anCells', colIdx ) )
|
||||
.removeClass( classes.sSortColumn + (i<2 ? i+1 : 3) );
|
||||
.removeClass( sortClass + (i<2 ? i+1 : 3) );
|
||||
}
|
||||
}
|
||||
|
||||
// Add new ones
|
||||
if ( sortFeature ) {
|
||||
// Add new column sorting
|
||||
for ( i=0, ien=sort.length ; i<ien ; i++ ) {
|
||||
colIdx = sort[i].col;
|
||||
col = columns[ colIdx ];
|
||||
jqTh = $(col.nTh);
|
||||
|
||||
// Add base TH sorting
|
||||
jqTh
|
||||
.removeClass( col.sSortingClass )
|
||||
.addClass( sort[i].dir == "asc" ?
|
||||
classes.sSortAsc : classes.sSortDesc
|
||||
);
|
||||
|
||||
// Add icon sorting
|
||||
if ( sortIcon ) {
|
||||
jqTh
|
||||
.find( 'span.'+sortIcon )
|
||||
.addClass( sort[i].dir == "asc" ?
|
||||
classes.sSortJUIAsc : classes.sSortJUIDesc
|
||||
);
|
||||
}
|
||||
|
||||
// Add column sorting
|
||||
if ( sortClasses ) {
|
||||
$( _pluck( settings.aoData, 'anCells', colIdx ) )
|
||||
.addClass( classes.sSortColumn + (i<2 ? i+1 : 3) );
|
||||
}
|
||||
$( _pluck( settings.aoData, 'anCells', colIdx ) )
|
||||
.addClass( sortClass + (i<2 ? i+1 : 3) );
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -205,4 +205,26 @@ function _fnLengthOverflow ( settings )
|
||||
}
|
||||
|
||||
settings._iDisplayStart = start;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function _fnRenderer( settings, type )
|
||||
{
|
||||
var renderer = settings.renderer;
|
||||
var host = DataTable.ext.renderer[type];
|
||||
|
||||
if ( $.isPlainObject( renderer ) && renderer[type] ) {
|
||||
// Specific renderer for this type. If available use it, otherwise use
|
||||
// the default.
|
||||
return host[renderer[type]] || host._;
|
||||
}
|
||||
else if ( typeof renderer === 'string' ) {
|
||||
// Common renderer - if there is one available for this type use it,
|
||||
// otherwise use the default
|
||||
return host[renderer] || host._;
|
||||
}
|
||||
|
||||
// Use the default
|
||||
return host._;
|
||||
}
|
||||
|
||||
|
57
media/src/ext/ext.renderer.js
Normal file
57
media/src/ext/ext.renderer.js
Normal file
@ -0,0 +1,57 @@
|
||||
|
||||
|
||||
$.extend( true, DataTable.ext.renderer, {
|
||||
header: {
|
||||
_: function ( settings, cell, column, idx, classes ) {
|
||||
// No additional mark-up required
|
||||
|
||||
// Attach a sort listener to update on sort
|
||||
$(settings.nTable).on( 'sort', function ( e, settings, sorting, columns ) {
|
||||
cell
|
||||
.removeClass( classes.sSortAsc +" "+classes.sSortDesc )
|
||||
.addClass( columns[ idx ] == 'asc' ?
|
||||
classes.sSortAsc : columns[ idx ] == 'desc' ?
|
||||
classes.sSortDesc :
|
||||
column.sSortingClass
|
||||
);
|
||||
} );
|
||||
},
|
||||
|
||||
jqueryui: function ( settings, cell, column, idx, classes ) {
|
||||
$('<div/>')
|
||||
.addClass( classes.sSortJUIWrapper )
|
||||
.append( cell.contents() )
|
||||
.append( $('<span/>')
|
||||
.addClass( classes.sSortIcon+' '+column.sSortingClassJUI )
|
||||
)
|
||||
.appendTo( cell );
|
||||
|
||||
// Attach a sort listener to update on sort
|
||||
$(settings.nTable).on( 'sort', function ( e, settings, sorting, columns ) {
|
||||
cell
|
||||
.removeClass( classes.sSortAsc +" "+classes.sSortDesc )
|
||||
.addClass( columns[ idx ] == 'asc' ?
|
||||
classes.sSortAsc : columns[ idx ] == 'desc' ?
|
||||
classes.sSortDesc :
|
||||
column.sSortingClass
|
||||
);
|
||||
|
||||
cell
|
||||
.find( 'span' )
|
||||
.removeClass(
|
||||
classes.sSortJUIAsc +" "+
|
||||
classes.sSortJUIDesc +" "+
|
||||
classes.sSortJUI +" "+
|
||||
classes.sSortJUIAscAllowed +" "+
|
||||
classes.sSortJUIDescAllowed
|
||||
)
|
||||
.addClass( columns[ idx ] == 'asc' ?
|
||||
classes.sSortJUIAsc : columns[ idx ] == 'desc' ?
|
||||
classes.sSortJUIDesc :
|
||||
column.sSortingClassJUI
|
||||
);
|
||||
} );
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
Loading…
x
Reference in New Issue
Block a user