jQuery DataTable Not a Function - javascript

I've done a lot of searching and everyone says it is caused by including the DataTable script before jQuery, or double-including jQuery.
However, this is not the case for my code.
I keep getting $(...).DataTable is not a function.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Employee Table with twitter bootstrap</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myTable').DataTable();
});
</script>
</head>
<body style="margin:20px auto">
<table id="myTable" class="table table-striped" >
<thead>
<tr>
<th>ENO</th>
<th>EMPName</th>
<th>Country</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Anusha</td>
<td>India</td>
<td>10000</td>
</tr>
<tr>
<td>002</td>
<td>Charles</td>
<td>United Kingdom</td>
<td>28000</td>
</tr>
<tr>
<td>003</td>
<td>Sravani</td>
<td>Australia</td>
<td>7000</td>
</tr>
<tr>
<td>004</td>
<td>Amar</td>
<td>India</td>
<td>18000</td>
</tr>
<tr>
<td>005</td>
<td>Lakshmi</td>
<td>India</td>
<td>12000</td>
</tr>
<tr>
<td>006</td>
<td>James</td>
<td>Canada</td>
<td>50000</td>
</tr>
<tr>
<td>007</td>
<td>Ronald</td>
<td>US</td>
<td>75000</td>
</tr>
<tr>
<td>008</td>
<td>Mike</td>
<td>Belgium</td>
<td>100000</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

