1

I am developing an intranet portal using a custom made bootstrap 3 theme.

One of the views I created is a phonebook with 4 columns: Name, Department, Telephone, Email.

When I use table as the view format, I get a really nice bootstrap table, as shown here:

bootstrap table

But when I use the views style Datatables (provided via the DataTables module I have installed), I get a table which is fully functional (i.e. paging, search, sorting, etc works perfectly). But the css is not bootstrap, as shown here:

No bootstrap css

Any suggestions?

3
  • Yes the datatables are fully functional which means that paging, sorting, search etc all work perfectly! The problem has to do with the css of the table which did not take the bootstrap classes. – Panagiotis Adamopoulos Jul 29 '15 at 12:42
  • Are you using the datatables module (to get the "datatables" views style)? I'm about sure (but don't want to guess about questions). Please re-edit your question to (also) clarify that. By the way: the screenshots you added is a great improvement of your question already! – Pierre.Vriens Jul 29 '15 at 12:59
  • Yes I am using the drupal 7 datatables module – Panagiotis Adamopoulos Jul 29 '15 at 13:07
1

Have a look at what is described in http://www.datatables.net/manual/styling/bootstrap . Here is a quote from that link:

Bootstrap is a CSS framework that lets you quickly and easily build a user interface that has a unified look and feel. The great news is that it is very easy to integrate Bootstrap and DataTables such that your fully featured DataTables will match the same look and feel of the rest of your site.

Bootstrap provides a number of options for styling HTML tables, giving you flexibility over the table, while ensuring they look very slick. The DataTables / Bootstrap integration ensures that you can use all of these features as well as the enhancements that DataTables makes to a plain HTML table.

Installation:

To have DataTables styled by Bootstrap, all you need do, as well as including the DataTables core Javascript file on your page, is include the DataTables / Bootstrap CSS and Javascript integration files. These files simply alter the DataTables defaults, such as class names to use the names used by Bootstrap, and add styling information specific to DataTables.

Both files are both available on the DataTables CDN (below) or you can obtain these files directly from the DataTables integration plug-ins repository on GitHub.

Head over to that link above for more details ...

Bonus tip: there is also an interesting blogpost about this topic ...

PS: I consider Datatables (the module + the library) as one of those hidden Drupal gems, so easy to install/enable, such a great set of features it adds (paging, searching, sorting as you also mentioned). Can't think of a site where we don't use it ... Checkout the questions tagged with for more interesting questions (+ answers) about it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.