In a recent post I read that is possible filering the table data on tab panel name
http://datatables.net/forums/discussion/7490/use-tabs-for-row-grouping/p1
here the mine
where "galbiate_tab.html" is
and realtime_datatables1.html is
live example link :http://ugom.comuf.com/meteo/previsioni_sintetiche/galbiate/galbiate.html
I have two problems:
1- on load the filter doesn't work, I need to select an another tab and return back to the first one and filter are applied on first one
2- tab named 13 Gennaio 2013 isn't filtered why?
Regards Ugo
idea on how solve these proplems
Thanks an regards
Ugo
http://datatables.net/forums/discussion/7490/use-tabs-for-row-grouping/p1
here the mine
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8" />
<!-- Html 5 e CSS3 -->
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>Ugo Internet server - dati in diretta</title>
<meta name="description" content="Sito internet di Ugo Merlini - dati storici - database"/>
<meta name="author" content="Ugo Merlini"/>
<meta name="viewport" content="width=device-width; initial-scale=1.0"/>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="../../../file_comuni/javascript/jquery_ui/css/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="../../../file_comuni/javascript/datatables/media/css/jquery.dataTables_themeroller.css"/>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="../../../file_comuni/javascript/jquery_ui/css/jquery-ui.css"/>
<!-- Jquery javascript -->
<script type="text/javascript" src="../../../file_comuni/javascript/jquery/jquery-1.8.2.js"></script>
<!-- Jquery-ui javascript -->
<script type="text/javascript" src="../../../file_comuni/javascript/jquery_ui/jquery-ui-1.9.1.js"></script>
<!-- Datatables javascript -->
<script type="text/javascript" src="../../../file_comuni/javascript/datatables/media/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.getJSON('galbiate_tab.html', function(giorni){
$('#tabs ul:first li:eq(0) a').text(giorni[0]);
$('#tabs ul:first li:eq(1) a').text(giorni[1]);
$('#tabs ul:first li:eq(2) a').text(giorni[2]);
$('#tabs ul:first li:eq(3) a').text(giorni[3]);
$('#tabs ul:first li:eq(4) a').text(giorni[4]);
$('#tabs ul:first li:eq(5) a').text(giorni[5]);
$('#tabs ul:first li:eq(6) a').text(giorni[6]);
$('#tabs ul:first li:eq(7) a').text(giorni[7]);
$('#tabs ul:first li:eq(8) a').text(giorni[8]);
});
});
$(document).ready(function() {
$( "#tabs" ).tabs({
select: function(event, ui) {
oTable.fnFilter(ui.tab.innerHTML,0,false); // apply the table filter based on tab name
$('#dataTable').appendTo(ui.panel); // move the table into the selected tab panel
}
});
oTable = $('#dataTable').dataTable({
"fnDrawCallback": function ( oSettings ) {
if ( oSettings.aiDisplay.length == 0 )
{
return;
}
var nTrs = $('#dataTable tbody tr');
var iColspan = nTrs[0].getElementsByTagName('td').length;
var sLastGroup = "";
for ( var i=0 ; i<nTrs.length ; i++ )
{
var iDisplayIndex = oSettings._iDisplayStart + i;
var sGroup = oSettings.aoData[ oSettings.aiDisplay[iDisplayIndex] ]._aData[0];
if ( sGroup != sLastGroup )
{
var nGroup = document.createElement( 'tr' );
var nCell = document.createElement( 'td' );
nCell.colSpan = iColspan;
nCell.className = "group";
nGroup.appendChild( nCell );
nTrs[i].parentNode.insertBefore( nGroup, nTrs[i] );
sLastGroup = sGroup;
}
}
},
"bProcessing": true,
"bSort": false,
"iDisplayLength": 27,
"sAjaxSource": "realtime_datatables1.html",
"sPaginationType":"full_numbers",
"bAutoWidth": false,
"aoColumns": [null ,{"sWidth": "155px"},{"sWidth": "155px"}],
"bJQueryUI":true
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1"> </a></li>
<li><a href="#tabs-2"> </a></li>
<li><a href="#tabs-3"> </a></li>
<li><a href="#tabs-4"> </a></li>
<li><a href="#tabs-5"> </a></li>
<li><a href="#tabs-6"> </a></li>
<li><a href="#tabs-7"> </a></li>
<li><a href="#tabs-8"> </a></li>
<li><a href="#tabs-9"> </a></li>
</ul>
<table id="dataTable" class="display" style="background-color: white">
<thead>
<tr>
<th>Descrizione</th>
<th>Valore</th>
<th>Valore 1</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>
where "galbiate_tab.html" is
[["08 Gennaio 2013"],["09 Gennaio 2013"],["10 Gennaio 2013"],["11 Gennaio 2013"],["12 Gennaio 2013"],["13 Gennaio 2013"],["14 Gennaio 2013"],["15 Gennaio 2013"],["16 Gennaio 2013"]]
and realtime_datatables1.html is
{ "aaData": [
["08 Gennaio 2013","Temperatura","Temperatura"],
["08 Gennaio 2013","Temperatura","Temperatura"],
["09 Gennaio 2013","Temperatura","Temperatura"],
["09 Gennaio 2013","Temperatura","Temperatura"],
["10 Gennaio 2013","Temperatura","Temperatura"],
["11 Gennaio 2013","Temperatura","Temperatura"],
["12 Gennaio 2013","Temperatura","Temperatura"],
["13 Gennaio 2013","Temperatura","Temperatura"],
["14 Gennaio 2013","Temperatura","Temperatura"]
] }
live example link :http://ugom.comuf.com/meteo/previsioni_sintetiche/galbiate/galbiate.html
I have two problems:
1- on load the filter doesn't work, I need to select an another tab and return back to the first one and filter are applied on first one
2- tab named 13 Gennaio 2013 isn't filtered why?
Regards Ugo
idea on how solve these proplems
Thanks an regards
Ugo