jQuery dataTable doesn't show sort icon

问题:

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>

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

回答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.

回答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.

回答4:

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

"bSort": true,

回答5:

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

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

回答6:

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

回答7:

I just UPGRADED JQuery datatable, now works fine

回答8:

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