Working with Datatables and RevealJS - javascript

The first issue I’m having is that I tried to format my code to be clean and easy to read but when I did and went through the sides in my browser it didn’t format and made it misaligned so I worked with it to make it look aligned by then in the actual HTML file it looks unprofessional and hard to read. Why is this happening?
The second issue I’m having is with the actual data tables plugin itself is that when I have the HTML table to display the table rendered with the plugin it cuts a lot off and I tried applying a class to the table and modifying the height and width of the table but its not adjusting per my css rules.
And the last issue I’m having is that with my table HTML of the table to explain how it should be written it applies an ID to the table that shouldn’t be done until after rendering. Not sure why this is.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Introduction of Datatables</title>
<meta name="author" content="">
<meta name="description" content="Creating a project to introduce the use of the Datatables jQuery plugin.">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/league.css" id="theme">
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match(/print-pdf/gi) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
<style>
#table-container {
width: 200px;
}
</style>
</head>
<body>
<div class="reveal container-fluid">
<div class="slides">
<section>
<h1>Datatables</h1>
<p>jQuery Plugin for HTML tables</p>
<p>By: Me</p>
</section>
<section>
<h2>Uses For Datatables</h2>
<ul>
<li>Assists with paginating many rows of tabular data.</li>
<li>Can manipulate columns and rows via modifications with passed parameters</li>
<li>Can work with backend data via a API in the form of JSON</li>
<li>Can sort and search through data for results</li>
<li><strong>THEMEABLE</strong></li>
</ul>
</section>
<section>
<pre><code data-trim>
<table class="datatable table table-bordered">
<thead>
<th>ID</th>
<th>Username</th>
<th>Email Address</th>
<th>Role</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>smorrow</td>
<td>smorrow#example.com</td>
<td>Owner</td>
</tr>
<tr>
<td>2</td>
<td>jstevens</td>
<td>jstevens#example.com</td>
<td>Editor</td>
</tr>
<tr>
<td>3</td>
<td>ksmith</td>
<td>ksmith#example.com</td>
<td>Basic User</td>
</tr>
<tr>
<td>4</td>
<td>wjones</td>
<td>wjones#example.com</td>
<td>Basic User</td>
</tr>
<tr>
<td>4</td>
<td>jcoonts</td>
<td>jcoonts#example.com</td>
<td>Administrator</td>
</tr>
<tr>
<td>5</td>
<td>rsimmons</td>
<td>rsimmons#example.com</td>
<td>Administrator</td>
</tr>
</tbody>
</table>
</code></pre>
</section>
<section>
<h2>Javascript Code</h2>
<pre><code data-trim>
<script>
var dataTable = $('.datatable').dataTable();
</script>
</code></pre>
</section>
<section>
<div id="table-container">
<table class="datatable table table-bordered">
<thead>
<th>ID</th>
<th>Username</th>
<th>Email Address</th>
<th>Role</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>smorrow</td>
<td>smorrow#example.com</td>
<td>Owner</td>
</tr>
<tr>
<td>2</td>
<td>jstevens</td>
<td>jstevens#example.com</td>
<td>Editor</td>
</tr>
<tr>
<td>3</td>
<td>ksmith</td>
<td>ksmith#example.com</td>
<td>Basic User</td>
</tr>
<tr>
<td>4</td>
<td>wjones</td>
<td>wjones#example.com</td>
<td>Basic User</td>
</tr>
<tr>
<td>4</td>
<td>jcoonts</td>
<td>jcoonts#example.com</td>
<td>Administrator</td>
</tr>
<tr>
<td>5</td>
<td>rsimmons</td>
<td>rsimmons#example.com</td>
<td>Administrator</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
viewDistance: 1,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{
src: 'lib/js/classList.js', condition: function () {
return !document.body.classList;
}
},
{
src: 'plugin/markdown/marked.js', condition: function () {
return !!document.querySelector('[data-markdown]');
}
},
{
src: 'plugin/markdown/markdown.js', condition: function () {
return !!document.querySelector('[data-markdown]');
}
},
{
src: 'plugin/highlight/highlight.js', async: true, condition: function () {
return !!document.querySelector('pre code');
}, callback: function () {
hljs.initHighlightingOnLoad();
}
},
{src: 'plugin/notes/notes.js', async: true}
]
});
</script>
<script>
var datatTable = $('.datatable').dataTable();
</script>
</body>
</html>
Here's a screenshot of what I'm looking at.
https://www.dropbox.com/s/p8luug2gsytnwno/Screenshot%202015-01-27%2012.50.43.png?dl=0

Related

Learning how to code: Why is my code not working JavaScript/CSS?

