1
0
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:
Allan Jardine 2013-06-22 11:12:40 +01:00
parent 81a76059ae
commit 01444af1a6
7 changed files with 108 additions and 106 deletions

View File

@ -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;

View File

@ -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
{

View File

@ -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;

View File

@ -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

View File

@ -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) );
}
}

View File

@ -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._;
}

View 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
);
} );
}
}
} );