使用 jQuery DataTables，如何使鼠标光标在可排序的列标题上切换？

Question

In DataTables examples , I see that the mouse cursor changes to indicate a link when hovering above sortable column headers. However, I do not get the same effect in my own project. I configure DataTables like so (with theming by jQuery UI ThemeRoller):

$('#build-table').dataTable({
    'aaSorting': [[1, 'desc'], [0, 'asc'], [2, 'asc']],
    'bJQueryUI': true,
    });

How do I get the mouse cursor behaviour, when hovering above sortable column headers, of the DataTables demos?

EDIT

I know it's doable with CSS, but wondering if there's anything out of the box as the DataTable demos all work like this.

Answer 1

I'm not familiar with dataTable() specifically, but the easiest way is to give the sortable columns a class and use the CSS cursor:pointer; property to make the mouse indicate it is clickable.

Answer 2

The datatables demos all use demo_table.css and this rule:

table.display thead th {
    padding: 3px 18px 3px 10px;
    border-bottom: 1px solid black;
    font-weight: bold;
    cursor: pointer; /*This is what you want*/
    * cursor: hand;
}

Answer 3

Add following as CSS and you are good to go.

.sorting {
    cursor:pointer;
}
.sorting_asc {
    cursor:pointer;
}
.sorting_desc {
    cursor:pointer;
}