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>
</table>

Answer 1

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 2

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.

Answer 3

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 4

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

"bSort": true,

Answer 5

If you are using BundleConfig, please add the following reference:

"~/Content/DataTables/css/dataTables.bootstrap4.css",

Answer 6

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 7

I fixed the problem by wrapping the table header text in a <div>:

<th><div>Date</div></th>

Answer 8

I had the problem too. Just use their own configurator to setup all the options you want form here https://datatables.net/download/ they will generate exactly the .js and .css files you need. You then can either download or use their own hosted CDN for both files

Answer 9

I just UPGRADED JQuery datatable, now works fine

Answer 10

I was with the same issue. After reading Jeremy's answer I got a link to a missing stylesheet, which was:

<link href="~/lib/datatables/media/css/dataTables.uikit.css" rel="stylesheet" />

Answer 11

I resolved this issue by adding below css and js reference with the help of Khaled's answer.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.24/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.24/datatables.min.js"></script>

Answer 12

It's simple,

Call the Datatables JS file and CSS file from your directory. Not from the CDN. Now open the basic example of the Datatables and inspect the icons. Open it in the another browser tab. Download the images and save it to your datatables directory. Note: See the inspect link where it was saved. You have to save those images like this. that's it.