Datatables sDom task to add a new element in the lower left corner of the table

Question

I want to add the Refresh button to my tables at the bottom of the table. But I just started using datatables, and it's a bit confusing, like the "sDom" part, which says that I can do this with this tool, but the description is vague at best.

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

is an example of datatables.net, but I don't know how to make the heads or tails of this and all I want to do is a simple thing.

Or is there an “sDom” that is better suited for what I want to do?

Answer 1

Here is a live example of a modified sDom .

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

Here we introduce a div called <div id="refresh"></div> using structrue <"#refresh"> .

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

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

I think a lot depends on (1) how your particular table has footer elements, (2) where you decide to enter your specific element using sDom and (3) how you style the element using CSS .

Alternatively, you can create a button created outside of the datatables environment, but use jquery to add or add your button to one of the elements created by the datatables elements.

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 to 't' , which only creates a table, and I add any buttons or whatever you have outside the DataTables code using jQuery or some other method. There is not much answer, but what I will do if I was in your situation and would like to do something simple, for example add a button.