3

I'm really not that fluent with JS and CSS, so I am having a hard time finding out how I could achieve the look in the image below for my data table:

data table I basically want to divide the row into three columns with widths 4-8-4 to fit the page length, export buttons, and search bar.

I patterned my DataTable from this example. The only difference is that I removed the lengthChange: false in the javascript. I tried playing around with the dom options but I've got no luck on that.

I also found a solution for the same problem from stackoverflow, but it uses bootstrap. I have no idea how I could modify it for semanticui.

Thanks!

Omar Einea
  • 2,478
  • 7
  • 23
  • 35
Whooper
  • 575
  • 4
  • 20

1 Answers1

8

Try using the following dom option:

dom:
  "<'ui grid'"+
     "<'row'"+
        "<'four wide column'l>"+
        "<'center aligned eight wide column'B>"+
        "<'right aligned four wide column'f>"+
     ">"+
     "<'row dt-table'"+
        "<'sixteen wide column'tr>"+
     ">"+
     "<'row'"+
        "<'seven wide column'i>"+
        "<'right aligned nine wide column'p>"+
     ">"+
  ">",

In your case DO NOT use this code from the example you have mentioned:

table.buttons().container()
    .appendTo( $('div.eight.column:eq(0)', table.table().container()) );
Gyrocode.com
  • 57,606
  • 14
  • 150
  • 185
  • This worked perfectly! Thanks @Gyrocode.com! I think I somehow get the idea of writing a custom dom better now from your solution. May I just know why I needed to omit `table.buttons().container().appendTo( $('div.eight.column:eq(0)', table.table().container()) );`. I just want to understand better what it actually does since JS is still confusing for me. Thanks! – Whooper Jan 08 '18 at 05:21
  • @Whooper, `appendTo()` code allows to insert HTML for Buttons into existing structure and avoid using complex structure with `dom` option. In your case using `dom` option would be much clear than modifying HTML content with JavaScript and jQuery. – Gyrocode.com Jan 08 '18 at 13:36