Is there a way to activate sorting icons in bootstrap datatables?

My attempt to replicate the datatable from this template is not working as expected.

I can't seem to get the up and down icons for sorting to show up. I've followed all the instructions but they are still missing...

  $(function () {
    $('#example1').DataTable()
    $('#example2').DataTable({
      'paging'      : true,
      'lengthChange': false,
      'searching'   : false,
      'ordering'    : true,
      'info'        : true,
      'autoWidth'   : false
    })
  })
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 2 | Data Tables</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bower_components/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bower_components/Ionicons/css/ionicons.min.css">
  <!-- DataTables -->
  <link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/dist/css/AdminLTE.min.css">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/dist/css/skins/_all-skins.min.css">


  <!-- Google Font -->
  <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
...
    
<!-- ./wrapper -->

<!-- jQuery 3 -->
<script src="https://adminlte.io/themes/AdminLTE/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- DataTables -->
<script src="https://adminlte.io/themes/AdminLTE/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="https://adminlte.io/themes/AdminLTE/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="https://adminlte.io/themes/AdminLTE/bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="https://adminlte.io/themes/AdminLTE/dist/js/adminlte.min.js"></script>

jquerycsstemplatesdatatablesicons

Answer №1

Encountering an issue with linking to the font necessary for displaying the arrow icons for "up & down".

The access to the Font at '' from origin 'null' has been blocked due to the CORS policy restriction: No 'Access-Control-Allow-Origin' header is present on the requested resource. As a result, origin 'null' cannot be granted access.

To resolve this, you can download the font file from here and then include it in your project. This should enable proper functionality.

Edit: Instead of directly downloading the font file, consider utilizing Bootstrap V.3 which offers support for glyphicon.

Note: glyphicon is not supported in Bootstrap V4.

Add the following code snippets to your application

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="glyphicon glyphicon-sort">Test</div>
<br/>

<div class="glyphicon glyphicon-sort-by-attributes-alt">Test</div>


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm looking for a creative JavaScript prototype example that can help illustrate the concept of prototypes. Can someone share an interesting sample with me

I've been trying to wrap my head around prototypes, but I just can't seem to grasp their purpose and function. Is there anyone who can provide a straightforward example (such as a collegeStudent object) that will clarify the fundamentals of proto ...

javascriptjqueryprototype

What is the best way to have gulp monitor my sass file updates and generate a single css file?

I'm currently working on a project using ASP.NET MVC 5 framework and Visual Studio 2013. In order to automate the process of compiling my sass files and publishing them into a bundle.css file, I decided to utilize gulp. Here are the steps I took: I ...

cssnode.jssassgulp

Leveraging the power of PHP and AJAX for seamless transmission and reception of JSON data through a

I am in the process of creating a basic form that consists of a single text field and a submit button. The goal is to have the entered value posted to a $.getJSON method upon clicking the button, which will then retrieve a JSON response and display it on t ...

phpjqueryhtmlajaxjson

Issues with implementing Bootstrap 4 navbar on a Rails 5 application

I'm currently in the process of transitioning my static HTML/CSS/JS website to a Rails application. Using Bootstrap 4, I had all the functionality and CSS classes working perfectly on the static site. However, after the migration to the Ruby app, the ...

cssruby-on-railsnavbarbootstrap-4

Utilizing Angular-cli and Karma for seamless integration with jQuery

I have scoured the internet and cannot seem to find a solution for my current dilemma, despite it being a widely known issue... Upon running ng test, I am faced with an empty Karma browser: https://i.sstatic.net/VKIHh.jpg Here is what my console display ...

jqueryangularkarma-jasmine

Interactive live URL preview feature using AngularJS

Currently, I am developing a form and looking to display a preview of a URL similar to Facebook. As an AngularJS beginner, I lack sufficient knowledge in this area. If you are familiar with any Angular API or library that could assist me with this task, ...

jqueryangularjsfrontend

Tips for implementing a boundary on a multipart/form-data request when utilizing the jquery ajax FormData() function for handling several files

