Horizontal Scrolling Problem

jewel03cse

I am using data table with record consisting of more than 10 fields. I want to use horizontal scrolling
in the data table. I have attached following css files and jquery files. I have initialized data table
plugin as below.







//<-- code for initialization only ->
pharmacistTable=$('#pharmacistListTable').dataTable({
"bFilter": false, "bJQueryUI":true,
"bSort":false, "bInfo": true,
"bPaginate": true, "bSortClasses":true,
"bProcessing":true, "bServerSide": true,
"sAjaxSource": "pharmacistProcessing.php",
"sScrollX": "100",
"sScrollXInner": "110%",
"bScrollCollapse": true,

"fnDrawCallback":function(){},
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {},
"fnServerData": function ( sSource, aoData, fnCallback )
{},
"aoColumns":[]

});


Problem: Horizontal scroll is not appearing. Even no effect is occurring.
Questions: Whats wrong with initialization code? Why is horizontal scrolling not appearing?

please, respond to me?

allan

The problem is probably the fnServerData function - it's not requesting data from the server, nor is it giving any data to DataTables to draw - therefore with no data to display (actually I would imagine that you are getting a Javascript error...) no scrolling is required. If you don't want fnServerData to do anything just remove it, or you can have it do what is needed like this: http://datatables.net/examples/server_side/post.html

Allan

jewel03cse

Sorry, I did not able to make you clear about my problem with the above skeleton code. Actually, I am fetching data from server side processing using data table plugin and it is working fine. Hence, I did not paste the code of the fnDrawCallback(), fnRowCallback() and fnServerData( ) functions. My problem is that I can not set the horizontal scroller to display more fields though I have used "sScrollX": "100%", "sScrollXInner": "110%" and "bScrollCollapse": true options.

Full code is given below.

HTML Table Code:




PhamacistId
SL
Title
Surname
First_Name
Year_of_Reg
PC_Reg_No
PSGH_Reg_No
Practice_Area
Employer
Address_1
Address_2
District
Town
Country
Status






Java script code:
pharmacistTable=$('#pharmacistListTable').dataTable({
"bFilter": false, "bJQueryUI":true,
"bSort":false, "bInfo": true,
"bPaginate": true, "bSortClasses":true,
"bProcessing":true, "bServerSide": true,
"sAjaxSource": "pharmacistProcessing.php",
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true,
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$(nRow).attr('id',aData[0]);
return nRow;
},
"fnServerData": function ( sSource, aoData, fnCallback )
{ aoData.push({"name":"operation", "value":"pharmacistListFetch"});
$.ajax({ "dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
},
"aoColumns":[ { "bVisible": false},
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null
]
});//end of dataTable()

jewel03cse

PHP code:

case 'pharmacistListFetch':
if($connect = @mysql_connect(HOSTNAME,DBUSER,DBPWD))
{ if(@mysql_select_db(DBNAME,$connect))
{

$sLimit = "";
if(isset($_POST['iDisplayStart']))
{ $sLimit = "limit ".mysql_real_escape_string( $_POST['iDisplayStart'] ).", ".
mysql_real_escape_string( $_POST['iDisplayLength'] );
}

$sql="select count(PhamacistId) as C from t_pharmacist;";
$qr= mysql_query($sql,$connect);
$r= mysql_fetch_object($qr);
$total=$r->C;

echo '{"sEcho":'.intval($_POST['sEcho']).',"iTotalRecords":'.$total.',"iTotalDisplayRecords":'.$total.', "aaData":[';

$sql="select PhamacistId, Title, Surname, First_Name, Year_of_Reg, PC_Reg_No, PSGH_Reg_No, Practice_Area,";
$sql.=" Employer, Address_1, Address_2, District, Town, Country, Status ";
$sql.=" from t_pharmacist order by PhamacistId $sLimit;";

$qr=mysql_query($sql,$connect);
$f=0;
$serial=0;
$serial=$_POST['iDisplayStart']+1;

while($q=mysql_fetch_object($qr))
{ if($f++) echo ',';

echo '["'.htmlspecialchars($q->PhamacistId).'","'.$serial++.'","'.htmlspecialchars($q->Title).'","'.htmlspecialchars($q->Surname).'","'.htmlspecialchars($q->First_Name).'","'.htmlspecialchars($q->Year_of_Reg).'","'.htmlspecialchars($q->PC_Reg_No).'","'.htmlspecialchars($q->PSGH_Reg_No).'","'.htmlspecialchars($q->Practice_Area).'","'.htmlspecialchars($q->Employer).'","'.htmlspecialchars($q->Address_1).'","'.htmlspecialchars($q->Address_2).'","'.htmlspecialchars($q->District).'","'.htmlspecialchars($q->Town).'","'.htmlspecialchars($q->Country).'","'.htmlspecialchars($q->Status).'" ]';

}//end while()

echo '] }';

}//end of
}//end of

break;

I have also attached following files:







Now, what's wrong in my coding?

allan

Nothing that I can see that is obvious :-). Can you post a link to an example please, that should make it possible to see what is going on.

Allan

jewel03cse

Please, see http://www.softworksbd.com/p/index.php
and 2nd comment of mine.

allan

Hi jewel03cse,

It looks like you are using DataTables 1.6 ( http://www.softworksbd.com/p/js/jquery.dataTables.min.js ), which is the problem. Scrolling was only added in 1.7 ( http://datatables.net/new/1.7 ). Try upgrading your copy and hopefully it will "just work" :-)

Allan

jewel03cse

Thanks a lot to you, Allan. Now, its completely ok.

x2austin

I have a slightly different problem. When the following code is executed, the scrollbar appears but the header disappears.
Thanks in advance.

//var html is initialized on demand
$('#tableFilterContainer').empty();
$('#tableFilterContainer').append($(html));
$('#return').dataTable({
"sScrollX": "100%",
"sScrollXInner": "110%"
});


'return' is the id of the table appended. I tried making the containing div scrollable (overflow-x:scroll) and the same thing happens.

nickolojon

[quote]x2austin said: I have a slightly different problem. When the following code is executed, the scrollbar appears but the header disappears.

Thanks in advance.



//var html is initialized on demand

$('#tableFilterContainer').empty();

$('#tableFilterContainer').append($(html));

$('#return').dataTable({

"sScrollX": "100%",

"sScrollXInner": "110%"

});





'return' is the id of the table appended. I tried making the containing div scrollable (overflow-x:scroll) and the same thing happens.[/quote]


Hi , all i also encountered the same problem, need help! thanks in advance

adromil

I am also having the same problem.
all the column headers are not aligned on the column data
you may check it on the #tblcontacts table uploaded on the DataTables debugger
http://debug.datatables.net/adarev

Thank you very much