Bootstrap 2's glyphicons

periklis

Hello,
I have successfully incorporated datatables with twitter bootstrap 1.4 and now 2.0 (thanks to datatable's excellent documentation!). I would now like to use bootstrap's glyphicons for the asc/desc sorting indicator (up/down arrows). To do this, I need to place a on the table's . Is there an easy way to achieve this?

Thanks in advance

allan

From the bootstrap documentation my understanding is that the should be mandatory, but I wasn't actually able to get it working in a TH element. Currently DataTables as an alternative markup option that will inject a SPAN tag for sort icons, which is the bJQueryUI option, so that could potentially be used for it, but there isn't a direct option to use I tags in the header at the moment.

Allan

periklis

Thanks for the fast response allan. I'll post here if I come up with any workaround

richardp

Instead of using Glyphicons for the sorting indicators, I copied Bootstrap's caret (as per the dropdown buttons). Here's a summary of what I did...

HTML
Use the following when creating table headers.
[code]





Column Title

[/code]

JavaScript
Adjust the sorting styles for DataTables.
[code]
$.extend($.fn.dataTable.ext.oStdClasses, {
sSortAsc: 'sort sort-up',
sSortDesc: 'sort sort-down',
sSortable: 'sort',
sSortableAsc: 'sort sort-up',
sSortableDesc: 'sort sort-down',
sSortableNone: 'sort sort-none'
});
[/code]

CSS/LESS
This is the extra LESS you will need.
[code]
table.dataTable {
thead {
th.sort {
position: relative;
padding-right: 16px;
cursor: pointer;
.sort {
position: absolute;
right: 4px;
top: 50%;
height: 100%;
margin-top: -5px;
.opacity(20);
.transition(opacity .25s linear);
.sort-up,
.sort-down {
display: block;
width: 0;
height: 0;
vertical-align: top;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
content: "";
}
.sort-up {
border-bottom: 4px solid @black;
margin-bottom: 2px;
}
.sort-down {
border-top: 4px solid @black;
margin-top: 2px;
}
}
&.sort-none {
cursor: default;
.sort {
display: none;
}
}
&.sort-up,
&.sort-down {
.sort {
.opacity(60);
}
}
&.sort-up {
.sort-down {
.invisible;
}
}
&.sort-down {
.sort-up {
.invisible;
}
}
&:hover {
.sort {
.opacity(100);
}
}
}
}
}
[/code]

jquery.dataTables.js
A minor change to make to the DataTables source. This prevents DataTables overwriting your element if it is different from the column's sTitle parameter. There are two options here: apply this code change or don't use the sTitle parameter. However, if you go with the latter, the 's aria-label attribute will contain the HTML you set above as well as the actual title text. (Allan: perhaps you could roll one of these changes into your next version.)
This code resides on lines 1068 to 1072 of 1.9.0 in the _fnBuildHead function.
[code]
/* Set the title of the column if it is user defined (not what was auto detected) */
if (!nTh.innerHTML.indexOf(oSettings.aoColumns[i].sTitle)) // this line was changed
{
nTh.innerHTML = oSettings.aoColumns[i].sTitle;
}
[/code]

allan

Thanks very much for sharing this with us - nice one!

> the HTML you set above as well as the actual title text

heh - great timing! I actually just committed a change to strip the HTML from the aria-label attribute. It is in the 1.9.1.dev nightly now and will be in 1.9.1 when released (not too far away).

Thanks,
Allan

richardp

Allan,

[quote]I actually just committed a change to strip the HTML from the aria-label attribute.[/quote]

1.9.1 appears to strip HTML ok but it doesn't strip excess whitespace. Perhaps you could $.trim() the string after stripping HTML? This also affects other things like ColVis, which will also have the extra whitespace in its column titles.

I think for now I'll just stick to using my indexof() change above so it can keep using the sTitle I provide without overwriting the table sorting divs.