Answers

• kthorngren Posts: 21,343Questions: 26Answers: 4,954

  April 2019

  Its likely a CSS issue. The Buttons with BS 4 example seems to work correctly. The problem looks to be isolated to your environment. For us to help debug your page please post a link to your page or a test case replicating the issue.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin
• artbermas Posts: 3Questions: 1Answers: 0

  April 2019

  Its likely a CSS issue. The Buttons with BS 4 example seems to work correctly. The problem looks to be isolated to your environment. For us to help debug your page please post a link to your page or a test case replicating the issue.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin

  Thank you for your quick reply.

  I'll take a closer look first into that link you posted, maybe I missed something.

  Just to be sure, I have cleared all my custom css except for this -> white-space: nowrap;

  I even remove the Navbar, just to be sure, but no luck.

  If I cannot fix it, I will provide a test case.

  Again, thank you very much.
• artbermas Posts: 3Questions: 1Answers: 0

  April 2019

  The issue seems to be happening at DataTables' CSS of the btn-group (see below)

  btn-group, .btn-group-vertical {
      position: relative; /* this seems to be the issue */
      display: -ms-inline-flexbox;
      display: inline-flex;
      vertical-align: middle;
  }
  

  I just replaced position: relative to position: absolute and everything lined up.
• rldean1 Posts: 141Questions: 66Answers: 1

  September 2019

  @artbermas & @kthorngren

  I'm experiencing the same exact problem.

  I tried the same CSS 'fix' you'd mentioned, but it goes deeper than that.

  In my situation, the example_wrapper div is missing all the BS rows and columns. Specifically, there should be three rows, one for the header, table, and footer.

  I can't figure out why they're missing, yet.

  I used the download builder to download the DT files, and I also used the concatenated/minified string as well.
• allan Posts: 63,535Questions: 1Answers: 10,475 Site admin

  September 2019

  Hi @raydlevel5 - If you give me a link to your page I'd be happy to take a look and see what the problem is.

  Thanks,
  Allan
• rldean1 Posts: 141Questions: 66Answers: 1

  September 2019

  @allan

  Cool, okay, I was able to replicate it here:

  http://live.datatables.net/hofolece/1/edit?html,js,output

  I can get the 3 BS rows to come back by commenting-out dom: Bft.

  I'm pretty sure I'm following the examples to the letter, unless I'm totally missing something.
• allan Posts: 63,535Questions: 1Answers: 10,475 Site admin

  September 2019

  dom: "Bft",

  That is basically telling DataTables to layout the table and its feature plug-ins (like Buttons) as simply:

  1. Buttons
  2. Filter
  3. Table

  There is no information about a grid layout. If you have a look at the dom documentation you'll see that the Bootstrap default includes grid elements to get the layout, so you need to do something similar: http://live.datatables.net/hofolece/5/edit .

  Allan
• rldean1 Posts: 141Questions: 66Answers: 1

  September 2019 edited September 2019

  I owe an explanation (for hopes it might help someone else)

  In my other apps, I've never had to manipulate dom to get BS buttons to show. Perhaps this is a peculiar scenario, being that I'm opening a DT in a BS modal, or perhaps something is wrong with my application -- like the order of operations.

  Order of operations, buttons will NOT show (for me specifically):

  1. establish JS var containing jQuery table structure html = $('<table/>').attr({ id: "tblCluster", class: "table table-striped table-bordered" }).css({ width: "100%" });
  2. append table structure to DOM and use BS to open a modal with that HTML structure
  3. initialize the Editor (instance is using AJAX and a callback)
  4. initialize the DataTable ((instance is using AJAX and a callback))
  5. append the buttons (didn't work) tblCluster.buttons().container().appendTo('#tblCluster_wrapper .col-md-6:eq(0)');
  6. activate inline edit

  FIX (observation)

  The only way I was able to get the BootStrap buttons to append was by typing the append statement (line #5 above) in the console. This led me to believe somehow my app was losing access to the scope where the table is defined... or maybe things were happening too fast for tblCluster.buttons().container().appendTo() to finish.

  SO.... what I ended up doing was moving the append statement to a "DataTables on init" option: }).on('init.dt', function(){

  That way, I was guaranteed for the table to be fully established before trying to append the buttons.

  Anyway, that's what worked for me.
• rldean1 Posts: 141Questions: 66Answers: 1

  September 2019 edited September 2019

  OHHHHH and side note: get rid of DOM if you're trying to have the BS buttons!!!!

  Yeah, you don't get the correct BS framework for your table if you include DOM!!!

  OH OH OH, and if you still want all the other bells and whistles, instead of using DOM, then use the corresponding "real text" options:

                                  // instantiate the DataTable
                                  tblCluster = $('#tblCluster').DataTable({
                                      //dom: "Bft", // DON'T USE WITH BS (MY OPINION)
                                      // pageLength: -1,
                                      paging: false,
                                      lengthChange: false,
                                      searching: true,
                                      info: true,
  
• allan Posts: 63,535Questions: 1Answers: 10,475 Site admin

  September 2019 edited September 2019

  Yup - the dom option is a bit tricky with Bootstrap (and the other integrations) which is why we typically don't use it in our examples.

  This is a known pain point in DataTables and v2 is going to fix that with a new layout option (actually, I've committed that feature already, but there is a ton of other stuff still to do for v2).

  Allan