DataTable with Bootstrap 4 design

markosulamagi

Hi,

I am working on project with Bootstrap 4 and DataTable. Since Bootstrap 4 is still in alpha, then the DataTable theme is a bit off.

Most of the stuff works well, but since Bootstrap 4 dropped Glyphicon support, the sorting icons are missing (it shows trademark (TM) icons instead).

I fixed it by using FontAwesome.

1) Install FontAwesome to your project (currently v4 is available)

2) Add the following code to your project. Which overrides the dataTable.bootstrap.css properties.

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
  font-family: 'FontAwesome';
}

table.dataTable thead .sorting:after {
  content: "\f0dc";
}
table.dataTable thead .sorting_asc:after {
  content: "\f0de";
}
table.dataTable thead .sorting_desc:after {
  content: "\f0dd";
}