javascript - With jQuery DataTables, how do I make the mouse cursor change over sortable column headers? - Stack Overflow

admin管理员组

文章数量:1302869

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.

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.

• javascript
• jquery
• datatables

Share Improve this question Follow edited Aug 26, 2011 at 14:07 aknuds1 asked Aug 26, 2011 at 13:58 aknuds1aknuds1 68.1k6969 gold badges206206 silver badges320320 bronze badges 1

• Using CSS, for example: cursor: pointer; – Prisoner ZERO Commented Aug 26, 2011 at 14:03

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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.

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;
}

Add following as CSS and you are good to go.

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

本文标签：