How does the dom option work in dataTables?

Question

I have created a table with DataTables, but I don't want the table summary at the bottom because I'm not using pagination.

I have read through the Dom Option Documentation, it doesn't show an example. It just says:

i - Table information summary

I think it would go in the table constructor object, but I'm not sure how i relates to this part of the table.

Here's what I've tried:

function buildFlagTable(fcp){
  flagTableData = getFlagTableData(fcp)
  $('#flagTable').DataTable({
    data: flagTableData,
    columns: flagTableCols,
    paging:false,
    fixedHeader:true,
    scrollY:400,
    dom: { i: dontShowSummary(???) }
  })
}

So far, giving dom any value (even an empty object {}) seems to break the table all together, and nothing shows up.

How does the dom option actually work?

Answer 1

The dom option has a default element selection as defined in the documentation. So if you don't include this option it's the same as specifying

$('#flagTable').DataTable({
    dom: 'lftipr'
});

If you want to have a different layout to the default then you have to define it explicitly. So in your case, to have all the default elements minus the information summary you would put

$('#flagTable').DataTable({
    dom: 'lftpr'
});

The reason nothing showed up when you passed an empty object is because you didn't specify that you wanted the table element.

Of course all this might mess about with the layout because an element is now missing. To rectify this you would need to replace the dom value with the more detailed layout specification, by choosing from the options further down the documentation page that matches your styling framework.