Datatables in jQuery Mobile UI

srujan

Hi,

Did anyone successfully implement Datatables in jQuery Mobile UI? The closest I have found online is http://stokkers.mobi/jqm/tableview/demo.html. It's not properly documented. The features I am looking for is responsive-web-design, pagination, sorting and searching with the UI like in the link I posted. Please let me know if anyone had success with this.

allan

What aspect of DataTables doesn't currently working within that context? jQuery Mobile is just built upon standard jQuery as I understand it, and since DataTables only has a requirement upon jQuery it should just work. The only thing I think might not work is scrolling since jQuery Mobile (again as I understand it) implements its own scrolling rather than using native scrolling and thus it would require hooks into it.

Allan

jcready

It would be amazing if there was a plugin to adjust the template used to render each row from using tables, rows and cells, to using an unordered list as the wrapper and list-items as the rows. Something to convert our DataTable into something more easily optimized for devices without enough horizontal real estate. Example: http://www.andymatthews.net/code/jqm-tinysort/pretty.html

allan

Its an interesting idea, but I'd be concerned that this would add a significant amount of code to the DataTables core, which would be of less benefit than modularising DataTables (see development roadmap) where you could make the core much smaller based on what you need. Also it is quite possible at the moment to use fnSetColumnVis to change the number of visible columns based on screen size, which I would suggest would be the best way to do responsive design with DataTables.

Allan

srujan

@Allan, in the above link I posted, sorting and pagination are not working.

allan

> @Allan, in the above link I posted, sorting and pagination are not working.

I'm not sure how that relates to DataTables though, since DataTables isn't being used on that page at all.

Allan

srujan

@Allan, the javascript used in that site is essentially datatables 1.9 except that the UI is replaced with jQuery mobile UI. I posted the question here expecting if someone tried and got datatables work with jQuery mobile UI.

allan

I'm not seeing DataTables anywhere on that page. The source isn't included and if you open a Javascript console and type "typeof jQuery.fn.dataTable" you get undefined.

Perhaps you can point me to where DataTables is actually being used in the code, because I can't see it.

Allan

jcready

[quote]Also it is quite possible at the moment to use fnSetColumnVis to change the number of visible columns based on screen size[/quote]

I'm currently doing this on my project. By default there are 8 columns, and on an iPad (<1025px) I have it hiding all but the first three columns. The problem comes when you try viewing the page on an iPhone. Even held horizontally, the remaining columns are simply too tight to show the data (in a meaningful way). And the remaining columns are too important to simply hide. All I need is a way to copy the data from the last two columns and… wait a second!

I think I could simply use mDataProp to populate the first column's "type === 'display"' with the data from the first three columns, only hidden. Then just display that data in the first column with CSS (as well as hiding all but the first column) when the device-width is too small.

[code]=====================================
Column 1 data - Column 2 data is long
Column 3 data which is much longer
=====================================
Next row Column 1 - Next row column 2
…[/code]

srujan

Hi Allan,

I am sorry, I was looking at http://goo.gl/35h2L (see from *==EDIT==* ) and thought the page was using http://goo.gl/i44QN, which is datatables with jQuery mobile UI. Looks like it isn't. Can you guide me in fixing datatables to work with jQuery mobile UI?

allan

The page you linked to is using this for its table control: http://stokkers.mobi/jqm/tableview/jquery.mobile.tableview.js - which is nothing to do with DataTables.

As I mentioned before, DataTables should work just fine with jQuery Mobile. I'm not aware of any compatibility issues.

Allan

frequent

@all:

The linked to version was done by me. I have made two version of a Jquery Mobile tables plugin. The above is the "no-function" version, which only uses Jquery Mobie. I have updated the page and added a repo github:

Demo: http://www.franckreich.de/jqm/tableview/demo.html
Github: https://github.com/frequent/tableview

You are correct in this version not using datatables.

