Changing the dom option

Changing the dom option

mazingmazing Posts: 5Questions: 3Answers: 0

The reference page about the dom option says

Note, I am aware that this is the most complex option in DataTables and it takes a fair amount of understanding, particularly when using the styling integration options! The plan is to revamp this option in 1.11 to make it easier to use.

Are there still plans to make customization easier? For instance, I want my table to be inside a bootstrap panel with filtering, pagination, etc. being in the panel-heading and panel-footer, but I cannot add more custom buttons to the panel-heading and panel-footer, all the elements (including the table itself) has styled classes (such as .dataTable, .no-footer, .dataTables_length, etc.), which makes the layout really difficult to customize.

The package is fantastic, but I cannot use it if it just looks like the default DataTables table.

Answers

  • jLinuxjLinux Posts: 981Questions: 73Answers: 75
    edited October 2015

    What peoblwms are you having with customizing it? I was able to accomplish just about everything i needed, regarding the CSS anyways

    Here is the code i used to style the buttons to move them to a separate panel, here are the screenshots:

  • mazingmazing Posts: 5Questions: 3Answers: 0

    Thanks for your answer.

    I am not trying to customize the Buttons.

    I just want to put the filtering, pagination, etc. in panel-heading og panel-footer.

    Besides, I want to put additional html elements next to the filtering, pagination, etc.

    The big problem is that DataTables applies margin, floating, etc. to the different elements, so it's a mess to fix it.

    From your code, I see I can append additional elements to a div element, which probably solves my problem with adding extra custom elements next to the other elements.

This discussion has been closed.