CODEWITHSUNDEEP
angularjstwitter-bootstrapdatatablesangular-datatables
Riples
Riples

Reputation: 1157

Can't seem to theme bootstrapped angular-datatable like website example

I have implemented Angular-Datatables into my web application (using Bootstrap styling), and I can't seem to work out how to make my datatable look like the example on their website.

For example their datatable has the following traits:

Datatables Example

Whereas, my default table has the following:

My example

I have added the standard bootstrap theme files:

<link rel="stylesheet" type="text/css" href="../vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../vendor/angular-datatables/dist/plugins/bootstrap/datatables.bootstrap.min.css">

Setup my default datatable:

<div>
     <table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-striped table-hover table-bordered" width="100%"></table>
</div>

And have optioned up my datatables with bootstrap:

$scope.dtOptions = DTOptionsBuilder
            .fromFnPromise(function() {
                var deferred = $q.defer();
                deferred.resolve(users); 
                return deferred.promise;
            })
            .withBootstrap() // Style with Bootstrap
...
};

Even the examples on the bootstrap website all mimic the datatables format. Am I overlooking something maybe?

Upvotes: 1

Views: 2048

Answers (3)

murat
murat

Reputation: 1

Download the full datatables source code, copy the media folder to your web folder and add the CSS to your code.

The file you will need is media/css/jquery.dataTables.css

Upvotes: 0

davidkonrad
davidkonrad

Reputation: 85528

This is due to a huge mismatch between different versions laying around on different CDN's. I was really baffled myself, when I ran into the problem.

You are doing it all right, you are just accidently using the "wrong" version dataTables.bootstrap.js and its CSS. I cannot tell why, I have not seen any explanation at all anywhere, but if you use angular-dataTables, then skip the official bootstrap implementation and download this instead :

bower install datatables.net-bs

After you have done that, you will discover huge differences in the dataTables.bootstrap.js and dataTables.bootstrap.css compared to the official CDN versions. The js actually addresses the pagination buttons, the CSS is defining :after classes using glyphicon font (what you are looking for) and so on. Again, I cannot explain why there is so different versions.

Here is a demo where I have extracted the above files and used them instead of the official, then it works -> http://plnkr.co/edit/gOQ4bKOhzzfFgViwuAkb?p=preview

Upvotes: 2

carlcheel
carlcheel

Reputation: 621

The standard bootstrap integration looks the same, see this link.

To override the default classes, do the following:

Grey alternative rows:

table.dataTable tbody tr.even {
    background-color: #EEE;
}

Grey heading (added !important to override sorting_asc, sorting_desc styles but you can style these individually if needed)

table.dataTable thead th {
    background-color: #EEE !important;
}

Sort icon:

You can override the following styles:

table.table thead .sorting_desc {
}

table.table thead .sorting_desc:before {
}

Upvotes: 0

Related Questions