DataTables logo DataTables

via Ad Packs
Trouble with custom toolbar
  • guerrilaguerrila
    Posts: 8
    Hello,

    New to dataTables, I'm trying to implement a simple custom search element using the sDom example located here: http://datatables.net/release-datatables/examples/advanced_init/dom_toolbar.html

    Using exactly the code listed there, my "custom tool bar!" text isn't showing up in my table (but it does showup, just nowhere near the table). My code looks like this:


    <div class="toolbar">

    </div>

    <script type="text/javascript" language="JavaScript">
    var oTable;

    $(document).ready(function() {
    oTable = $('#billerTable').dataTable({
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "blahblahblah",
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "sDom": '<"H"<"toolbar">fr>t<"F"ip>',
    "aoColumns": [
    { "mDataProp": "name" },
    { "mDataProp": "type" },
    { "mDataProp": "category" },
    { "mDataProp": "time" }
    ]
    });
    });

    $("div.toolbar").html('<b>Custom tool bar! Text/images etc.</b>');

    Can someone point me to what I'm doing wrong? Perhaps I need to put my <div class="toolbar"> somewhere special? Any help is greatly appreciated!
  • allanallan
    Posts: 15,531
    It probably just needs styling I would imagine - unless you have another DIV with a class of toolbar somewhere - it would be appended to the last node found in the DOM. $('div.toolbar') on the console would be a way to find that out.

    Allan
  • guerrilaguerrila
    Posts: 8
    Thank you Allan for your response. I changed my class to "toolbarBunny" and I'm positive it's not being used elsewhere in the document. I still however am not able to bring my "Custom tool bar! Text/images etc." near my datatable.

    When you say it probably just needs styling, do I need to add additional CSS manually to move it into the table? I was thinking it's a problem with my sDom notation. I would have thought the "<"toolbarBunny">fr>" part would indiciate that toolbarBunny should be part of the filtering input section? I guess I'm just still fuzzy on how to add things to the search header.

    Thanks
    Pedro
  • allanallan
    Posts: 15,531
    Try:

    <"toolbarBunny"fr>

    Also look at the DOM that is generated in Firebug which might give an idea of what is happening.

    Allan
  • guerrilaguerrila
    Posts: 8
    I think we're getting closer :) ... So using that exact sDom declaration you posted above: <"toolbarBunny"fr>

    I still don't see my "Custom tool bar" text. However, using Firebug I DO see a div created that has a class of "toolbarBunny"--and it is correctly inside the _wrapper div. It just doesn't have any custom text inside it:

    <div id="billerTable_wrapper" class="dataTables_wrapper" role="grid">
    <div class="toolbarBunny">
    <div id="billerTable_filter" class="dataTables_filter">
    <label>

    I guess I would have expected the "custom tool bar" text inside the "toolbarBunny" div, just above the _filter div. It's almost as if this line didn't work:


    $('div.toolbarBunny').html('<b>Custom tool bar! Text/images etc.</b>');
  • guerrilaguerrila
    Posts: 8
    Edit: If I manually create a <div class="toolbarBunny">, the line

    $('div.toolbarBunny').html('<b>Custom tool bar! Text/images etc.</b>');

    does overwrite that div with the "custom toolbar" text. I just wish that text would be moved inside the _wrapper div somehow.
  • allanallan
    Posts: 15,531
    Can you put up a test case on http://live.datatables.net so I can see what might be happening please?

    Allan
  • guerrilaguerrila
    Posts: 8
    Hi Allen,

    I've put up the test case: http://live.datatables.net/atizes/3

    Really cool tool! Thanks again for taking a look.

    Cheers
    Pedro
  • allanallan
    Posts: 15,531
    Thanks - this is the issue:

    '<"toolbarBunny">frtip'

    creates a DIV with a class of "toolbarBunny", while this:

    $('#toolbarBunny')

    looks for an element with the id of toolbarBunny.

    To fix, just have DataTables create the element with an ID rather than a class: http://live.datatables.net/atizes/4/edit

    Allan
  • guerrilaguerrila
    Posts: 8
    Ahhhh!! Thanks SO much for the clarification. I have now officially donated beer money! :)

    One last nit though--it seems under this model the custom text is to the left and actually ABOVE the search bar itself--is there a way to move it to the same line as the search bar, like in http://www.datatables.net/release-datatables/examples/advanced_init/dom_toolbar.html ?

    Cheers
    Pedro
  • allanallan
    Posts: 15,531
    Thanks for the beer :-)

    For the positioning - just float it to the left: http://live.datatables.net/atizes/5/edit

    Allan
  • guerrilaguerrila
    Posts: 8
    Nice! Thanks again sir!
This discussion has been closed.
← All Discussions

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Apply for Membership

Support

Get useful and friendly help straight from the source.

Categories

In this Discussion