DataTables

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.
<code>
<head>
<script type="text/javascript" charset="utf-8"
src="lib/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf-8"
src="lib/js/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" charset="utf-8"
src="js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css" />
</head>
<body>
<div data-role="page" id="TaskListPage">

<script type="text/javascript">
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();
} );

</script>
<div data-role="content" id="TaskListContent">
<table id="demo">
<thead>
<tr>
<th>Client<br>Name</th>
<th>Desc</th>
<th>Date <br>Recd.</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>12234</td>
<td>test</td>
<td>12-09-2011</td>
<td>New</td>
</tr>
<tr>
<td>34543</td>
<td>abcd</td>
<td>12-09-2012</td>
<td>In Process</td>
</tr>
</tbody>
</table>

</div>
</code>

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('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');
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");

});

DataTables

Howdy, Stranger!

Support

Categories

In this Discussion