I'm facing an issue with my HTML form that needs to upload 3 parts to an existing REST API in a single request. The problem lies in setting a boundary on a FormData submission and I haven't been able to find relevant documentation for it. I&apos ...

jqueryajaxmultipartform-dataapache-commons-fileupload

Experience a seamless transition to the next section with just one scroll, allowing for a full

I've been attempting to create a smooth scroll effect to move to the next section using Javascript. However, I'm encountering issues with the window's top distance not being calculated correctly. I'm looking to have the full screen div ...

javascriptjqueryhtmlcss

Wrap every character in a span tag within this text

Extracting search strings from an object obj[item].coveredText and replacing each character with a span is what I aim to achieve. Currently, I can only replace the entire search string with a single span element. Any suggestions would be greatly appreciat ...

javascriptjquery

Issue with JQuery Event Listener on Canvas Subelement not functioning

I encountered an issue while trying to implement a custom crop rectangle on a canvas using JavaScript. I created a function that, when called, should add a child node to the existing canvas and use JQuery listeners to draw the rectangle. However, although ...

javascriptjqueryhtmlcanvas

Split domain names for images using a JQuery plugin

Recently, I came across an interesting article by Stoyan Stefanov on JS domain sharding for image files. After reading it, I felt inspired to enhance the concept and create something new. The script below is designed to go through all the images on a page ...

javascriptjqueryperformanceoptimizationjquery-plugins

Why is the toggle functioning properly?

After much trial and error, I finally got my toggle functionality working with the following code. I was surprised that toggling the width actually changed the display settings, but it did the trick! It's still a bit mysterious to me how it all works ...

jqueryhtmlcss

What is the process for choosing two levels of hierarchy within an HTML document?

Imagine this scenario... <div id="main"> <div><!--this one should be targeted--> <article>this one should not be targeted</article> </div> <div><!--this one should not be targeted--> <articl ...

jquery

Issue with displaying jQuery-UI images in Rails 3.2 production mode

Here is how my applications.css file looks: *= require_self *= require twitter/bootstrap *= require jquery_ui/jquery-ui-1.8.17.custom *= require_tree . The jQuery-UI images are stored in vendor/assets/stylesheets/jquery_ui/images. This setup functio ...

jqueryimagejquery-uiruby-on-rails-3.2

Does li behave like a separate element from p when it comes to pseudo-class assignments?

While experimenting with multiple pseudo-classes assignments involving p and li content, I made an interesting observation. It seems that adding an extra line of text can sometimes disrupt the pseudo-class assignments. For example, in the code provided be ...

htmlcss

The browser is capable of detecting multiple key presses using JavaScript

I'm attempting to trigger an action when certain keys are pressed simultaneously. The keys I need to detect are bltzr, but my browser only registers bltz without the final r. I've tried this on both Windows and OSX, but still can't capture ...

javascriptjqueryhtmlkeyboardkeypress

Verify the presence of an image

I have a code snippet that I use to refresh an image in the browser. However, I want to enhance this code so that it first checks if the image exists before displaying it. If the image does not exist, I want to display the previous version of the picture i ...

javascriptjqueryajax

Holding off on triggering a jQuery Ajax request until a function returns a value

I'm currently facing an issue where an Ajax request is not waiting for a function call to return before executing. The specific scenario involves calling getSelectedMessages to retrieve checkbox values and then passing these values in an array to the ...

javascriptajaxjqueryreturn

Is there a way in Jquery to retrieve the id of the clicked element and modify its name?

I am using a drag-and-drop website builder that utilizes HTML blocks, each with a unique ID. After dropping the blocks onto the canvas, I want to create a navigation menu that links to the IDs of each block. How can I retrieve the current ID of the block I ...

javascriptjqueryhtml

AJAX: Automatically refresh load() function if there is an error after a specific number of

When using the load() function to retrieve information from a file, it works perfectly but I want to implement a feature where the request is automatically reloaded after a certain amount of time. So far, I have tried the following approach: var tick = fu ...

jqueryajaxreload