Since our project requires a single code base for both desktop and mobile clients, the list we choose needs to look good in both places. Ideally, we could limit ourselves to just the JQuery-Mobile styles, and it would look good on both. This post attempts to investigate that objective:

Useful Links

• Doc – http://jquerymobile.com/test/index.html
• ThemeRoller – http://jquerymobile.com/themeroller/
• List Content formatting – http://jquerymobile.com/test/docs/lists/lists-formatting.html

What styles apply to a list?

Here’s my first attempt at styling a DataTables table using JQuery-Mobile styles

Ignore how ugly it looks …I’m just learning about JQuery-Mobile styles, and I’m trying lots of different things in this image all at once.

NOTE 1: I have not yet redefined the style definitions in my Theme-Roller produced stylesheet. That’s why it looks so ugly.

NOTE 2: I tried letting JQuery-Mobile apply its styles based on the data-role type attributes …but you’ll note that doesn’t seem to work for a dynamically-produced table

NOTE 3: For now, I’m using swatch “A” from my stylesheet. Not quite sure yet if I’ll want to create a swatch just for tables or not. For now, I’m thinking no …each swatch could redefine the table’s appearance.

Here’s what I learned

JQuery Mobile – Applying the correct List styles

• For now anyways, the closest thing to tables JQuery-Mobile has support for is “lists”
• Therefore, I applied the following styles which are the same styles JQuery-Mobile lists use:
  • table headings – ui-li ui-bar-a
  • rows (<tr>) – ui-li ui-btn ui-btn-up-a
  • row hovers – ui-btn-hover-a
  • Heading data in cells – ui-li-heading
  • Normal text in cells – ui-li-desc
  • Bolded data in cells – just use <strong> around text within the ui-li-desc div
  • I still need to style the pagination control. I will probably use DataTable’s various $.fn.dataTableExt.oStdClasses.* variables to do that.
    • I guess on that note, you’ll find that I set the “bJQueryUI” flag to false
    • JQuery UI’s styles just conflict too much with JQuery-Mobile’s styles

Making Changes to the List style definitions

• I also updated some of the styles in my ThemeRoller-produced style sheet
  • added ui-bar-a:hover – to give a hover effect on the column headers

JQuery Mobile – “Data-Role” Attributes

• I also had to mess around with a few other things to get it to behave properly within a JQuery-Mobile environment
  • just to be proper, I added the “ui-listview” style to the DataTables table object
  • likewise, I added the data-role of “listview”
  • I had to redefine the display attribute for rows to table-row
  • and did the same thing for header rows: display:table-row;
• Note the data-icon=’arrow-r’ text in the bar above the table. See the little “right arrow” icon at the far-right of the bar. Seems to work fine.
  • Now take a look at the same text in each row’s “Name” column. The text is there, but the actual icon isn’t.
  • In other words, I can’t seem to get JQuery-Mobile to dynamically render my styles within the table. More on this in a future post I suspect

DataTables – sDOM – moving things around

• Take a look at the navigation and search bars …they’re way at the top of the screen
  • That’s because I created my own <div>s and wanted to move these controls elsewhere in the document
    • var search = $(‘.dataTables_filter’); $(‘#search’).append ( search );
    • var navBar = $(‘.dataTables_paginate’); $(‘#page_nav_bar’).append ( navBar );
  • Why didn’t I just use sDOM to move things around?
    • Because sDOM can only create the various DataTable controls above or below the table (even both).
    • But it cannot create them disconnected from the table. In my case, I will have other controls between the table’s search box and the table itself.
    • I think using JQuery’s append() method to move things around is quite nice …except it does this after the items are already attached to the DOM …this might be a flicker or speed issue. More on this later…