Develop Reference

AdminLite 2.4.0 data table not working

Here is the template, I have copied the contents for the bower_components and dist folders. I also did all the linking and requiring I need or well that I can find to. All requires work no 404's only a status code 200. My code is as follows:
<div class="box">
<div class="box-header">
<h3 class="box-title">Data Table With Full Features</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Trident</td>
<td>Internet Explorer 4.0
</td>
<td>Win 95+</td>
<td> 4</td>
<td>X</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet Explorer 5.0
</td>
<td>Win 95+</td>
<td>5</td>
<td>C</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet Explorer 5.5
</td>
<td>Win 95+</td>
<td>5.5</td>
<td>A</td>
</tr>
<tr>
<td>Other browsers</td>
<td>All others</td>
<td>-</td>
<td>-</td>
<td>U</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div>
<!-- /.box-body -->
</div>
I get the table to show fine but non of the search, show X entries, pagination or anything else like that. It seems like I am copying the Hover Data Table but the code shows it is the Data Table With Full Features. I have also included the small script on the page near the bottom at line 1631-1643 it is this:
$(function () {
$('#example1').DataTable();
$('#example2').DataTable({
'paging' : true,
'lengthChange': false,
'searching' : false,
'ordering' : true,
'info' : true,
'autoWidth' : false
});
});
I have tried moving the files aroun
Excuse the poor code styling, it should still give a proper idea.

in your script you have set false to "searching"
try to use "true"
$(function () {
$('#example1').DataTable();
$('#example2').DataTable({
'paging' : true,
'lengthChange': false,
'searching' : true, // change this one
'ordering' : true,
'info' : true,
'autoWidth' : false
});
});

show and hide tables by Date

I have some tables ordered by Date from 2016 to 2003
trying to figure out a way to show and hide these tables by date.
<select id="Years">
<option value="y2016">2016</option>
<option value="y2015">2015</option>
<option value="y2014">2014</option>
</select>
<div class="TableView">
<table class="y2016" width="100%">
<thead>
<tr>
<th height="23">Date</th>
<th height="23">Subject</th>
<th height="23">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>06/14/16</td>
<td>Cost Management Report as of 6/14/2016</td>
<td>June Cost Management Report</td>
</tr>
<tr>
<td>03/10/16</td>
<td>Cost Management Report as of 3/10/2016</td>
<td>March Report </td>
</tr>
<tr>
<td>05/21/15</td>
<td>April - Cost Management Report</td>
<td>April Report</td>
</tr>
<tr>
<td>04/06/15</td>
<td>March - Cost Management Report</td>
<td>March Report</td>
</tr>
<tr>
<td>02/06/15</td>
<td>January - Cost Management Report</td>
<td>January Report</td>
</tr>
</tbody>
</table>
</div>
div class="Tables">
<table class="y2015" width="100%">
<thead>
<tr>
<th height="23">Date</th>
<th height="23">Subject</th>
<th height="23">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>05/21/15</td>
<td>April - Cost Management Report</td>
<td>April Report</td>
</tr>
<tr>
<td>04/06/15</td>
<td>March - Cost Management Report</td>
<td>March Report</td>
</tr>
<tr>
<td>02/06/15</td>
<td>January - Cost Management Report</td>
<td>January Report</td>
</tr>
<tr>
<td>10/31/14</td>
<td>Response to Notice of Violation</td>
<td><a href="">report</td>
</tr>
<tr>
<td>10/31/14</td>
<td>October - Cost Management Report</td>
<td>October Cost Management Report</td>
</tr>
</tbody>
</table>
so y2016 will display then I will choose y2015 and that will display the 2015 table and so on.
any suggestions I had a script but that only showed and hide only on year.

