jQuery dataTable doesn't show sort icon

Question

I am trying to use a jQuery dataTable plugin. The problem is that the sort icon (this arrow which point in which direction data is actual sorted) is not displayed.

My code looks as follows:

$('#example').dataTable(
{
    "bPaginate": false,
    "bFilter": false,
    "oLanguage": { "sInfo": ""}        
}
);

and Html:

<table class="surfClass" cellspacing="1" id="example">

<thead>
<tr>
    <th width="120px">Name</th>
    <th width="120px">The hourly rate (points)</th>
    <th>Levels of referrals</th>
    <th>bonuses</th>
    <th width="70px">Payout minimum</th>
</tr>
</thead>

Answer 1

Everytime I have had that problem with dataTables it stems from a javascript error.
Also, you could try adding

"bSort": true,

Answer 2

Datatables uses a sprite for the icons you want to use firebug in firefox click on net than all and look for anything showing up in red. Which would indicate that an asset is not being loaded. You are looking form something like this "/media/css/jui_themes/smoothness/images/ui-icons_888888_256x240.png".

I am assuming that the datatable plugin is being initialised and you are seeing everything else you would expect?

You may want to look at this http://debug.datatables.net/ which is a bookmarklet that helps debugging this plugin.

Answer 3

I just UPGRADED JQuery datatable, now works fine

Answer 4

I had this problem, I found because I had copied the CDN script to my local machine it wasn't referencing the images correctly anymore as @Matt2012 pointed out. So my solution was to updated the CSS file to look for those images where I want to put them, after I saved them also.

See this part:

table.dataTable thead .sorting { background: url('/Content/images/sort_both.png') no-repeat center right; }
table.dataTable thead .sorting_asc { background: url('/Content/images/sort_asc.png') no-repeat center right; }
table.dataTable thead .sorting_desc { background: url('/Content/images/sort_desc.png') no-repeat center right; }

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

Answer 5

If you use Bootstrap V4, you should include 2 additional css:

<link href="/bower_components/font-awesome/css/font-awesome.css"  rel="stylesheet">
<link href="/bower_components/datatables.net-plugins/integration/font-awesome/dataTables.fontAwesome.css"  rel="stylesheet">

for more information visit this link

Answer 6

I had this problem and it took me an hour to discover that I was not linking to a required stylesheet. In my case, I had:

<link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/minidatatables-bootstrap.css'}"/>

but I also needed to add:

<link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/datatables-bootstrap.css'}"/>

for the sort icons to show up. This is likely a bootstrap-only solution, but if you're having this problem, you might make sure you've got the right stylesheets linked.