Problem with ordering data with server side info and horizontal scrolling
Problem with ordering data with server side info and horizontal scrolling
martodaniel
Posts: 2Questions: 0Answers: 0
Hi people, i'm having a problem with the tables when i use horizontal scrolling when having too much columns.
The problem is that when i define the settings to make the horizontal scrolling appear i loose the ability to reorder my info, which i brought to my page using server side params.
Here i leave my initialization code of the table
var oTable = $('#eventTable').dataTable( {
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true,
"bProcessing": true,
"bFilter": false,
"bServerSide": true,
"bPaginate": false,
"bLengthChange": false,
"sAjaxDataProp" : "aResult.aList",
"sAjaxSource": "ajax/upgradeEventList.php",
"aoColumns": [
{"mData": "sRegionName"},
{"mData": "sNC"},
{"mData": "sCmtsName"},
{"mData": "sVendor"},
{"mData": "sModel"},
{"mData": "sSwVersion"},
{"mData": "sHwVersion"},
{"mData": "sMacAddress"},
{"mData": "sFilename"},
{"mData": "sTFTPServer"},
{"mData": "sDate"},
{"mData": "sStatus"}
],
"fnDrawCallback": function( oSettings ) {
if(oSettings.aoData.length > 0){
//Select all anchor tag with rel set to tooltip
$('span.error').click(function(e) {
var sErrorId = $(this).html();
$('#tooltip').html($('#'+sErrorId).html());
//Set the X and Y axis of the tooltip
$('#tooltip').css('top', e.pageY + 10 );
$('#tooltip').css('left', e.pageX + 20 );
//Show the tooltip with faceIn effect
$('#tooltip').fadeIn('500');
$('#tooltip').fadeTo('10',0.8);
}).mouseout(function() {
//Show the tooltip with faceIn effect
$('#tooltip').fadeOut('500');
$('#tooltip').fadeTo('10',0.8);
});
}else{
<?php
if($oPageFilters->bLoopingFilter){
if($lastLine != ""){
?>
$(".dataTables_empty").html("No data available. Last checkout was run \n\
on <?php echo date('Y-m-d H:i:s', $lastLine); ?>. \n\
It searched CM that had more than \n\
<?php echo $oConfig->loop_updates['max_updates']; ?> \n\
upgrades in the last <?php echo $oConfig->loop_updates['hours_in_db']?> hours.");
<?php
}else{
?>
$(".dataTables_empty").html("The looping updates check is not being executed.");
<?php
}
}
?>
}
},
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "sFilterType", "value": "UPGRADE_EVENTS"} );
aoData.push( { "name": "sMacAddress", "value": sMacAddress} );
aoData.push( { "name": "sCmtsName", "value": sCmtsName} );
aoData.push( { "name": "sVendorName", "value": sVendorName} );
aoData.push( { "name": "sModelName", "value": sModelName} );
aoData.push( { "name": "sVersionName", "value": sVersionName} );
aoData.push( { "name": "sFromDate", "value": sFromDate} );
aoData.push( { "name": "sToDate", "value": sToDate} );
aoData.push( { "name": "bFilterPresetPeriod", "value": bFilterPresetPeriod} );
aoData.push( { "name": "sFilterPresetPeriod", "value": sFilterPresetPeriod} );
aoData.push( { "name": "sFilterPresetTFTP", "value": sFilterPresetTFTP} );
aoData.push( { "name": "iErrorFilter", "value": iErrorFilter} );
aoData.push( { "name": "iTaskFilter", "value": iTaskFilter} );
aoData.push( { "name": "sSysDescr", "value": sSysDescr} );
aoData.push( { "name": "iLoopingFilter", "value": iLoopingFilter} );
aoData.push( { "name": "iRegionId", "value": iRegionId} );
aoData.push( { "name": "sFilterProgress", "value": sFilterProgress} );
aoData.push( { "name": "sFilterNcs", "value": sFilterNcs} );
},
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
var classes = "";
if(aData["sRegionName"] == 'Out of topology'){
classes = "class='errorTxt'";
}
append = "" + aData["sRegionName"] + "";
$("td:eq(0)", nRow).html(append);
var append = aData['sStatus'];
if ($.inArray(aData['iStatus'], [4,5,127,128])) {
append += ' (' + aData['iError'] + ')';
}
$("td:eq(11)", nRow).html(append);
if(aData["sSysDescr"] != "" && aData["sVendor"] == ""){
$("td:eq(3)", nRow).html(htmlentities(aData["sSysDescr"]));
$("td:eq(4)", nRow).html("Non parseable sys descr ");
$("td:eq(5)", nRow).html("Non parseable sys descr ");
$("td:eq(6)", nRow).html("Non parseable sys descr ");
}
}
});
The problem is that when i define the settings to make the horizontal scrolling appear i loose the ability to reorder my info, which i brought to my page using server side params.
Here i leave my initialization code of the table
var oTable = $('#eventTable').dataTable( {
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true,
"bProcessing": true,
"bFilter": false,
"bServerSide": true,
"bPaginate": false,
"bLengthChange": false,
"sAjaxDataProp" : "aResult.aList",
"sAjaxSource": "ajax/upgradeEventList.php",
"aoColumns": [
{"mData": "sRegionName"},
{"mData": "sNC"},
{"mData": "sCmtsName"},
{"mData": "sVendor"},
{"mData": "sModel"},
{"mData": "sSwVersion"},
{"mData": "sHwVersion"},
{"mData": "sMacAddress"},
{"mData": "sFilename"},
{"mData": "sTFTPServer"},
{"mData": "sDate"},
{"mData": "sStatus"}
],
"fnDrawCallback": function( oSettings ) {
if(oSettings.aoData.length > 0){
//Select all anchor tag with rel set to tooltip
$('span.error').click(function(e) {
var sErrorId = $(this).html();
$('#tooltip').html($('#'+sErrorId).html());
//Set the X and Y axis of the tooltip
$('#tooltip').css('top', e.pageY + 10 );
$('#tooltip').css('left', e.pageX + 20 );
//Show the tooltip with faceIn effect
$('#tooltip').fadeIn('500');
$('#tooltip').fadeTo('10',0.8);
}).mouseout(function() {
//Show the tooltip with faceIn effect
$('#tooltip').fadeOut('500');
$('#tooltip').fadeTo('10',0.8);
});
}else{
<?php
if($oPageFilters->bLoopingFilter){
if($lastLine != ""){
?>
$(".dataTables_empty").html("No data available. Last checkout was run \n\
on <?php echo date('Y-m-d H:i:s', $lastLine); ?>. \n\
It searched CM that had more than \n\
<?php echo $oConfig->loop_updates['max_updates']; ?> \n\
upgrades in the last <?php echo $oConfig->loop_updates['hours_in_db']?> hours.");
<?php
}else{
?>
$(".dataTables_empty").html("The looping updates check is not being executed.");
<?php
}
}
?>
}
},
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "sFilterType", "value": "UPGRADE_EVENTS"} );
aoData.push( { "name": "sMacAddress", "value": sMacAddress} );
aoData.push( { "name": "sCmtsName", "value": sCmtsName} );
aoData.push( { "name": "sVendorName", "value": sVendorName} );
aoData.push( { "name": "sModelName", "value": sModelName} );
aoData.push( { "name": "sVersionName", "value": sVersionName} );
aoData.push( { "name": "sFromDate", "value": sFromDate} );
aoData.push( { "name": "sToDate", "value": sToDate} );
aoData.push( { "name": "bFilterPresetPeriod", "value": bFilterPresetPeriod} );
aoData.push( { "name": "sFilterPresetPeriod", "value": sFilterPresetPeriod} );
aoData.push( { "name": "sFilterPresetTFTP", "value": sFilterPresetTFTP} );
aoData.push( { "name": "iErrorFilter", "value": iErrorFilter} );
aoData.push( { "name": "iTaskFilter", "value": iTaskFilter} );
aoData.push( { "name": "sSysDescr", "value": sSysDescr} );
aoData.push( { "name": "iLoopingFilter", "value": iLoopingFilter} );
aoData.push( { "name": "iRegionId", "value": iRegionId} );
aoData.push( { "name": "sFilterProgress", "value": sFilterProgress} );
aoData.push( { "name": "sFilterNcs", "value": sFilterNcs} );
},
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
var classes = "";
if(aData["sRegionName"] == 'Out of topology'){
classes = "class='errorTxt'";
}
append = "" + aData["sRegionName"] + "";
$("td:eq(0)", nRow).html(append);
var append = aData['sStatus'];
if ($.inArray(aData['iStatus'], [4,5,127,128])) {
append += ' (' + aData['iError'] + ')';
}
$("td:eq(11)", nRow).html(append);
if(aData["sSysDescr"] != "" && aData["sVendor"] == ""){
$("td:eq(3)", nRow).html(htmlentities(aData["sSysDescr"]));
$("td:eq(4)", nRow).html("Non parseable sys descr ");
$("td:eq(5)", nRow).html("Non parseable sys descr ");
$("td:eq(6)", nRow).html("Non parseable sys descr ");
}
}
});
This discussion has been closed.
Replies
http://debug.datatables.net/uvaraf