Sort icons not displaying

DevilsGrave

My datatable is not displaying the sort icons correctly

I have the following js and css files

jquery-2.0.3.js
jquery.dataTables.1.12.1.min.js

dataTables.bootstrap4.1.12.1.min.css
jquery.dataTables.1.12.1.min.css

And I also downloaded the images for the sort icons

And in my Global.asax.cs file I have this code to include these files
dynamic jsBinders = new ScriptBundle("~/bundle/js")
.Include("~/scripts/jquery-2.0.3.js")
.Include("~/scripts/jquery-ui-1.10.2.js")
.Include("~/scripts/jquery.dataTables.1.12.1.min.js");

BundleTable.Bundles.Add(new StyleBundle("~/bundle/css")
     .Include("~/Styles/*.css"));

What am I missing here?

Thanks

DevilsGrave

I also added these to my datatables css file

table.dataTable thead .sorting_asc {
    background-image: url("images/sort_asc.png")
}

table.dataTable thead .sorting_desc {
    background-image: url("images/sort_desc.png")
}

table.dataTable thead .sorting {
    background-image: url("images/sort_both.png")
}

table.dataTable thead .sorting_asc_disabled {
    background-image: url("images/sort_asc_disabled.png")
}

table.dataTable thead .sorting_desc_disabled {
    background-image: url("images/sort_desc_disabled.png")
}

kthorngren

Looks like you aren't using the Datatable BS 4styling integration files. See the Styling docs for details. Best practice is to use the Download Builder to get the proper files for the style framework being used.

Kevin

DevilsGrave

I am still unable to get those icons to show up. What should I download from the package? Can I not reference the image files directly in the css??

allan

Are you able to give us a link to our page? I might be able to say then why the CSS isn't being picked up. That said, our Bootstrap 4 styling integration doesn't actually use those files. You also don't want to use both jquery.dataTables.css and dataTables.bootstrap4.css - they conflict.

As Kevin says, use the download builder to get the files that you need for your styling option.

Allan