Bootstrap 4 Beta 3: Paging Icons missing, Pagination Styling wrong

ClarkB

I've used DT in the past, but for a new project, I'm using the latest and greatest of everything. I'm using Bootstrap 4 Beta 3, and my tables don't look right. The up/down icons for column sorting are missing, and the styling on the pagination is wrong. This is a Rails 5 app, and I readily admit I'm more of a backend guy, so I suspect I didn't set up the CSS correctly. Appreciate any help.

DT Debugger output: http://debug.datatables.net/okudah
Screenshot: https://drive.google.com/open?id=15l_5BWPvQnj13xcTFZWcF2GdNo8TD50a

kthorngren

You are probably right that the CSS is not correct. Can you show the CSS and JS includes you have?

Maybe this example will help.
https://datatables.net/examples/styling/bootstrap4.html

Also you can use the Download Builder to generate the proper set of CSS and JS include files.

Unfortunately the debugger output is not useful for this case as it doesn't contain your HTML.

Kevin

ClarkB

Hi Kevin. Yes, I saw that example, which looks perfect, which is why I know it's my mistake.

Here are the CSS includes:
from application.scss:

@import "bootstrap";
@import "bootstrap_and_overrides";
@import "datatables";

from datatables.scss:

@import 'datatables/dataTables.bootstrap';

JS Includes:
from application.js:

//= require rails-ujs
//= require turbolinks
//= require jquery
//= require popper
//= require bootstrap-sprockets
//= require_tree .

from datatables.js:

//= require datatables/dataTables.bootstrap

My javascript is very simple:

<script type="text/javascript">
$(document).ready(function(){
  $('.dtable').DataTable({
    "pageLength": 15,
    "lengthMenu": [ [10, 15, 25, 50, -1], [10, 15, 25, 50, "All"] ],
    "order": [[ 0, "asc" ], [1, "asc"]],
    "columnDefs": [{ "orderable": false, "targets": [2,3,4] }]
  });
});
</script>

Appreciate the help. CB.

Loren Maxwell

Not sure if this is the difference, but I think the Bootstrap 4 version here on DataTables is Beta version 1, not Beta 3.

Again, it may not be the issue . . .

allan

Try:

@import 'datatables/dataTables.bootstrap4';

The just "bootstrap" is Bootstrap 3 integration for DataTables.

Looks like beta 3 isn't on CDNJS yet, but I'll update my copy when it is and test it out.

Allan

ClarkB

Allan: That helped some! I have the up.down icons for column sorting now. Styling is still wrong/missing for the pagination bar. It's in a better location (no longer on top of 'showing x to y of z entries', but no styling.

ClarkB

I also tried backing off to Bootstrap4 Beta 2 and Beta 1. Same behavior.

ClarkB

I found it. Needed version bootstrap4 for the JS also.