https is secured connection.In your case you are using http in http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js which may be the source of the problem
$(document).ready(function() {
$('#myTable').DataTable();
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<body style="margin:20px auto">
<table id="myTable" class="table table-striped">
<thead>
<tr>
<th>ENO</th>
<th>EMPName</th>
<th>Country</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Anusha</td>
<td>India</td>
<td>10000</td>
</tr>
<tr>
<td>002</td>
<td>Charles</td>
<td>United Kingdom</td>
<td>28000</td>
</tr>
<tr>
<td>003</td>
<td>Sravani</td>
<td>Australia</td>
<td>7000</td>
</tr>
<tr>
<td>004</td>
<td>Amar</td>
<td>India</td>
<td>18000</td>
</tr>
<tr>
<td>005</td>
<td>Lakshmi</td>
<td>India</td>
<td>12000</td>
</tr>
<tr>
<td>006</td>
<td>James</td>
<td>Canada</td>
<td>50000</td>
</tr>
<tr>
<td>007</td>
<td>Ronald</td>
<td>US</td>
<td>75000</td>
</tr>
<tr>
<td>008</td>
<td>Mike</td>
<td>Belgium</td>
<td>100000</td>
</tr>
</tbody>
</table>
</div>

#Philip Tenn, I have checked the code with and without https. But I have no any issue with your code, its working fine.

You have a </div> at the end of your table that shouldn't be there, but otherwise your code works fine...
$(document).ready(function(){
$('#myTable').DataTable();
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Employee Table with twitter bootstrap</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
</head>
<body style="margin:20px auto">
<table id="myTable" class="table table-striped" >
<thead>
<tr>
<th>ENO</th>
<th>EMPName</th>
<th>Country</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Anusha</td>
<td>India</td>
<td>10000</td>
</tr>
<tr>
<td>002</td>
<td>Charles</td>
<td>United Kingdom</td>
<td>28000</td>
</tr>
<tr>
<td>003</td>
<td>Sravani</td>
<td>Australia</td>
<td>7000</td>
</tr>
<tr>
<td>004</td>
<td>Amar</td>
<td>India</td>
<td>18000</td>
</tr>
<tr>
<td>005</td>
<td>Lakshmi</td>
<td>India</td>
<td>12000</td>
</tr>
<tr>
<td>006</td>
<td>James</td>
<td>Canada</td>
<td>50000</td>
</tr>
<tr>
<td>007</td>
<td>Ronald</td>
<td>US</td>
<td>75000</td>
</tr>
<tr>
<td>008</td>
<td>Mike</td>
<td>Belgium</td>
<td>100000</td>
</tr>
</tbody>
</table>
</body>
</html>
Perhaps there is something else on your page that is interfering with it?

Related

How to make the bootstrap table header width align with the body width?

I have a bootstrap table and i have background color for table header. since i made the table width auto,the header width is smaller when compared to body width. I want the header width to be aligned with the body width.I have attached a plunker link attached here.
How to make the header and body width align?
https://plnkr.co/edit/yIvC4XnOuEj6qVJH9rW8?p=preview
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<table class="table table-striped" style=" width:auto!important;">
<thead>
<tr style="background-color:red">
<th>DETAILS</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
Thanks in advance!
If you want the header to be for multiple columns, add colspan="3"
The colspan attribute defines the number of columns a cell should
span.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<table class="table table-striped" style=" width:auto;">
<thead>
<tr style="background-color:red">
<th colspan="3">DETAILS</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
Add Class : "dt-responsive" for responsive behavior.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<table class="table table-striped dt-responsive" style="width:auto;">
<thead>
<tr style="background-color:red">
<th colspan="3">DETAILS</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
We can achieve it by using <caption> tag
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-striped"style=" width:auto!important;">
<caption style="background-color:red;text-align:center">Details</caption>
<thead>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

How to select a specific element with nested table in html using jquery

I have searched and tried some jquery selectors (e.g. :last) but I couldn't figure out which selector should I use. Should I use this also? The problem is, I want to add a row inside of nested <table>, and if I click add button, the only specific <table> can add a row inside it.Here's my example code:
index.html
=========================================================================
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
<th>Gender</th>
<th>My Items</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Name</td>
<td>30</td>
<td>My Address</td>
<td>Male</td>
<td>
<table>
<thead>
<tr>
<th>Brand</th>
<th>Quantity</th>
<th>Size</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Yamaha</td>
<td>30</td>
<td>Large</td>
<td>Black</td>
</tr>
</tbody>
</table>
<button id="AddItem">Add Item</button>
</td>
</tr>
</tbody>
</table>
<button id="AddCustomer">Add Customer</button>
If I clicked the Add Item, 1 row() added below the Yamaha Item.
If I clicked the Add Customer, 1 row() added below the Some Name.
myJS.js code:
=========================================================================
$("#addItem").on('click', function(e) {
$('tr:last').after("Added Row for Items.");
e.preventDefault();
});
<br>
$("#addCustomer").on('click', function(e) {
$('tr:last').after("Added Row for Customer.");
e.preventDefault();
});
I added <tfoot> for the tr.customer and table.cart and placed the buttons therein respectively. It needed classes and ids to make a complex task much easier.
SNIPPET
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>PO</title>
<style>
table,
td,
th {
border: 1px solid black;
}
</style>
</head>
<body>
<header>
<form id="panel">
</form>
</header>
<section id="I">
<table id='PO1' class="purchaseOrder">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
<th>Gender</th>
<th>Cart</th>
</tr>
</thead>
<tbody>
<tr id='C1' class='customer'>
<td>Some Name</td>
<td>30</td>
<td>My Address</td>
<td>Male</td>
<td>
<table class='cart'>
<thead>
<tr>
<th>Brand</th>
<th>Quantity</th>
<th>Size</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr id='item1' class='item'>
<td>Yamaha</td>
<td>30</td>
<td>Large</td>
<td>Black</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='3'></td>
<td>
<button class="addItem">Add Item</button>
</td>
</tr>
</tfoot>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='3'></td>
<td>
<button class="addCustomer">Add Customer</button>
</td>
</tr>
</tfoot>
</table>
</section>
<footer> </footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(".addItem").on('click', function(e) {
$(this).closest('table').find(".item:last").after('<tr class="item"><td>New item</td><td></td><td></td><td></td></tr>');
});
$(".addCustomer").on('click', function(e) {
var newCustomer = $('.customer:last').after('<tr class="customer"><td>New Customer</td><td></td><td></td><td></td></tr>');
var newCart = $('.cart:first').clone(true, true).wrap('td');
newCart.find('tbody').html("").html('<tr class="item"><td>New Item</td><td></td><td></td><td></td></tr>');
$('.customer:last').append(newCart);
e.preventDefault();
});
</script>
</body>
</html>
Give your tables unique ids.
For example:
<table id="customerTable"></table>
<table id="productTable"></table>
$("#addCustomer").on('click', function(e) {
$('#customerTable > tbody').append('<tr><td>New row</td></tr>');
e.preventDefault();
});
If you will use a loop from a data source and there will be more than two tables, you can use closest() or siblings() function to select that tables.
// note, use class instead of using id if there will be multiple buttons.
$('.addCustomer').on('click', function() {
// test if you get the correct table
var table = $(this).closest('table');
console.log(table);
// if above not work try;
var table = $(this).siblings('table');
console.log(table);
// if you successfully get the table you wanted,
table.find('tbody').append('<tr><td>New customer row</tr>');
});
You can try this,
$(document).ready(function () {
$("#AddItem").on('click', function(e) {
$(this).prev().find(' > tbody tr:last').after('<tr><td colspan="4">New Item</td></tr>')
e.preventDefault();
});
$("#AddCustomer").on('click', function(e) {
$(this).prev().find(' > tbody tr:last').after('<tr><td colspan="4">New Customer</td></tr>')
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
<th>Gender</th>
<th>My Items</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Name</td>
<td>30</td>
<td>My Address</td>
<td>Male</td>
<td>
<table>
<thead>
<tr>
<th>Brand</th>
<th>Quantity</th>
<th>Size</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Yamaha</td>
<td>30</td>
<td>Large</td>
<td>Black</td>
</tr>
</tbody>
</table>
<button id="AddItem">Add Item</button>
</td>
</tr>
</tbody>
</table>
<button id="AddCustomer">Add Customer</button>
Some thing like this
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="StackOverflow_Solve.jQueryAjax.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="../Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="../Scripts/bootstrap.min.js" type="text/javascript"></script>
<script>
$(function () {
// $('#myModal').show();
$('#AddItem').click(function(e) {
e.preventDefault();
var childtable = $(this).closest('tr').find('.childtable');
console.log(childtable);
var mytr = '<tr><td>Yamaha</td><td>1</td><td>Large</td><td>Black</td><td> <button id="remove" class="remove">remove Customer</button></td></tr>';
$('#childtable > tbody:last').append(mytr);
});
$(document).on('focus', '.remove', function (e) {
e.preventDefault();
$(this).parent().parent().remove();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
<th>Gender</th>
<th>My Items</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Name</td>
<td>30</td>
<td>My Address</td>
<td>Male</td>
<td>
<table id="childtable" class="childtable">
<thead>
<tr>
<th>Brand</th>
<th>Quantity</th>
<th>Size</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Yamaha</td>
<td>30</td>
<td>Large</td>
<td>Black</td>
<td>
<button id="remove" class="remove">remove Customer</button>
</td>
</tr>
</tbody>
</table>
<button id="AddItem">Add Item</button>
</td>
</tr>
</tbody>
</table>
<button id="AddCustomer">Add Customer</button>
</form>
</body>
</html>

changing data-target in bootstrap using CSS(first preference) or javascript(secnd preference)

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
#media screen and (min-width:500px)
{
.col-xs-4
{
text-align:center;
}
}
#media screen and (min-width:700px)
{
.col-xs-4
{
text-align:center;
width:100%;
}
}
.col-xs-4{
text-align:center;
}
div .col-xs-4:hover{
}
.btn-primary{
width:100%;
}
</style>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div id="">
<div class="col-xs-4" style="background-color:lavender;"><button type="submit"; data-toggle="collapse"; data-target="#doctorVisit"; class="btn btn-primary">Doctor Visit</button></div>
<div id="doctorVisit" class="collapse">
<table class="table"; width:500px; height:300px; >
<thead>
<tr>
<th>Sr. No.</th>
<th>Visited with</th>
<th>Time</th>
<th>edit</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
<td>Doe</td>
</tr>
<tr class="danger">
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
<td>Doe</td>
</tr>
<tr class="info">
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
<td>Doe</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-4" style="background-color:lavender;"><button type="submit"; id="pharmacyVisitBtn" data-toggle="collapse"; data-target="#pharmacyVisit"; class="btn btn-primary">Pharmacy Visit</button></div>
<div id="pharmacyVisit" class="collapse">
<table class="table"; width:500px; height:300px; >
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>edit</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
<td>Doe</td>
</tr>
<tr class="danger">
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
<td>Doe</td>
</tr>
<tr class="info">
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
<td>Doe</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-4" style="background-color:lavender;"><button type="submit"; data-toggle="collapse"; data-target="#stockistVisit"; class="btn btn-primary">Stockist Visit</button></div>
<div id="stockistVisit" class="collapse">
<table class="table"; width:500px; height:300px; >
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>edit</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
<td>Doe</td>
</tr>
<tr class="danger">
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
<td>Doe</td>
</tr>
<tr class="info">
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
<td>Doe</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
function show()
{
alert ("hey");
}
</script>
</body>
</html>
please run the above using a server.
refer above code.
Exaplaination: i want to change 'data-target' to the div having id #stockistVisit when the the screen size is small. can i do it using CSS?
and if i can't do it using CSS, can i do it using javascript?
im using angularjs too. can it be done using that too?
You can't change a data attribute using media queries, but you can change it using JavaScript (jQuery example below).
$(window).resize(function() {
if ($(this).width() < 500) $('target-here').data('blue', 1);
else $('target-here').data('blue', 2);
});
.width() returns the window width in pixels. Using some simple conditional statements, you can change the data attribute to different values depending on the current width.

Why is this datatable showing no result when for a mobile number?

I have a datatable in which I am putting my data. You can see the code below. I want you to notice that; the code will work perfectly right now. However, when you uncomment the Mobile# from the code & then try searching using profile-ids (8 or 12); it doesn't show the records as it shows without mobile number. I am wondering why.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script>
$(function() {
$(".datatable").DataTable();
});
</script>
<table class="datatable table table-bordered table-striped">
<thead>
<tr>
<th>Profile id</th>
<th>Name</th>
<th>Surname</th>
<!-- <th>Mobile#</th>-->
</tr>
</thead>
<tfoot>
<tr>
<th>Profile id</th>
<th>Name</th>
<th>Surname</th>
<!-- <th>Mobile#</th>-->
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Keller</td>
<!--<td>12123123</td>-->
</tr>
<tr>
<td>2</td>
<td>Donald</td>
<td>Duck</td>
<!-- <td>12123123</td>-->
</tr>
</tbody>
</table>
Fiddle link ... : Fiddle link
This works for me. I cannot see any issues in Chrome at least
I can search for phone 1,2,3, and id 8 to find John, phone 4,5,6 and id 9 to find Duck
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script>
$(function() {
$(".datatable").DataTable();
});
</script>
<table class="datatable table table-bordered table-striped">
<thead>
<tr>
<th>Profile id</th>
<th>Name</th>
<th>Surname</th>
<th>Mobile#</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Profile id</th>
<th>Name</th>
<th>Surname</th>
<th>Mobile#</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>8</td>
<td>John</td>
<td>Keller</td>
<td>123</td>
</tr>
<tr>
<td>9</td>
<td>Donald</td>
<td>Duck</td>
<td>456</td>
</tr>
</tbody>
</table>
It seems that the search fields searches in all td elements if it contains that value, possibly using regular expressions for this?
I haven't worked with DataTables, but is there a way to set which field it should check in? That would most likely solve your problem.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script>
$(function() {
$(".datatable").DataTable();
});
</script>
<table class="datatable table table-bordered table-striped">
<thead>
<tr>
<th>Profile id</th>
<th>Name</th>
<th>Surname</th>
<th>Mobile#</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Profile id</th>
<th>Name</th>
<th>Surname</th>
<th>Mobile#</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Keller</td>
<td>12123123</td>
</tr>
<tr>
<td>2</td>
<td>Donald</td>
<td>Duck</td>
<td>23232323</td>
</tr>
</tbody>
</table>

Tablesorter does not sort (Jquery 1.8)

I did a lot of research concerning my question, but I didn't find an answer.
The tablesorter does not sort and I don't know why?.
Here is my test file. Can you tell me, what I'm doing wrong?
<html>
<head>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#sortable").tablesorter();
});
</script>
</head>
<body>
<table id="sortable">
<thead>
<tr>
<td>Username</td>
<td>Role</td>
</tr>
</thead>
<tbody>
<tr>
<td>SuperAdmin</td>
<td>SuperAdministrator</td>
</tr>
<tr>
<td>Simon</td>
<td>SuperAdministrator</td>
</tr>
<tr>
<td>Manfred</td>
<td>Administrator</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
</body>
</html>
I've got the jQuery file, the tablesorter.js...
the files are loaded correctly, cause I can read them (using firebug)...
Please help me, because I prefer not to write a tablesorter by myself.
For the headers (Username and Role), use <th> instead of <td>
See this JSFiddle
Use this:
<thead>
<tr>
<th>Username</th>
<th>Role</th>
</tr>
</thead>
Instead of:
<thead>
<tr>
<td>Username</td>
<td>Role</td>
</tr>
</thead>

Categories