Multiple sort icons using JQueryUI

wcmanes

testing 1.10 beta, I'm seeing multiple sort icons in the header or for the currently sorted column when I use jQuery UI. I see the same issue on this example page: http://next.datatables.net/examples/styling/jqueryUI.html

allan

It happens on that page because the default styling is also applied to the table as it is part of the site's base stylesheet. I've not quite figured out how to resolve that yet...

This example shows it correctly, since it isn't also loading the site stylesheet: http://next.datatables.net/manual/styling/jqueryui . Annoyingly that example doesn't have any sort icons :-(. I need to look into that...

Allan

Elfayer

I solved it using "renderer" : "bootstrap". see :
http://datatables.net/reference/option/renderer

pandurang

rendered: bootstrap or jquery didn't solve it for me. I had got dataTable this through the sb-admin-2 template, so I was also getting a few missing image errors (by default they don't put in the jqueryUI images required).

When I fixed the missing image issue, I saw this double arrow or double caret issue.

I finally fixed it by modifying the dataTables.bootstrap.css and commenting the following lines:

table.dataTable thead .sorting {
/background: url('../plugins/dataTables-images/sort_both.png') no-repeat center right;/
}

table.dataTable thead .sorting_asc {
/background: url('../plugins/dataTables-images/sort_asc.png') no-repeat center right;/
}

table.dataTable thead .sorting_desc {
/background: url('../plugins/dataTables-images/sort_desc.png') no-repeat center right;/
}

table.dataTable thead .sorting_asc_disabled {
/background: url('../plugins/dataTables-images/sort_asc_disabled.png') no-repeat center right;/
}

table.dataTable thead .sorting_desc_disabled {
/background: url('../plugins/dataTables-images/sort_desc_disabled.png') no-repeat center right;/
}

You can, of course, just delete the images as well - but I'd prefer not to get those ugly red errors in the console.

bmercier

I had this issue and also solved it using renderer;
renderer: { "header": "bootstrap" },

Thanks Elfayer