[Pro] DataTables Styling

Bit of dumb question I’m afraid (what, another one!).

I’m working on a table created through DataTables. I’ve done this as a ‘local installation’ (as opposed to CDN).

All I want to do is add a couple of the non-default styling options. For example striping.

I know I need to add a class name such as: class=“stripe” but what to do beyond this I’m stumped.

And once I have the correct code where and how do I put it into my FW tables?

Many thanks.

Tim


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If you go back to my example at http://www.deltadesign.co/FW6Test/datatable.html

I added some classes to this table using Walter’s Add Selector action

In the Class field I have ‘order-column stripe row-border hover’

If you are linking to the standard CSS file then these classes will give you what you want - and more if you wish to add them.

Just add the class names with space between them and you will be GTG.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Maybe I missed this whole DataTable discussion, sadly. Still, it seems to
me that instead of affixing a style for every or every-other row, why not
use an nth-child pseudo style?

  #tableID tbody tr:nth-child(odd) { background-color: #color; }

Substituting the actual table ID for tableID … easy enough to implement
in FWP by creating new style in the Style Editor, pasting the selector into
the TAG field ( #tableID tbody tr:nth-child(odd) ), emptying the NAME
field, then using FWP’s built-in background-color color selector.

Now someone will say “Hey, but that doesn’t work in legacy browsers!” to
which I say “It perfectly satisfies the Legacy User Experience”.

If those folks wanted their content to be attractive, they would use a
modern browser. It’s not our job to force a beautiful world down their
throats


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Maybe I missed this whole DataTable discussion, sadly. Still, it seems to me that instead of affixing a style for every or every-other row, why not use an nth-child pseudo style?

The advantage of the datatable.css file is that it has support for striping etc. baked in.

You only need to add a supported class name to expose the feature.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It’s just the markup looks ham-handed and clumsy, with the tbody tr tags
each taking a class. What would I tell people, that I installed this clever
little data-table only to muck it up with inept style code?

Where did this come from anyway, before I stomp too many toes with my
effete opinions?


Ernie Simpson

On Thu, Jul 10, 2014 at 2:08 PM, DeltaDave email@hidden wrote:

Maybe I missed this whole DataTable discussion, sadly. Still, it seems to
me that instead of affixing a style for every or every-other row, why not
use an nth-child pseudo style?

The advantage of the datatable.css file is that it has support for
striping etc. baked in.

You only need to add a supported class name to expose the feature.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Great word. It’s my Word of the Day.

effete

Todd


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Where did this come from anyway, before I stomp too many toes with my effete opinions?

Mostly added by the datatables.js

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 10 Jul 2014, 5:24 pm, DeltaDave wrote:

If you go back to my example at http://www.deltadesign.co/FW6Test/datatable.html

I added some classes to this table using Walter’s Add Selector action

In the Class field I have ‘order-column stripe row-border hover’

If you are linking to the standard CSS file then these classes will give you what you want - and more if you wish to add them.

Just add the class names with space between them and you will be GTG.

David

Hi Dave,

I’ve already used the Add Selector action to give my table an ID. If I attempt to add something else (such as you suggest) it knocks that out. Or appears to.

Tim


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’ve already used the Add Selector action to give my table an ID. If I attempt to add something else (such as you suggest) it knocks that out. Or appears to.

Your adding a Class not another ID

So ‘order-column stripe row-border hover’ goes in the Class field!

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Rookie error on my part Dave. Thanks.

May I ask how you changed the font styling in your table? I’m assuming mine is using the default.

Tim


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options