First, change your definitions and use ids for your tables. Set the css on each table to display:none.
Then, use an event handler for your select so that on change, the correct table will be shown.
See the code below. Specifically, note that I changed the classes to id on your tables, and then look at the small javascript function that I wrote at the bottom of the page.
Oh, and that I added an option to the Select so that a user will have to select the year.
</style>
</head>
<body>
<select id="Years">
<option>Select Year</option>
<option value="y2016">2016</option>
<option value="y2015">2015</option>
<option value="y2014">2014</option>
</select>
<div class="Tables">
<table id="y2016" width="100%" style = 'display:none;'>
<thead>
<tr>
<th height="23">Date</th>
<th height="23">Subject</th>
<th height="23">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>06/14/16</td>
<td>Cost Management Report as of 6/14/2016</td>
<td>June Cost Management Report</td>
</tr>
<tr>
<td>03/10/16</td>
<td>Cost Management Report as of 3/10/2016</td>
<td>March Report </td>
</tr>
<tr>
<td>05/21/15</td>
<td>April - Cost Management Report</td>
<td>April Report</td>
</tr>
<tr>
<td>04/06/15</td>
<td>March - Cost Management Report</td>
<td>March Report</td>
</tr>
<tr>
<td>02/06/15</td>
<td>January - Cost Management Report</td>
<td>January Report</td>
</tr>
</tbody>
</table>
<table id="y2015" width="100%" style = 'display:none;'>
<thead>
<tr>
<th height="23">Date</th>
<th height="23">Subject</th>
<th height="23">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>05/21/15</td>
<td>April - Cost Management Report</td>
<td>April Report</td>
</tr>
<tr>
<td>04/06/15</td>
<td>March - Cost Management Report</td>
<td>March Report</td>
</tr>
<tr>
<td>02/06/15</td>
<td>January - Cost Management Report</td>
<td>January Report</td>
</tr>
<tr>
<td>10/31/14</td>
<td>Response to Notice of Violation</td>
<td><a href="">report</td>
</tr>
<tr>
<td>10/31/14</td>
<td>October - Cost Management Report</td>
<td>October Cost Management Report</td>
</tr>
</tbody>
</table>
<script>
$("#Years").on('change', function(){
var tbl = $("#Years option:selected").val();
$("#" + tbl).show();
})
</script>
</body>
</html>

Set up a change listener on #Years (using jQuery because you tagged it with jQuery):
$('#Years').change(function(){
// Hide all tables
$('table').hide();
// Get the current value of #Years
var val = $(this).val();
// Show the correct table
$('.' + val).show();
});

Make some minute change in HTML. Instead of adding class to table add it to the parent div of the each table
HTML
<div class="TableView y2016"> // add y2016 class to here
<table class="" width="100%">
// Rest of code
</table>
</div>
<div class="TableView y2015"> // add y2015 class to her
<table class="" width="100%">
//Rest of code
</tbody>
</table>
CSS
.TableView { // will hide all tables
display: none
}
.y2016{ // will show only table.y2016 since y2016 is default selected
display:block;
}
JS
$("#Years").on('change',function(event){
// get value of selected option
var _getSelected =$( "#Years option:selected" ).val();
$('.TableView').css('display','none'); // hide all other tables
$('.'+_getSelected).css('display','block'); // only show selected table
})
JSFIDDLE

To achieve expected result use below option
JS:
$('#Years').on('change', function() {
var year = $(this).val();
var yearVal = year.substring(3);
$("tr").each(function() {
$this = $(this)
var value = $this.find("td:first").html();
if (value) {
var selVal = value.slice(-2);
if (selVal === yearVal) {
$(this).show();
} else {
$(this).hide();
}
}
});
})
http://codepen.io/nagasai/pen/yJEYgq

DataTables jquery plugin not working, get a blank page?

I am trying to implement the Datatables jquery plugin on with my html table but having no luck. I'm linking to the Datatables CDN for both the CSS styling and Datatables script itself, while linking to Google's hosted jquery plugin. I also have a local Javascript file with the script to initialize data tables on my table. I go to open the html page and just get my plain table as if DataTable isn't even functioning. What could I be doing wrong?
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="datatables.js"></script>
<table id="mytable">
<table>
<thead>
<tr>
<th>High-Level Category</th>
<th>Device Type</th>
<th>Hostname</th>
<th>IP Address</th>
<th>Owner</th>
<th>Organizational Unit</th>
<th>Organizational Unit Email</th>
<th>Universal Forwarder or Syslog?</th>
<th>In PCI?</th>
<th>Notes</th>
</tr>
</thead>
<tbody contenteditable>
<tr>
<td contenteditable="true">SECDEV1</td>
<td contenteditable="true">Firewall</td>
<td contenteditable="true">Description 1</td>
<td contenteditable="true">1.1.1.1</td>
<td contenteditable="true">Kim</td>
<td contenteditable="true">Information Technology</td>
<td contenteditable="true">test#test.com</td>
<td contenteditable="true">Syslog</td>
<td contenteditable="true">Yes</td>
<td contenteditable="true">notes</td>
</tr>
<tr>
<td contenteditable="true">SECDEV2</td>
<td contenteditable="true">Switch</td>
<td contenteditable="true">description2</td>
<td contenteditable="true">2.2.2.2</td>
<td contenteditable="true">Bob</td>
<td contenteditable="true">Information Networking</td>
<td contenteditable="true">test2#test.com</td>
<td contenteditable="true">Syslog</td>
<td contenteditable="true">NO</td>
<td contenteditable="true">more notes</td>
</tr>
</tbody>
The local js file I have is as follows:
$(document).ready(function(){
$('#mytable').dataTable();
});
Any help would be great.
Thanks!

