Adding buttons to header or footer

Adding buttons to header or footer

bigdaddyvbigdaddyv Posts: 29Questions: 0Answers: 0
edited January 2011 in General
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

Replies

  • UPEngineerUPEngineer Posts: 93Questions: 0Answers: 1
    edited January 2011
    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_daamithun_daa Posts: 11Questions: 0Answers: 0
    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.
  • manentiamanentia Posts: 14Questions: 0Answers: 0
    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]
  • dkeandkean Posts: 2Questions: 0Answers: 0
    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.
This discussion has been closed.