Trouble with custom toolbar

guerrila

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:







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('Custom tool bar! Text/images etc.');

Can someone point me to what I'm doing wrong? Perhaps I need to put my somewhere special? Any help is greatly appreciated!

allan

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

guerrila

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

allan

Try:

> <"toolbarBunny"fr>

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

Allan

guerrila

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:






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('Custom tool bar! Text/images etc.');

guerrila

Edit: If I manually create a , the line

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

does overwrite that div with the "custom toolbar" text. I just wish that text would be moved inside the _wrapper div somehow.

allan

Can you put up a test case on http://live.datatables.net so I can see what might be happening please?

Allan

guerrila

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

allan

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

guerrila

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

allan

Thanks for the beer :-)

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

Allan

guerrila

Nice! Thanks again sir!