the sDom parameter

the sDom parameter

marlarmarlar Posts: 11Questions: 0Answers: 0
edited March 2009 in General
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
«1

Replies

  • allanallan Posts: 55,056Questions: 1Answers: 8,638 Site admin
    edited March 2009
    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
  • marlarmarlar Posts: 11Questions: 0Answers: 0
    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
  • atlas3650atlas3650 Posts: 11Questions: 0Answers: 0
    edited July 2009
    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,
  • atlas3650atlas3650 Posts: 11Questions: 0Answers: 0
    edited July 2009
    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.
  • allanallan Posts: 55,056Questions: 1Answers: 8,638 Site admin
    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
  • mathiemathie Posts: 36Questions: 0Answers: 0
    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?
  • allanallan Posts: 55,056Questions: 1Answers: 8,638 Site admin
    Hi mathie,

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

    Regards,
    Allan
  • camainccamainc Posts: 19Questions: 3Answers: 0
    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!
  • iPatchiPatch Posts: 3Questions: 0Answers: 0
    Hello,

    I'm trying to place the filter input inside a caption element I have in my table, is that possible with sDom?
  • allanallan Posts: 55,056Questions: 1Answers: 8,638 Site admin
    No - sDom wouldn't do that. You would need to use standard jQuery / DOM methods (i.e. appendChild) after DataTables has been initialised.

    Allan
  • iPatchiPatch Posts: 3Questions: 0Answers: 0
    OK, thanks for the quick answer! :-)
  • LuchianLuchian Posts: 4Questions: 0Answers: 0
    edited May 2012
    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
  • johnmkanejohnmkane Posts: 1Questions: 0Answers: 0
    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
  • allanallan Posts: 55,056Questions: 1Answers: 8,638 Site admin
    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
  • dddddd Posts: 1Questions: 0Answers: 0
    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
  • allanallan Posts: 55,056Questions: 1Answers: 8,638 Site admin
    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
  • BurnsideBurnside Posts: 1Questions: 0Answers: 0
    Hi,

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

    [code]sDom: 'CT<"clear">lfrtip',[/code]
  • dwitdwit Posts: 6Questions: 0Answers: 0
    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?
  • allanallan Posts: 55,056Questions: 1Answers: 8,638 Site admin
    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
  • NicolaiNicolai Posts: 2Questions: 0Answers: 0
    edited April 2013
    fixed.
  • allanallan Posts: 55,056Questions: 1Answers: 8,638 Site admin
    Looks like a CSS issue to me. Use Firebug or Chrome inspector to see what is happening to your CSS class.

    Allan
  • NicolaiNicolai Posts: 2Questions: 0Answers: 0
    edited April 2013
    fixed.
  • beebekbeebek Posts: 20Questions: 1Answers: 0
    edited August 2013
    "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]
  • allanallan Posts: 55,056Questions: 1Answers: 8,638 Site admin
    Put the C and T in the same sDom definition. Each letter is a feature.

    Allan
  • beebekbeebek Posts: 20Questions: 1Answers: 0
    edited August 2013
    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.. :(
  • allanallan Posts: 55,056Questions: 1Answers: 8,638 Site admin
    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.
  • beebekbeebek Posts: 20Questions: 1Answers: 0
    edited August 2013
    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...
  • allanallan Posts: 55,056Questions: 1Answers: 8,638 Site admin
    Please link to a test case showing the issue: http://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read
  • beebekbeebek Posts: 20Questions: 1Answers: 0
    edited August 2013
    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
  • beebekbeebek Posts: 20Questions: 1Answers: 0
    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 :)
This discussion has been closed.