Styling the header sort indicators

writes_on

Hi all,

I'm using dataTables v1.6.1 with jQuery 1.4.1 and need to know how to style the little sorting icons in the column headers. Here is my table setup code:

[code]
$("#report_table").dataTable(
{
"iDisplayLength" : 50,
"bJQueryUI" : true,
"sPaginationType" : "full_numbers",
"bAutoWidth" : false,
"aoColumns" : [
{"sWidth" : "10%"}, // created
{"sWidth" : "5%"}, // agent
{"sWidth" : "10%"}, // reason
{"sWidth" : "40%"}, // comment
{"sWidth" : "10%"}, // coupon code
{"sWidth" : "10%"}, // coupon type
{"sWidth" : "10%"}, // amount credited
{"sWidth" : "5%"}, // shipping method
{"sWidth" : "5%"} // delete coupon
]
}
);
[/code]
When this table is displayed on the page the formatting works out (for the most part), but the sorting icons are spaced 2/3 characters from the table cell border. Plus, if the column is to small, they appear on top of the column header text. How can I style these to move them around?

Thanks in advance!
Doug Farrell

allan

Hi Doug,

If you poke around in Firebug you'll see the classes assigned to the icon element, and you can just add whatever styles you need to get the correct layout based on those selectors. You can add your own classes as well if you want: http://datatables.net/styling/custom_classes

Allan

writes_on

Hi Allan,

Thanks for the reply, as always, you've helped me a lot!

Doug