DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Bootstrap 4 Not Initializing

Bootstrap 4 Not Initializing

zgoforthzgoforth Posts: 493Questions: 98Answers: 2
in Free community support

Hello, so I am trying to implement the Bootstrap 4 styling for my DataTable, but when I put the .js and .css files into the top of my code to initialize it, nothing happens. I copied the exact order of .js and .css files that is in my code and put into this test case. https://jsfiddle.net/2oyz4q3e/

Replies

  • kthorngrenkthorngren Posts: 21,342Questions: 26Answers: 4,954

    There are a few problems. First you need to load Bootstrap itself. Take a look at the Bootstrap 4 example. open the CSS tab and you will see this:
    https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css

    I added this to your example.

    You are loading conflicting CSS by using jquery.dataTables.min.css. I commented this out of your example.

    You also should use Bootstrap classes on the table tag. You can see these by clicking the HTML tab of the example.

    Here is the updated example:
    https://jsfiddle.net/qt94h281/

    The easiest way to get the proper files is to use the Download Builder. The BS4 Styling doc contains more information.

    Kevin

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    @kthorngren Ok. Thank you, I fixed that. Now my Table looks like this,

    I want to move the buttons "Excel, PDF, and Print to the right side, so I tried this

    .dataTables_wrapper .dt-buttons {
  float:none;  
  text-align:right;
}

    and the buttons do not move.

  • kthorngrenkthorngren Posts: 21,342Questions: 26Answers: 4,954

    The Buttons doc explains how to display the buttons. You are using the dom option for this. So you basically need to place the B in the string where you want it. The dom docs show an example of using Bootstrap 4 classes to place the elements where you want.

    Kevin

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    @kthorngren so I altered around the "B" to dom: 'frtBip', aswell as tried different placements, and it won't move to the right, either goes above my search bar, below my search bar, or below the footer of the table.

  • kthorngrenkthorngren Posts: 21,342Questions: 26Answers: 4,954

    Did you look at the Bootstrap 4 classes for the dom option?

    If you are having problem please update your test case and provide the new link.

    Kevin

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    @kthorngren Yes. I looked at the Buttons feature as well as the dom option, and followed as instructed on each page. I will add a test case to show you. I changed the dom:'Bfrtip', to dom:'frBtip', and I still cannot get the buttons on the right side. It only goes on the left side whether it be the top or bottom.

  • kthorngrenkthorngren Posts: 21,342Questions: 26Answers: 4,954
    edited September 2020

    I changed the dom:'Bfrtip', to dom:'frBtip', and I still cannot get the buttons on the right side

    You still aren't using the Bootstrap 4 styling for the dom option. Look at the dom docs here. You need to use the Bootstrap Grid System to layout the elements.

    Kevin

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    @kthorngren here is my test case. For some reason my static Data variable is not loading into the table https://jsfiddle.net/uv5eh3nz/

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    @kthorngren I looked at it, I do not understand what this is and where to implement it?
    "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",

  • kthorngrenkthorngren Posts: 21,342Questions: 26Answers: 4,954

    here is my test case. For some reason my static Data variable is not loading into the table

    The script has this error:

    Uncaught SyntaxError: Invalid destructuring assignment target

    I looked at it, I do not understand what this is and where to implement it?

    You have dom:'frBtip',. Replace the frBtip string with the example Bootstrap string. For example:
    https://jsfiddle.net/qt94h281/1/

    Kevin

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    @kthorngren Thanks for the clarification. One last question. Is it possible to change the color of the buttons?

  • kthorngrenkthorngren Posts: 21,342Questions: 26Answers: 4,954

    See this thread.

    Kevin

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    @kthorngren in the test case linked here. I want the buttons to be the "dark" class, http://live.datatables.net/yonakowu/602/edit but it doesn't change?

  • kthorngrenkthorngren Posts: 21,342Questions: 26Answers: 4,954

    I've seen this before . The Bootstrap.css file doesn't seem to have the btn-dark CSS so you will need to add your own. See the updated example:
    http://live.datatables.net/cedeqotu/1/edit

    I added another button using btn-success to show that the other buttons built into bootstrap.css work. The lack of btn-dark in the bootstrap.css is a Bootstrap issue not a Datatables issue.

    Kevin

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    @kthorngren Appreciate it. I checked out the bootstrap website and there isn't really a forum or anywhere to display questions/concerns.

  • kthorngrenkthorngren Posts: 21,342Questions: 26Answers: 4,954
    edited September 2020

    The bottom of this page links to their Github issues page:
    https://getbootstrap.com/docs/4.5/about/overview/

    Or As Colin mentioned in another of your threads look at Stack Overflow.

    Don't get me wrong. You asked a valid question. Just pointing out that the issue is not Datatabes related.

    Kevin

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.