Skip to content

Commit ba1021c

Browse files
author
dtbuild
committed
a0664009d791cea3a4c05e7f9cbc60df4c71fe88 New: columnTitleTag option which can be used to change the wrapper element type for the title / order display in the column header cell. It is span by default, and can be made a div using this option. This option is temporary and the default will be div for v3
https://datatables.net/forums/discussion/81582 Sync to source repo @a0664009d791cea3a4c05e7f9cbc60df4c71fe88
1 parent 7f2c13e commit ba1021c

6 files changed

Lines changed: 46 additions & 27 deletions

File tree

‎datatables.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,5 @@
1111
],
1212
"src-repo": "http://github.com/DataTables/DataTablesSrc",
1313
"last-tag": "2.3.5",
14-
"last-sync": "0edfb72ce5e8dcf9307b69e31fd3bb50350091d8"
14+
"last-sync": "a0664009d791cea3a4c05e7f9cbc60df4c71fe88"
1515
}

‎js/dataTables.js‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -247,6 +247,7 @@
247247
"orderHandler",
248248
"titleRow",
249249
"typeDetect",
250+
"columnTitleTag",
250251
[ "iCookieDuration", "iStateDuration" ], // backwards compat
251252
[ "oSearch", "oPreviousSearch" ],
252253
[ "aoSearchCols", "aoPreSearchCols" ],
@@ -3375,7 +3376,7 @@
33753376
colspan++;
33763377
}
33773378

3378-
var titleSpan = $('span.dt-column-title', cell);
3379+
var titleSpan = $('.dt-column-title', cell);
33793380

33803381
structure[row][column] = {
33813382
cell: cell,
@@ -4089,8 +4090,8 @@
40894090
}
40904091