Your html code is incorrect. There was an extra open ending table tag. I corrected your html below:
<table id="mytable">
<thead>
<tr>
<th>High-Level Category</th>
<th>Device Type</th>
<th>Hostname</th>
<th>IP Address</th>
<th>Owner</th>
<th>Organizational Unit</th>
<th>Organizational Unit Email</th>
<th>Universal Forwarder or Syslog?</th>
<th>In PCI?</th>
<th>Notes</th>
</tr>
</thead>
<tbody contenteditable>
<tr>
<td contenteditable="true">SECDEV1</td>
<td contenteditable="true">Firewall</td>
<td contenteditable="true">Description 1</td>
<td contenteditable="true">1.1.1.1</td>
<td contenteditable="true">Kim</td>
<td contenteditable="true">Information Technology</td>
<td contenteditable="true">test#test.com</td>
<td contenteditable="true">Syslog</td>
<td contenteditable="true">Yes</td>
<td contenteditable="true">notes</td>
</tr>
<tr>
<td contenteditable="true">SECDEV2</td>
<td contenteditable="true">Switch</td>
<td contenteditable="true">description2</td>
<td contenteditable="true">2.2.2.2</td>
<td contenteditable="true">Bob</td>
<td contenteditable="true">Information Networking</td>
<td contenteditable="true">test2#test.com</td>
<td contenteditable="true">Syslog</td>
<td contenteditable="true">NO</td>
<td contenteditable="true">more notes</td>
</tr>
</tbody>
</table>

To achieve your expected result, use below CDN libraries
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
Codepen- http://codepen.io/nagasai/pen/AXyLXO

I have a table in bootstrap - how can I add a column that contains remove button for selected row?

I created a table in bootstrap, basically it contains different columns and rows, e.g.:
<thead>
<tr>
<th>Location</th>
<th>Date</th>
<th>Time</th>
<th>Duration</th>
<th>Content</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
<td class="center">Remove</td>
</tr>
<tr class="even gradeC">
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
<td class="center">Remove</td>
</tr>
(...)
So far the last column contains static 'Remove' string. Is there a way of dynamically removing the row when the user hits the remove link there?
here is my fiddle: http://jsfiddle.net/fyw6kajm/1/

Or you can wrap your Remove in last td inside an anchor tag with some class name given to it, say remove and write a click event to that class.
Ex:
HTML
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
<td class="center"><a class='remove' href="#">Remove</a></td> <!--wrap in anchor tag-->
</tr>
<tr class="even gradeA">
<td>Trident</td>
<td>Internet Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
<td class="center"><a class='remove' href="#">Remove</a></td>
</tr>
JS
$('.remove').on('click',function(){
$(this).closest('tr').remove(); //remove its root parent tr using closest
});
if the contents are dynamically added you can do event delegation as below:
$("#dataTables-example").on('click','.remove',function(){
$(this).closest('tr').remove(); //remove its root parent tr using closest
});
DEMO

You can have delegated click event on last td of row or the row that contains text remove along with .closest() and .remove() for traversing to closest row and removing it respectively:
$('body').on('click','td:contains(Remove)',function(){
$(this).closest('tr').remove();
});
Working Demo

