the sDom parameter

marlar

Hi Allan,

I don't fully understand the sDom syntax. Take your example:

"sDom": '<"top"i>rt<"bottom"flp><"clear">'

How do I read this?

I understand the letters as identifying parts of the table elements, but

< and > - div elements
<"class" and > - div with a class

is really not clear to me!

Thanks,
Martin

allan

Hi Martin,

The sDom syntax is a little bit obscure at first glance. I've done it this way in order to keep it concise. Possibly the best way of thinking of it is that

'<' gives ''
'<"class"' gives ''
'>' gives ''

So the example above is really:

[code]

i

rt

flp


[/code]

Does this help to understand it better?

Allan

marlar

Hi,

Thanks, that helped!

I initially thought that the divs referred to existing divs, but now I understand that the datatable actually injects these divs are the given position.

Martin

atlas3650

Hi,

It looks like you can render the pager twice, but not the info. I need to render both twice. Thus:


"sDom": '<"pager"p>t<"pager"p><"info"i><"clear">',


works but


"sDom": '<"info"i><"pager"p>t<"info"i><"pager"p><"clear">',


does not render the info section twice.

Neither does something simpler:


"sDom": '<"pager"ip>t<"pager"ip><"clear">',


Any ideas why?

Thanks,

atlas3650

Also, the full_numbers pager does not render the page numbers on the top (but it does render the first/previous/next/last controls on the top) when you request rendering it both on the top and the bottom.

allan

Hi atlas3650,

Rendering elements twice (pager, info etc) is not supported in the built-in DataTables DOM handling. If you want to do this you need to either use the API, or modify the source code. The API will certainly help with the paging, but there isn't really a method to deal with the info element directly. What you could do is use the fnDrawCallback() function and update other elements on the page as you see fit.

Regards,
Allan

mathie

I just want to modify the default layout a little bit (move the length dropbox to the bottom). Can someone post the positioning string for the default layout?

allan

Hi mathie,

The default is given in the documentation: http://datatables.net/usage/options#sDom (click on the "Show Details" link).

Regards,
Allan

camainc

The more I use this tool, the more amazed I am. I had been using CSS to remove the toolbars, until I ran into a situation where I needed two tables on the same page, one with and one without toolbars. I'm glad you added this functionality into your code!

iPatch

Hello,

I'm trying to place the filter input inside a caption element I have in my table, is that possible with sDom?

allan

No - sDom wouldn't do that. You would need to use standard jQuery / DOM methods (i.e. appendChild) after DataTables has been initialised.

Allan

iPatch

OK, thanks for the quick answer! :-)

Luchian

Thought I share an alternative solution for [quote]filter input inside a caption element[/quote] - You could define your entire at design time, including a for your filter boxes. Just make sure that the real caption row is the last one in , and, after intializing the table, you switch it, to be first. (that is because it seems that datatables picks the last row in the thead to make its captions).
To make that caption row be first (actually, the filter row be second), I use this litle jq script:
[code]$('#rowFilters').next().after($('#rowFilters'));[/code]
hth

johnmkane

Is it possible to use SDOM to render parts of the datatables UI (pagination in my case) in pre-existing/hardcoded divs (rather than creating new divs dynamically as in the SDOM examples)? Or maybe there is a simpler way to do this?

Many thanks,
John

allan

sDom can only control generated elements which are within the DataTables container.

However, what you can do is simply move the generated elements from there generated position to somewhere else in the DOM after the initialisation is complete with standard jQuery / DOM methods (i.e. append / appendChild).

Allan

ddd

I'm still really confused by this sDom syntax. I have two custom "extras" sitting on top of each other and I'd like to fix it using this syntax if possible... moving one to the left side. It's these two - ColVis and TableTools:

"sDom": 'C<"clear">lfrtip',
"sDom": 'T<"clear">lfrtip',

Is there a way to fix the alignment using this?

Thank you!
Darcy

allan

sDom is relatively simply when you get used to it. Each letter in it is a feature. So if you want ColVis and TableTools you could use:

> sDom: 'CTlfrtip'

Just TableTools and all the standard DataTables features:

> sDom: 'Tlfrtip'

Just the table a filtering:

> sDom: 'ft'

The angle brackets allow an element to be injected, which can be useful, but isn't required.

That puts the feature elements into the DOM in that order. Then you can simply position them using standard CSS - float:left etc.

Allan

Burnside

Hi,

Thank's for your post it help me, I have done like this:

[code]sDom: 'CT<"clear">lfrtip',[/code]

dwit

I would like to insert a dropdownlist with listitems into the toolbar, centered between the Show Entries and the Search features. I have bJQueryUI = true. Is this possible with sDom? If so, how would I do it?

allan

You'd inject it using method like this: http://datatables.net/release-datatables/examples/advanced_init/dom_toolbar.html - or create a feature plug-in: http://datatables.net/blog/Creating_feature_plug-ins

Allan

Nicolai

fixed.

allan

Looks like a CSS issue to me. Use Firebug or Chrome inspector to see what is happening to your CSS class.

Allan

Nicolai

fixed.

beebek

"sDom" : 'C<"clear">lfrtip',
"sDom" : 'T<"clear">lfrtip',

I want colvis at left and tabletools at right...how can this be obtained..like
[colvis]..........................[tabletools]
....................................[search]

allan

Put the C and T in the same sDom definition. Each letter is a feature.

Allan

beebek

Thanks for reply...I've put like this
//sDom: 'TClfrtip',
I want Colvis in the left most side and Tabletools in the rightmost side....

Also after using
"sDom": 'TC<"clear">lfrtip',

After unticking some checkbox, now the background becomes LOCKED, i cannot click the page.. :(

allan

Put the C on the left of the T in that case. You might also need to change the CSS to position them as you need.

beebek

Oh..ok..I'll change the CSS, but now the background is locked after using Colvis, need to refresh again, but the disabled column comes again...
BTW, I have a really big no. of columns..probably around 40 columns...

allan

Please link to a test case showing the issue: http://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read

beebek

Thanks allen and sorry for some unknown and less detail error. I found this, if it helps

TypeError: jQuery.browser is undefined
[Break On This Error]

if ( jQuery.browser.msie && jQuery.browser.version == "6.0" )

ColVis.js (line 856) <- error in this line

I am using Firefox23.0

beebek

ColVis.js line no 856
// if ( jQuery.browser.msie && jQuery.browser.version == "6.0" )
if ( jQuery.support.boxModel )
{
that._fnDrawCallback();
}

since jQuery.browser has been discontinued, just to pass I used this code, dont know what actually its for. But I guess it's there to check the Microsoft Internet Exploerer version...
Although it seems to solve the issue...

But from discusstion
https://github.com/DataTables/ColVis/pull/16
and
http://datatables.net/forums/discussion/13528/datatable-1.9.4-colreorder-cannot-call-method-proxy-of-undefined/p1

its seems that it was solved but I think it isnt...I've just pulled codes some days ago..(23rd Aug 2013, Datables version 1.9.3)

Please fix the issue...
By the way....NICE jquery library.... CHEERS :)