DataTables - Get Nodes and Count total matches
DataTables
HTML
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<body>
<div id="cnt"></div>
<div class="container">
<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
<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>bob</td>
<td class='awka'>12 feb 2012</td>
<td>29 mar 2012</td>
<td>car</td>
<td>booked</td>
</tr>
<tr>
<td>bob</td>
<td>12 feb 2012</td>
<td>29 mar 2012</td>
<td>car</td>
<td>booked</td>
</tr>
<tr>
<td>bob</td>
<td>12 feb 2012</td>
<td>29 mar 2012</td>
<td>car</td>
<td>booked</td>
</tr>
<tr>
<td>bob</td>
<td>12 feb 2012</td>
<td>29 mar 2012</td>
<td>car</td>
<td>booked</td>
</tr>
<tr>
<td>Mike</td>
<td>1 Jan 2011</td>
<td>22 mar 2012</td>
<td>hotel</td>
<td>Held</td>
</tr>
<tr>
<td>Mike</td>
<td>1 Jan 2011</td>
<td>22 mar 2012</td>
<td>hotel</td>
<td>Held</td>
</tr>
...
CSS
body{padding:30px}
.countip{
position:absolute;
margin-top:-12px;
width:215px;
height:25px;
border:2px solid #fff;
background:#333333;
color:#ffffff;
text-align:center;
padding:2px;
border-radius:5px;
}
JavaScript
$(document).ready(function() {
$('#example').dataTable({
"sPaginationType": "full_numbers"
});
});
$("tr td:nth-child(2)").live('mouseenter', function() {
var me = $(this);
var w = $(this).text()
var nNodes = $('#example').dataTable().fnGetNodes();
var x = 0
var jqInputs = $('input:not([class^=ackMod])', nNodes);
//var jqInputs = $(':input', nNodes);
alert(jqInputs)
//alert(nNodes.length);
if (nNodes.length > 0) {
for (var i = 0; i < nNodes.length; i++) {
var g = $(nNodes[i]).find("td:nth-child(2)").text()
var dat = $('#example').dataTable().fnGetData(nNodes[i]);
if (g == w) {
var cctext = ( ++x + ' Travellers on this date: ');
//$("#cnt").html(cctext + dat[1])
}
}
}
$(me).append($("<span class='countip'></span>").text(cctext))
}).mouseout(function(){
$("#cnt").html("-");
$(".countip").remove();
});