40914092
// Wrap the column title so we can write to it in future
4092-
if ( $('span.dt-column-title', cell).length === 0) {
4093-
$('<span>')
4093+
if ( $('.dt-column-title', cell).length === 0) {
4094+
$(document.createElement(settings.columnTitleTag))
40944095
.addClass('dt-column-title')
40954096
.append(cell.childNodes)
40964097
.appendTo(cell);
@@ -4101,9 +4102,9 @@
41014102
isHeader &&
41024103
jqCell.filter(':not([data-dt-order=disable])').length !== 0 &&
41034104
jqCell.parent(':not([data-dt-order=disable])').length !== 0 &&
4104-
$('span.dt-column-order', cell).length === 0
4105+
$('.dt-column-order', cell).length === 0
41054106
) {
4106-
$('<span>')
4107+
$(document.createElement(settings.columnTitleTag))
41074108
.addClass('dt-column-order')
41084109
.appendTo(cell);
41094110
}
@@ -4112,7 +4113,7 @@
41124113
// layout for those elements
41134114
var headerFooter = isHeader ? 'header' : 'footer';
41144115

4115-
if ( $('span.dt-column-' + headerFooter, cell).length === 0) {
4116+
if ( $('div.dt-column-' + headerFooter, cell).length === 0) {
41164117
$('<div>')
41174118
.addClass('dt-column-' + headerFooter)
41184119
.append(cell.childNodes)
@@ -8784,7 +8785,7 @@
87848785
// Automatic - find the _last_ unique cell from the top that is not empty (last for
87858786
// backwards compatibility)
87868787
for (var i=0 ; i<header.length ; i++) {
8787-
if (header[i][column].unique && $('span.dt-column-title', header[i][column].cell).text()) {
8788+
if (header[i][column].unique && $('.dt-column-title', header[i][column].cell).text()) {
87888789
target = i;
87898790
}
87908791
}
@@ -9091,7 +9092,7 @@
90919092
title = undefined;
90929093
}
90939094

9094-
var span = $('span.dt-column-title', this.column(column).header(row));
9095+
var span = $('.dt-column-title', this.column(column).header(row));
90959096

90969097
if (title !== undefined) {
90979098
span.html(title);
@@ -10265,8 +10266,8 @@
1026510266

1026610267
// Needed for header and footer, so pulled into its own function
1026710268
function cleanHeader(node, className) {
10268-
$(node).find('span.dt-column-order').remove();
10269-
$(node).find('span.dt-column-title').each(function () {
10269+
$(node).find('.dt-column-order').remove();
10270+
$(node).find('.dt-column-title').each(function () {
1027010271
var title = $(this).html();
1027110272
$(this).parent().parent().append(title);
1027210273
$(this).remove();
@@ -11452,7 +11453,10 @@
1145211453
iDeferLoading: null,
1145311454

1145411455
/** Event listeners */
11455-
on: null
11456+
on: null,
11457+
11458+
/** Title wrapper element type */
11459+
columnTitleTag: 'span'
1145611460
};
1145711461

1145811462
_fnHungarianMap( DataTable.defaults );
@@ -12416,7 +12420,10 @@
1241612420
orderHandler: true,
1241712421

1241812422
/** Title row indicator */
12419-
titleRow: null
12423+
titleRow: null,
12424+
12425+
/** Title wrapper element type */
12426+
columnTitleTag: 'span'
1242012427
};
1242112428

1242212429
/**

‎js/dataTables.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/dataTables.min.mjs‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎js/dataTables.mjs‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -212,6 +212,7 @@ var DataTable = function ( selector, options )
212212
"orderHandler",
213213
"titleRow",
214214
"typeDetect",
215+
"columnTitleTag",
215216
[ "iCookieDuration", "iStateDuration" ], // backwards compat
216217
[ "oSearch", "oPreviousSearch" ],
217218
[ "aoSearchCols", "aoPreSearchCols" ],
@@ -3340,7 +3341,7 @@ function _fnHeaderLayout( settings, source, incColumns )
33403341
colspan++;
33413342
}
33423343

3343-
var titleSpan = $('span.dt-column-title', cell);
3344+
var titleSpan = $('.dt-column-title', cell);
33443345

33453346
structure[row][column] = {
33463347
cell: cell,
@@ -4054,8 +4055,8 @@ function _fnDetectHeader ( settings, thead, write )
40544055
}
40554056

40564057
// Wrap the column title so we can write to it in future
4057-
if ( $('span.dt-column-title', cell).length === 0) {
4058-
$('<span>')
4058+
if ( $('.dt-column-title', cell).length === 0) {
4059+
$(document.createElement(settings.columnTitleTag))
40594060
.addClass('dt-column-title')
40604061
.append(cell.childNodes)
40614062
.appendTo(cell);
@@ -4066,9 +4067,9 @@ function _fnDetectHeader ( settings, thead, write )
40664067
isHeader &&
40674068
jqCell.filter(':not([data-dt-order=disable])').length !== 0 &&
40684069
jqCell.parent(':not([data-dt-order=disable])').length !== 0 &&
4069-
$('span.dt-column-order', cell).length === 0
4070+
$('.dt-column-order', cell).length === 0
40704071
) {
4071-
$('<span>')
4072+
$(document.createElement(settings.columnTitleTag))
40724073
.addClass('dt-column-order')
40734074
.appendTo(cell);
40744075
}
@@ -4077,7 +4078,7 @@ function _fnDetectHeader ( settings, thead, write )
40774078
// layout for those elements
40784079
var headerFooter = isHeader ? 'header' : 'footer';
40794080

4080-
if ( $('span.dt-column-' + headerFooter, cell).length === 0) {
4081+
if ( $('div.dt-column-' + headerFooter, cell).length === 0) {
40814082
$('<div>')
40824083
.addClass('dt-column-' + headerFooter)
40834084
.append(cell.childNodes)
@@ -8749,7 +8750,7 @@ var __column_header = function ( settings, column, row ) {
87498750
// Automatic - find the _last_ unique cell from the top that is not empty (last for
87508751
// backwards compatibility)
87518752
for (var i=0 ; i<header.length ; i++) {
8752-
if (header[i][column].unique && $('span.dt-column-title', header[i][column].cell).text()) {
8753+
if (header[i][column].unique && $('.dt-column-title', header[i][column].cell).text()) {
87538754
target = i;
87548755
}
87558756
}
@@ -9056,7 +9057,7 @@ _api_registerPlural( 'columns().titles()', 'column().title()', function (title,
90569057
title = undefined;
90579058
}
90589059

9059-
var span = $('span.dt-column-title', this.column(column).header(row));
9060+
var span = $('.dt-column-title', this.column(column).header(row));
90609061

90619062
if (title !== undefined) {
90629063
span.html(title);
@@ -10230,8 +10231,8 @@ _api_register( 'i18n()', function ( token, def, plural ) {
1023010231

1023110232
// Needed for header and footer, so pulled into its own function
1023210233
function cleanHeader(node, className) {
10233-
$(node).find('span.dt-column-order').remove();
10234-
$(node).find('span.dt-column-title').each(function () {
10234+
$(node).find('.dt-column-order').remove();
10235+
$(node).find('.dt-column-title').each(function () {
1023510236
var title = $(this).html();
1023610237
$(this).parent().parent().append(title);
1023710238
$(this).remove();
@@ -11417,7 +11418,10 @@ DataTable.defaults = {
1141711418
iDeferLoading: null,
1141811419

1141911420
/** Event listeners */
11420-
on: null
11421+
on: null,
11422+
11423+
/** Title wrapper element type */
11424+
columnTitleTag: 'span'
1142111425
};
1142211426

1142311427
_fnHungarianMap( DataTable.defaults );
@@ -12381,7 +12385,10 @@ DataTable.models.oSettings = {
1238112385
orderHandler: true,
1238212386

1238312387
/** Title row indicator */
12384-
titleRow: null
12388+
titleRow: null,
12389+
12390+
/** Title wrapper element type */
12391+
columnTitleTag: 'span'
1238512392
};
1238612393

1238712394
/**

‎types/types.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -338,6 +338,11 @@ export interface Config {
338338
*/
339339
columnDefs?: ConfigColumnDefs[];
340340

341+
/**
342+
* HTML element to use for the title elements (including order indicator)
343+
*/
344+
columnTitleTag?: string;
345+
341346
/**
342347
* Data to use as the display data for the table.
343348
*/

0 commit comments

Comments
 (0)