Datatables sDom challenge add new element to bottom left of table

Question

I want to add a "refresh" button to my tables at the bottom of the table. But I just started using datatables and its a bit confusing as is the "sDom" part where it says I can do this through that means but the description is vague at best.

"sDom": '<"top"i>rt<"bottom"flp><"clear">'

is the datatables.net example, but I dunno how to make heads or tails of that and all I want to do is one simple thing.

Or is there an outside of "sDom" that would be better suited for what I want to do?

Answer 1

Here's a live example of a modified sDom.

http://live.datatables.net/onaqul/edit#javascript,html,live

Here we're injecting a div called <div id="refresh"></div> with the structrue <"#refresh">.

    $('#example').dataTable({
        "sDom": '<"top"i>rt<"bottom"<"#refresh">flp><"clear">'
      });

If you inspect the generated dom in the example, you can see <div id="refresh"></div> got inserted inside of <div class="bottom"></div>.

I think much depends on (1) how your specific table has its footer elements layed out, (2) where you decide to inject your specific element using sDom, and (3) how you style the element(s) with your CSS.

Alternatively, you could have a button created outside of the datatables environment, but use jquery to append or prepend your button to one of the dom elements datatables creates.

Hope this is a useful starting point.

Answer 2

I agree with you that the DataTables 'sDom' property is confusing. Personally I just set sDom equal to 't', which creates just the table, and I add any buttons or what have you outside of the DataTables code using jQuery or some other method. Not much of an answer, but that's what I would do if I were in your situation and wanted to do something simple like add a button.