I'm trying to toggle CSS stylesheets by clicking one of two buttons. However, my code isn't working. Not sure what I'm missing. I'm working with a separate index.html that I cannot modify and a separate js file.
Here is my code below. I'm getting a TypeError: cannot read properties of null (reading addEventListener'.
Index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Assignment 4</title> <link id="styleSheet" href="styleA.css" rel="stylesheet" type="text/css">
<script src="styler.js"></script>
</head>
<body>
<form>
<button id="styleA" type="submit">Use styleA</button>
<button id="styleB" type="submit">Use styleB</button>
</form>
<article>
<h1>OSU Beaver Store - CS 290 Version</h1>
<p>Catering to All Your Beaver-Gear Needs</p>
<div>
<table>
<caption>Our Most Popular Items</caption>
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Orange Beaver Polo</td>
<td>49.00</td>
</tr>
<tr>
<td>3 Pack Beaver Socks</td>
<td>28.00</td>
</tr>
<tr>
<td>Orange Beavers Hat</td>
<td>32.50</td>
</tr>
<tr>
<td>Waterproof Jacket</td>
<td>65.55</td>
</tr>
</tbody>
</table>
</div>
<div id="beaver-store">
Visit The Official Beaver Store
</div>
</article>
<div>
<span id="o">O</span><span id="s">S</span><span id ="u">U</span>
</div>
</body>
</html>
JS File:
"use strict";
let aLink= document.querySelector("link");
const aButton = document.getElementById("styleA");
const bButton = document.getElementById("styleB");
function changeToA(){
preventDefault();
aLink.setAttribute('href', 'styleB.css');
}
function changeToB(){
aLink.setAttribute('href', 'styleB.css');
}
aButton.addEventListener("click",changeToA);
bButton.addEventListener("click",changeToB);
***Update:
I figured it out. Needed to have another event listener for DOMloadedcontent.

Datatables - how to prevent word wrap in length menu and search dialog

I have implemented Datatables into my Spring MVC, Java, Bootstrap 5, Thymeleaf project and the results are great. The only issue is a cosmetic one - the text is wrapping in the length menu and search sections. This can be seen at the top of the attached image where "Show 10 entries" is split across 3 lines and the Search table and box are split over 2 lines.
I am using the latest versions of jquery.dataTables.min.css, jquery.dataTables.min.js and dataTables.bootstrap5.min.js with no custom configuration: -
$(document).ready(function () {
$('table.display').DataTable();
});
Here is an HTML snippet with one row of data:
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Java Documentum Services</title>
<link rel="stylesheet" href="/assets/jquery/jquery.dataTables.min.css"/>
<link rel="stylesheet" href="/assets/bootstrap/bootstrap.min.css"/>
<link rel="stylesheet" href="/assets/dropzonejs/dropzone.css"/>
</head>
<body>
<div class="container pt-3 pb-3">
<table id="search-results"
class="display"
style="width:100%">
<thead>
<tr>
<th>Filename</th>
<th>Test</th>
<th>Case Id</th>
<th>Upload Time</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span>download.pdf</span>
</td>
<td>
<span>JH-06062022-01</span>
</td>
<td>
<span>test-case-12344444</span>
</td>
<td>
<span>2022-07-22 11:03 GMT</span>
</td>
<td>
<!--Actions button-->
<!--Download button-->
<!--Delete button-->
</td>
</tr>
</tbody>
</table>
<script src="/assets/jquery/jquery-3.5.1.js"></script>
<script src="/assets/jquery/jquery.dataTables.min.js"></script>
<script src="/assets/datatables/dataTables.bootstrap5.min.js"></script>
<script src="/assets/jds/dataTables.js"></script>
<script src="/assets/bootstrap/bootstrap.min.js"></script>
<script src="/assets/dropzonejs/dropzone.min.js"></script>
<script src="/assets/jds/dropzone.js"></script>
</body>
</html>
I can see that these two sections are defined in sLengthMenu and sSearch in the JavaScript code, so perhaps a code change could be an option, but it would be preferable if it could be fixed with a configuration change instead. I also wondered if perhaps there is a clash with one of the other CSS stylesheets or JavaScript libraries that I am using - these are visible in the sample HTML.

changing the text in a html table cell depending on value

