Scrollbar not working in android device

vijay_makam

I am using the data Table library to show a table with pagination and scroll bar enabled in my android device. The scrolling works fine when tested on desktop web browser. But if I test it on my android device (using phonegap and jquery mobile) the scrolling doesn't work. Below is the code. Any pointers is highly appreciable.













var otable;
function decorateTable(){
otable = $('#demo').dataTable( {

"sScrollY": "350",
"bAutoWidth": true,
"sScrollX": "100%",
"bProcessing": true,
"bPaginate": true,
"bFilter": false
} );
}

//$("#demo tbody tr").click( function (e) {
// var rowData = otable.fnGetData( this );
// alert( 'The row\'s first cell clicked on had the value of '+rowData[0] );
// } );


$(document).on('pageinit','[data-role=page]',function(){
decorateTable();
} );






Client
Name
Desc
Date
Recd.
Status




12234
test
12-09-2011
New


34543
abcd
12-09-2012
In Process

allan

I think jQuery Mobile implements its own scrollbars (not 100% certain, but I seem to remember that...) - which might be part of the issue. If you load a normal DataTables scrolling example ( http://datatables.net/release-datatables/examples/basic_init/scroll_y.html ) on your Android device does it work okay?

Allan

vijay_makam

Hi Allan,

Thanks for the reply. No the basic datatable scrolling pointed in the link above also doesn't work in Android.

quilkin

I'm using jquery mobile 1.2 and DataTables 1.9.4 with PhoneGap and scrolling tables work well - up to a point - on both android 4.2 and ios5 - I'm getting tables which fit the screen properly and scroll nicely . But I'm trying to use an event on clicking one of the rows - this works fine with the same code on a desktop browser, but has different results on Android and iOS:
on Android the click event is actioned but the new window doesn't get given the variable from the opener window (this is probably not a DataTable issue though); in ios the click event doesn't action at all.
My code is below (I'm a jscript newbie so please forgive any bad usage!)

$('#eventList').html('');
var oTable = $('#example').dataTable({
"sScrollY": 200,
"bjQueryUI" : true,
"bPaginate": false,
"bScrollCollapse": true,
"aaData": dataArray,
"aoColumns": [
{ "sTitle": "number" },
{ "sTitle": "name" }
]
});

$('#example tbody tr').live('click', function () {
var sTitle;
var nTds = $('td', this);
var sNumber = $(nTds[0]).text();
var sName = $(nTds[1]).text();

riderNumber = sNumber;
newWindowObj = window.open("Rider.html", "sName");

});