The functionality of DataTables is not supported on Internet Explorer versions 8 and below

My current setup involves using DataTables to present data in a tabular format with pagination and sorting functionalities. While this is working smoothly across all browsers, I have encountered an issue specifically in IE versions 8 and below. According to the documentation available here, it should be compatible from IE-6 onwards.

To test compatibility, I simply used the F12 key to switch browser versions. However, I am unsure if this method provides accurate results. Have any of you experienced a similar problem? I am utilizing the following CDNs. Please advise if this approach is effective for testing Datatables on different IE versions.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.css">  
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/plug-ins/1.10.15/pagination/input.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Thank you

Answer №1

This issue is related to jQuery, not dataTables. Try downgrading your jQuery version from 3.2.1 to 1.2.x or earlier, and it should resolve the problem.

The current jQuery version (3.2.1) only supports IE 9+. Versions 6-8 were dropped in 2.x.

Personally, I stick with 1.9.1 for all my projects. I haven't encountered issues with older browsers, mobile devices, or tablets when using this version along with the latest dataTables and Angular 1.x. Unless you have specific reasons for needing jQuery 2.x or 3.x, 1.9.1 works just as well.

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

Delete the hash symbol from the current page's URL using window.location.hash

I am trying to figure out how to remove the "#" symbol from my URL, so instead of example.com/#sub-page-title, I want it to be example.com/sub-page-title. Currently, I have used substr(31) to eliminate a repetitive URL, where 31 is the length of the entir ...

Issues with Google Analytics Event Tracker Inconsistent Performance

I am experiencing an issue with a Google Analytics event that is triggered when a user clicks on a form submission button to enroll in a course. The event uses data attributes within the button element. What's puzzling is that the event seems to be w ...

Expanding the width of the containing div using CSS

I have a main container with multiple smaller divs inside it. None of these small divs have specified widths. I want the black div to expand and fill up the entire space, stretching all the way to the ABC div on the right. This only needs to work in Chr ...

Update the variable obtained from the user input and insert it into a new container depending on the input value

In reference to my previous inquiries, I refrain from adding more details to avoid confusion since it already received numerous responses. While I can successfully retrieve input from a text field with the ID 'test' and display it in the 'r ...

Tips for incorporating multiple classes in Material UI by utilizing the classes props

When using the css-in-js technique to apply classes to a react component, how can I add multiple classes? Below is an example of the classes variable: const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap&apo ...

Tips for shifting the cursor slightly to the right within an Input field

I created a div with an input field inside. I set the input field to autofocus, so when the page loads, the cursor is automatically focused on the input field. However, the cursor is touching the border of the input field, making it hard to see clearly. ...

Expanding across the entire horizontal space, excluding any space allocated for

I've been on a quest to find a solution for my unique problem, but all my efforts have been in vain so far. Currently, I'm working on developing a mobile website and facing a challenge with the input boxes. Despite wanting them to take up the en ...

Tips for getting rid of the excess space surrounding an image within a div tag

Placing images inside bootstrap card divs within col divs is my current challenge <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"& ...

There has been an issue with parsing the JSON file due to an invalid character found at

I keep encountering a parse error whenever I attempt to send a post request to the server. $.post("../php/user_handler.php", formData, function(data) { var result = JSON.parse(data); if(result.status === 'error') { ...

Using jQuery to fill out a form using data from a JSON

I'm struggling with understanding jQuery... I want to populate a form inside a jQueryUI dialog box. Although I can retrieve the JSON data successfully, I am having difficulty referencing the data and setting the values in the form fields... Below are ...

After the initial submission, the Bootstrap placeholder for the Select Option is only displayed

I'm attempting to create a placeholder for my dropdown with multiple options using Angular and Bootstrap. However, it seems like I may be doing something incorrectly. I created an option for a placeholder such as please select and placed it at the top ...

HTML code causing an Ajax post request to return a null value

How can I send JSON data from HTML to PHP using the Ajax post method? I have looked at various resources like this and this but so far, I am only getting a null return value. Other similar questions have not been helpful either. HTML (jQuery Ajax): $(&apo ...

What is the best method for overlaying text on individual images in a slideshow?

Currently, I am delving into the world of jQuery, experimenting with various slideshows and attempting to incorporate text and effects. In my endeavors, I stumbled upon this codepen that served as an excellent template. However, when I tried adding text o ...

The collapsible tree nodes overlap one another in the D3.js visualization

I'm currently working on integrating a d3 code into Power BI for creating a collapsible tree structure. Each node in the tree is represented by a rectangular box, but I've run into an issue where nodes overlap when their size is large. Below is t ...

Using AJAX to send a POST request with the PHP $_FILES superglobal while preventing the default form submission with the onclick

Seeking to implement a photo upload form using an AJAX script that is currently in place. Currently, I have the html form with a file input field. Upon submission, there is an onclick event triggering "PostForm(); return false;" This action directs to a ...

Unable to substitute a value using the useState hook in React

Whenever I click a key, I attempt to update the value of a variable but it appears not to be working as intended. ↓ The current implementation is not effective and needs improvement import React, { useState, useEffect } from 'react'; const Li ...

AngularJS Treeview - Rearranging tree nodes

My journey with Angular is just beginning, and I managed to create a treeview following this example: jsfiddle.net/eu81273/8LWUc/18/ The data structure I've adopted looks like this: treeview1 = [ { roleName: "User ...

Body of the table spanning the entire width of the screen

Looking for a solution to create a responsive table layout where the thead stretches up to a specified div, while the tbody expands to fill the entire screen width. Is this achievable without using fixed values? https://i.stack.imgur.com/v2ZYx.png It is ...

Is it possible to update table cell content depending on selected option?

Displayed here is the select block: <form> <select id="select"> <option disabled selected value="choose"> CHOOSE </option> <option value="i2g" id="i ...

Experiencing difficulties in binding datatables using knockoutjs due to processing issues

I'm currently working on integrating jQuery DataTables with KnockoutJS. While the grid renders correctly, I encountered an error in the browser console. Can someone please assist me in resolving this issue and pointing out any mistakes I may have made ...