Make the buttons.
$("#trigger-overlay2").click(function() {
// $(this).toggleClass("active");
$(".overlay-boxify2").toggleClass("open");
});
$(document).on('click','.tr_remove',function(e){
e.preventDefault();
$(this).parents('tr').remove();
});
.overlay-boxify, .overlay-boxify2 {
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}
.overlay-boxify.open, .overlay-boxify2.open {
visibility: visible;
opacity: 1;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
z-index:9999;
}
.overlay2 {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(../img/grid.png);
background: rgba(222, 222, 222, 0.95);
overflow: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="trigger-overlay2" href="#contact">Trigger!</a>
<div class="overlay2 overlay-boxify2">
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
<div class="tos-logo-contact">
<img src="../img/logo.png"></a>
</div>
<div class="panel-body">
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>Location</th>
<th>Date</th>
<th>Time</th>
<th>Duration</th>
<th>Content</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
<td class="center tr_remove">Remove</td>
</tr>
<tr class="even gradeC">
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
<td class="center tr_remove">Remove</td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
<td class="center tr_remove">Remove</td>
</tr>
<tr class="even gradeA">
<td>Trident</td>
<td>Internet Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
<td class="center tr_remove">Remove</td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td class="center">7</td>
<td class="center">A</td>
<td class="center tr_remove">Remove</td>
</tr>
<tr class="even gradeA">
<td>Trident</td>
<td>AOL browser (AOL desktop)</td>
<td>Win XP</td>
<td class="center">6</td>
<td class="center">A</td>
<td class="center tr_remove">Remove</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.7</td>
<td class="center">A</td>
<td class="center tr_remove">Remove</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
<td class="center tr_remove">Remove</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 2.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
<td class="center tr_remove">Remove</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 3.0</td>
<td>Win 2k+ / OSX.3+</td>
<td class="center">1.9</td>
<td class="center">A</td>
<td class="center tr_remove">Remove</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.0</td>
<td>OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
<td class="center tr_remove">Remove</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.5</td>
<td>OSX.3+</td>
<td class="center">1.8</td>
<td class="center">A</td>
<td class="center tr_remove">Remove</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape 7.2</td>
<td>Win 95+ / Mac OS 8.6-9.2</td>
<td class="center">1.7</td>
<td class="center">A</td>
<td class="center tr_remove">Remove</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Browser 8</td>
<td>Win 98SE+</td>
<td class="center">1.7</td>
<td class="center">A</td>
<td class="center tr_remove">Remove</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Navigator 9</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
<td class="center tr_remove">Remove</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1</td>
<td class="center">A</td>
<td class="center tr_remove">Remove</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.1</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.1</td>
<td class="center">A</td>
<td class="center tr_remove">Remove</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.2</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.2</td>
<td class="center">A</td>
<td class="center tr_remove">Remove</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.3</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.3</td>
<td class="center">A</td>
<td class="center tr_remove">Remove</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>

This removes the entire tr/row-element and its children, but you should assign a class to your remove button that is specific to this function, e.g. js_remove_row. Because this handle: "tr > td:last-child" could target other stuff if you change your table. Notice the js-prefix which lets you know that this class is a javascript-handler and not used for styling. I also use $(document).on... because if doesn't break if you ajax-load part of your page or table, document is always there and you don't have to reset the handler if reloading your content.
This works:
$(document).on("click", "tr > td:last-child", function() {
$(this).parent().remove();
});
This is better:
<td class="center js_remove_row">Remove</td>
$(document).on("click", ".js_remove_row", function() {
$(this).parent().remove();
});

You just need to add class to call click event on remove td and add click event to remove like below:
fiddle
<td class="center removetd">Remove</td>
Jquery:
$(".removetd").click(function(){
$(this).closest("tr").remove();
});

Try attaching click event to tr element , using event.target , Node.textContent , calling $(this).remove() if event.target text is "Remove"
$("tr").click(function(e) {
if (e.target.textContent === "Remove") $(this).remove()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Location</th>
<th>Date</th>
<th>Time</th>
<th>Duration</th>
<th>Content</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
<td class="center">Remove</td>
</tr>
<tr class="even gradeC">
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
<td class="center">Remove</td>
</tr>
(...)
</table>

Display JQuery UI Tooltip after table reset

All,
I am trying to get JQueryUI tooltip and Tablesorter plugin to work together. I am unable to display the JQueryUI tooltip when I hover on the names but the tooltip won't appear after I click the "Reset Sort Order" link.
How can I make sure the tooltip is displayed after I click the "Reset Sort Order" link. The tooltip should also be displayed when the table is sorted or paged.
A demo of the code can be seen at: http://jsbin.com/asaxi3/32/
The code is here:
<!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" xml:lang="en-us">
<head>
<title>jQuery plugin: Tablesorter 2.0 - Pager plugin</title>
<link rel="stylesheet" href="css/jq.css" type="text/css" media="print, projection, screen" />
<link rel="stylesheet" href="http://tablesorter.com/themes/blue/style.css" type="text/css" media="print, projection, screen" />
<link rel="stylesheet" type="text/css" href="http://jquery.bassistance.de/tooltip/jquery.tooltip.css">
<script type="text/javascript" src="http://tablesorter.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://tablesorter.com/jquery.tablesorter.js"></script>
<script type="text/javascript" src="http://tablesorter.com/addons/pager/jquery.tablesorter.pager.js"></script>
<script type="text/javascript" src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js"></script>
</head>
<body>
<div id="main">
<table id="table1" cellspacing="1" class="tablesorter">
<thead>
<tr>
<th>Name</th>
<th>Major</th>
<th>Sex</th>
</tr>
</thead>
<tbody>
<tr>
<td>Student01</td>
<td>Languages</td>
<td>male</td>
</tr>
<tr>
<td>Student02</td>
<td>Mathematics</td>
<td>male</td>
</tr>
<tr>
<td>Student03</td>
<td>Languages</td>
<td>female</td>
</tr>
<tr>
<td>Student04</td>
<td>Languages</td>
<td>male</td>
</tr>
<tr>
<td>Student05</td>
<td>Languages</td>
<td>female</td>
</tr>
<tr>
<td>Student06</td>
<td>Mathematics</td>
<td>male</td>
</tr>
<tr>
<td>Student07</td>
<td>Mathematics</td>
<td>male</td>
</tr>
<tr>
<td>Student08</td>
<td>Languages</td>
<td>male</td>
</tr>
<tr>
<td>Student09</td>
<td>Mathematics</td>
<td>male</td>
</tr>
<tr>
<td>Student10</td>
<td>Languages</td>
<td>male</td>
</tr>
<tr>
<td>Student11</td>
<td>Languages</td>
<td>male</td>
</tr>
<tr>
<td>Student12</td>
<td>Mathematics</td>
<td>female</td>
</tr>
<tr>
<td>Student13</td>
<td>Languages</td>
<td>female</td>
</tr>
<tr>
<td>Student14</td>
<td>Languages</td>
<td>female</td>
</tr>
<tr>
<td>Student15</td>
<td>Languages</td>
<td>male</td>
</tr>
<tr>
<td>Student16</td>
<td>Languages</td>
<td>female</td>
</tr>
<tr>
<td>Student17</td>
<td>Languages</td>
<td>female</td>
</tr>
<tr>
<td>Student18</td>
<td>Mathematics</td>
<td>male</td>
</tr>
<tr>
<td>Student19</td>
<td>Languages</td>
<td>male</td>
</tr>
<tr>
<td>Student20</td>
<td>Mathematics</td>
<td>male</td>
</tr>
<tr>
<td>Student21</td>
<td>Languages</td>
<td>male</td>
</tr>
<tr>
<td>Student22</td>
<td>Mathematics</td>
<td>male</td>
</tr>
<tr>
<td>Student23</td>
<td>Languages</td>
<td>female</td>
</tr>
</tbody>
</table>
<div id="pager1" class="pager">
<form>
Reset Sort Order
<img src="http://tablesorter.com/addons/pager/icons/first.png" class="first"/>
<img src="http://tablesorter.com/addons/pager/icons/prev.png" class="prev"/>
<input type="text" class="pagedisplay"/>
<img src="http://tablesorter.com/addons/pager/icons/next.png" class="next"/>
<img src="http://tablesorter.com/addons/pager/icons/last.png" class="last"/>
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</form>
</div>
<script type="text/javascript">
$(function() {
$("#table1 a").tooltip({
showURL: false,
fixPNG: true,
track:true,
delay:0
});
tablebackup = $("#table1").clone();
$("#table1")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager1")});
});
function resetTableOrder(tablebackup) {
tablebackup.clone().insertAfter("#table1");
$("#table1").remove();
$("#table1")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager1")});
//Load Tool Tips for links inside the tab container
$("#table1 a").tooltip({
showURL: false,
fixPNG: true,
track:true,
delay:0
});
}
</script>
</div>
</body>
</html>
Thanks

When you initialize tooltip the first time, it removed the title attribute from the tag. Then when the table is refreshed, it cannot find the title tag for each link and therefore skips it. I would recommend caching the title tags so when you reinitialize the tooltip, you can reinsert the original title tags.
var tableTitles;
$(function() {
tableTitles = $("#table1 a").attr("title");
$("#table1 a").tooltip({
showURL: false,
fixPNG: true,
track:true,
delay:0
});
tablebackup = $("#table1").clone();
$("#table1")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager1")});
});
function resetTableOrder(tablebackup) {
tablebackup.clone().insertAfter("#table1");
$("#table1").remove();
$("#table1")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager1")});
//Load Tool Tips for links inside the tab container
$("#table1 a").attr("title", tableTitles).tooltip({
showURL: false,
fixPNG: true,
track:true,
delay:0
});
}
Here is the working version: http://jsbin.com/asaxi3/36

Vincent, it's looking good. Seems like you're on the right track.
I was on a similar project and found that the entire thing seemed much easier and more feature rich when I switched over go Qtip and Datatables. The switch from the exact solution you're using to the new scripts gave my app night and day difference in functionality and useability...and the changeover was quick.
Here's links to the other tools:
Qtip: http://craigsworks.com/projects/qtip/
Datatables: http://datatables.net/
The sorting and searching features alone on Datatables make it a must see.
Good luck!