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
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>
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>
<!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.
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>
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>