$(function(){
$("tr").each(function(){
var col_val = $(this).find("td:eq(1)").text();
if (col_val == "open"){
$(this).addClass('table-primary'); //the selected class colors the row green//
} else if (col_val == "in progress"){
$(this).addClass('table-success'); //the selected class colors the row green//
} else {
$(this).addClass('table-secondary');
var col_edit = $(this).find("td:eq(0)");
// console.log("jes");
//console.log(col_edit);
// addClass('h1') is just for testing, if I selected the right cell -> this seems to work!!
$(col_edit).addClass('h1');
// PLEASE HELP HERE: Instead of a big h1 'Edit' in cell 3 i want to see nothing ('')
// these versions I tried:
$(col_edit).text = "";
$(col_edit).innerHTML = "";
$(col_edit).value = "";
$(col_edit).text = '';
$(col_edit).innerHTML = '';
$(col_edit).value = '';
$(col_edit).addClass('hidden');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<!-- UNIMPORTANT HEAD -->
<head th:fragment="header">
<meta charset="UTF-8" />
<title th:text="${title}">DiKuKa</title>
<link rel="shortcut icon" type="image/x-icon" href="images/dikuka.ico">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" th:href="#{/css/style.css}" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script th:src="#{/js/custom.js}"></script>
</head>
<!-- THE IMPORTANT TABLE: -->
<div class="table-responsive">
<table class="table table-hover">
<thead class="thead-light">
<tr>
<th scope="col"></th>
<th scope="col">status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Edit</td>
<td>open</td>
</tr>
<tr>
<td>Edit</td>
<td>in progress</td>
</tr>
<tr>
<td>Edit</td>
<td>closed</td>
</tr>
</tbody>
</table>
<br>
<hr>
</div>
<br>
https://jsfiddle.net/q5hn6d72/1/
I'm trying to delete the text in a table cell using javascript depending on the value in another cell.
The purpose is that you should not be able to click the link of the text in that cell anymore when the status value is equal to "closed".
Please try the fiddle, at the bottom of the Javascript I marked the different approached that I tried so far. I managed to select the right cell with col_edit, otherwise the cell wouldn't be shown as a h1.
Any tips are welcome!
screenshot of the actual project
Simply you can check 1 more condition for closed as
else if (col_val == "closed"){
$(this).find("td:eq(0)").html('');
When closed then remove text of td
$(function(){
$("tr").each(function(){
var col_val = $(this).find("td:eq(1)").text();
//console.log(col_val);
if (col_val == "open"){
$(this).addClass('table-primary'); //the selected class colors the row green//
} else if (col_val == "in progress"){
$(this).addClass('table-success'); //the selected class colors the row green//
} else if (col_val == "closed"){
$(this).find("td:eq(0)").html('');
} else {
$(this).addClass('table-secondary');
var col_edit = $(this).find("td:eq(0)");
console.log("jes");
// console.log(col_edit);
// addClass('h1') is just for testing, if I selected the right cell -> this seems to work!!
$(col_edit).addClass('h1');
// PLEASE HELP HERE: Instead of a big h1 'Edit' in cell 3 i want to see nothing ('')
// these versions I tried:
$(col_edit).text = "";
$(col_edit).innerHTML = "";
$(col_edit).value = "";
$(col_edit).text = '';
$(col_edit).innerHTML = '';
$(col_edit).value = '';
$(col_edit).addClass('hidden');
}
});
});
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<!-- UNIMPORTANT HEAD -->
<head th:fragment="header">
<meta charset="UTF-8" />
<title th:text="${title}">DiKuKa</title>
<link rel="shortcut icon" type="image/x-icon" href="images/dikuka.ico">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" th:href="#{/css/style.css}" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script th:src="#{/js/custom.js}"></script>
</head>
<!-- THE IMPORTANT TABLE: -->
<div class="table-responsive">
<table class="table table-hover">
<thead class="thead-light">
<tr>
<th scope="col"></th>
<th scope="col">status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Edit</td>
<td>open</td>
</tr>
<tr>
<td>Edit</td>
<td>in progress</td>
</tr>
<tr>
<td>Edit</td>
<td>closed</td>
</tr>
</tbody>
</table>
<br>
<hr>
</div>
<br>

Getting "Uncaught TypeError: $(...).dialog is not a function"

I have the following code and after pressing a button that invokes the $("#proxy_history_dialog").dialog({ line - I keep getting the error Uncaught TypeError: $(...).dialog is not a function.
I searched for a solution and most answers are pointing to jquery includes block. I tried to change jquery versions multiple times without any luck.
What am I missing out here?
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>
Optimize Proxies
| Upstream Commerce</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="/static/css/tables_style.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/v/dt/jq-2.2.3/dt-1.10.12/fh-3.1.2/datatables.min.css"/>
<script type="text/javascript"
src="https://cdn.datatables.net/v/dt/jq-2.2.3/dt-1.10.12/fh-3.1.2/datatables.min.js"></script>
<script type="text/javascript" src="/static/script/api_recs.js"></script>
<style type="text/css">
tfoot {
display: table-header-group;
}
</style>
</head>
<body>
<img id="loader" src="/static/img/loader_animation_large.gif"
style="
width:36px;
height:36px;
display: none;
position:absolute;
top:50%;
left:50%;
margin-top:-18px;
margin-left:-18px;"/>
<p>Logout | Home</p>
<div id="title">
<b style="font-size:200%" ;>Optimize proxies<br></b>
</div>
<div id="proxy_history_dialog" title="Proxy history" style="display:none;">
</div>
<table id='p_table-id' class="display" cellspacing="0" width="50%">
<thead>
<tr>
<th>Site name</th>
<th>Site id</th>
<th>Extraction rate</th>
<th>Proxy</th>
<th>Proxy duration</th>
<th>Proxy history</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Site name</th>
<th>Site id</th>
<th>Extraction rate</th>
<th>Proxy</th>
<th>Proxy duration</th>
<th>Proxy history</th>
</tr>
</tfoot>
<tbody>
<tr>
<td><span>hp</span></td>
<td><span>2198</span></td>
<td><span>95.2%</span></td>
<td><span>brazil</span></td>
<td><span>0 days</span></td>
<td>
<button id="2198" class="get-proxy-history">history</button>
</td>
</tr>
<tr>
<td><span>amazon_hp</span></td>
<td><span>2199</span></td>
<td><span>99.8%</span></td>
<td><span>all_std.proxymesh</span></td>
<td><span>422 days</span></td>
<td>
<button id="2199" class="get-proxy-history">history</button>
</td>
</tr>
<tr>
<td><span>bestonix</span></td>
<td><span>-104</span></td>
<td><span>93.3%</span></td>
<td><span>shader_us</span></td>
<td><span>225 days</span></td>
<td>
<button id="-104" class="get-proxy-history">history</button>
</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function () {
$(".get-proxy-history").click(function () {
var uri = "manage/optimize_proxies/get_proxy_history/" + $(this).attr("id") + "/";
var result = api_get(uri, false, 'POST');
$("#proxy_history_dialog").html(result[0]);
$("#proxy_history_dialog").dialog({
resizable: true,
width: "auto",
height: "auto",
autoResize: false,
modal: false,
draggable: true
});
});
///////////////////////////////////////////////////////////////////
// Setup column search - add a text input to each footer cell
$('#p_table-id tfoot th').each(function () {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});
// DataTable
var table = $('#p_table-id').DataTable({
dom: 'l Brtip',
"aLengthMenu": [
[20, 50, 100, -1],
[20, 50, 100, "All"]],
"buttons": [],
paging: false,
fixedHeader: true
});
// Apply the search
table.columns().every(function () {
var that = this;
$('input', this.footer()).on('keyup change', function () {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
});
});
</script>
</body>
</html>
put line
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
after
<script type="text/javascript" src="/static/script/api_recs.js"></script>
like:
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="/static/css/tables_style.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-2.2.3/dt-1.10.12/fh-3.1.2/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-2.2.3/dt-1.10.12/fh-3.1.2/datatables.min.js"></script>
<script type="text/javascript" src="/static/script/api_recs.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
note:
if this way does not work then chech api_recs.js
It seems, the error is happening with your DataTables inclusion/version. I have tried with jQuery version 1.8.0 and DataTables version 1.10.1 and everything seems to be working fine for me.
Working Fiddle: https://jsfiddle.net/mnexvzgx/
Note: I have commented out your API call and replaced the result with a dummy value.
Hope this helps!

dataTables fixedColumns part is not working

Between <head> tags:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.2.1/css/fixedColumns.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.2.1/js/dataTables.fixedColumns.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
Script:
<script>
$(document).ready(function() {
var table = $('#example').DataTable( {
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: true,
fixedColumns: {
leftColumns: 2
}
} );
} );
</script>
Table (it has more than 2 rows):
<table id="example" class="stripe row-border order-column" cellspacing="0" width="100%">
<thead>
<tr>
<th>..</th>
<th>..</th>
<th>..</th>
<th>..</th>
<th>..</th>
<th>..</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
CSS:
/* Ensure that the demo table scrolls */
th, td { white-space: nowrap; }
div.dataTables_wrapper {
width: 100%;
margin: 0 auto;
}
Table is working but table has no fixed columns. FixedColumns part is not working.
The issue is the libraries are not in right order. Your scripts etc should be like this:
<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.2.1/js/dataTables.fixedColumns.min.js"></script>
So basically you just need to make sure to load the main datatables js file before fixedcolumns :)

Categories