Adding buttons to header or footer

bigdaddyv

What do you suggest as the quickest and easiest method to add my own button to either the header or footer? I am use bJqueryUI = true

UPEngineer

I did this using a custom div and inserting it into the header using the sDom method.

For example, I have a div with a class of .process_status that looks like this...Abbreviated of course just for an example.

[code]
$(".process_status").html("Test");
[/code]

Then I inject it into the header using the sDom like this:

[code]
"sDom": 'R<"process_status">T<"clear"><"ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>'
[/code]

I use CSS to style and do minor positioning adjusments to this div class.

You can read all about the sDom here:
http://datatables.net/examples/basic_init/dom.html

Hope this helps.

Scott

mithun_daa

First off, I was confronted with a choice of selecting a jQuery Grid/Datatable and I am so glad i chose Datatable instead of something else. There is no way any of the other plugins out there would have met my demands. Thank you for this great plugin.

Anyways, I am trying to achieve the same thing as bigdaddy but to no avail. Can someone please help? I want to add a button to the top left of the table in the header in place of the "Show X Enteries" in the page
http://datatables.net/release-datatables/examples/basic_init/zero_config.html

In my html i have a simple div at the bottom of the page
[code]


[/code]

then, before initializing the datatable i call:
[code]
var buttonPlaceholder = $("#buttonPlaceholder").html("Test");
[/code]

and then

[code]
projTable = $('.projDataTable').dataTable({
"sDom": 'R<"buttonPlaceholder">H<"clear"><"ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>',
"bAutoWidth": false,
"bJQueryUI": true,
"bLengthChange": false,
.......
});
[/code]

Any help would be greatly appreciated.

manentia

According to the docs, you're missing # from sDom (since that's the ID of your div, not class):

[code]
projTable = $('.projDataTable').dataTable({
"sDom": 'R<"#buttonPlaceholder">H<"clear"><"ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>',
"bAutoWidth": false,
"bJQueryUI": true,
"bLengthChange": false,
.......
});
[/code]

dkean

Add it to the DIV in which the DataTable is placed and use the style="position:absolute; left:50px; top:100px;" to position it where you want it! That's how I am positioning elements on the DataTable.