In the 2nd version I did, I plugged the functions from the first version into the datatables initialization plus the fnHeaderCallback, fnDrawCallback and fnInitComplete function. This gives the same responsive layouts in datatables. I then started to replace the JQueryUI with a JQueryMobileUI in the datatables.js, which I consider a third layout option besides Standard and JQueryUI. I haven't really finished it all the way through because I did not need everything, but whereever I'm using datatables it works fine.

I will try to write up this version with an example as well - hopefully sometime next week - and repost the link plus source code here. From what I see in my table initialization, I'm only adding a

"bJQueryMobileUI": true

attribute, so most of my Jquery Mobile datatables are initialized like this:

[code]
tblOrders = parameters.table.dataTable( {
"sDom": '<"S"f>t<"E"lp>',
"bJQueryMobileUI": true,
"sAjaxSource": "../somesource.cfc?method=ByPass",
"bStateSave": true,
"bServerSide": true,
"bNeedServer": true,
"sPaginationType": "full_numbers",
"bPaginate": true,
"bRetrieve": true,
"bCustomFilter": true,
"bLengthChange": false,
"bAutoWidth": false,
"aaSorting": [[ 9, "desc" ]],
"aoColumns": [
{ "sName": "checker", "bSortable": false }
, { "sName": "bestelltyp", "sClass": "jqmSorter"}
, { "sName": "erfasst_von", "bSortable": false }
, { "sName": "action", "bSortable": false }
, { "sName": "status", "sClass": "jqmSorter"}
, { "sName": "vk_firma", "sClass": "jqmSorter"}
, { "sName": "re_firma", "sClass": "jqmSorter"}
, { "sName": "bestellnummer", "bSortable": false }
, { "sName": "bestelldatum", "sClass": "jqmSorter"}
, { "sName": "gesamtmenge", "bSortable": false }
, { "sName": "gesamtsumme", "bSortable": false }
, { "sName": "liefdatum_gewuenscht", "bSortable": false }
],
"fnHeaderCallback": function( nHead ) {
sortableHeaderCells( nHead )
},
"fnDrawCallback": function( oSettings ){
var body = $(oSettings.nTable).find('tbody'),
butts = body.find('a'),
page = body.closest('div:jqmData(role="page")')
checks = body.find('input[type="checkbox"]');
for ( var i = 0; i < butts.length; i++){
var but = butts.eq(i);
if ( but.hasClass('enhanced') != true ){
but.addClass('enhanced').closest('td, th').trigger('create');
}
}
for ( var j = 0; j < checks.length; j++){
var chk = checks.eq(j);
if ( chk.hasClass('enhanced') != true ){
chk.addClass('enhanced').closest('td, th').trigger('create');
}
}
},
"fnInitComplete": function(oSettings, json) {
createJQMTable( oSettings, json, "init" )
}
});
[/code]

Which isn't that far from the original datatables initialization. The JQM logic runs on fnInitComplete. Since in JQM you are moving back and forth in the DOM between pages, you need some routine to ensure you are not re-initializing anything when going back to a page without reloading.

david33409

@frequent I've looked at your demo and I'm encouraged that a DataTables widget can be accomplished for JQM. Where can I find the "tweaked" datatables.js file you mention on your site?

Thank you in advance for your time and consideration.

david33409

@allan, I'm trying to evaluate DataTables in conjunction with jQuery Mobile. The biggest issue I've found it the styling of many ui- styles (e.g., ui-icon). They conflict with the ones defined in JQM. Any ideas on how to resolve this easily?

Thank you in advance for your time and consideration.

allan

> @allan, I'm trying to evaluate DataTables in conjunction with jQuery Mobile. The biggest issue I've found it the styling of many ui- styles (e.g., ui-icon). They conflict with the ones defined in JQM

Can you link me to an example page please? DataTables adds icons such as `ui-icon ui-icon-carat-2-n-s` for sorting - but doesn't define them itself.

Allan

rgriffin

Sorry if I'm bringing up a dead subject but I think it's still relevant. I am wondering how this http://www.datatables.net/blog/Twitter_Bootstrap_2 fits into the discussion. Specifically, Bootstrap HTML is responsive however, I don't see that behavior in the demo.

Thanks!