Horizontal Scrolling Problem
Horizontal Scrolling Problem
jewel03cse
Posts: 11Questions: 0Answers: 0
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?
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?
This discussion has been closed.
Replies
Allan
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()
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
and 2nd comment of mine.
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
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.
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
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