DataTables CSS is not applied to table

Question

The table has pagination and sorting functionality through datatables, but the css is not being applied. I am using rails 4.2.

I have all my css and image files loaded into vendor/assets/stylesheets and images, respectively.

I am using less for stylesheets. I import the datatables css in application.less

...
@import "dataTables.bootstrap.css";
@import "jquery.dataTables.css";

The table data is loaded by ajax and datatables is initialized on ajax success.

LeaderBoards.prototype.updateResults = function() {
    var valuesToSubmit = $(this.form).serialize();
    var that = this;
    $.ajax({
        url: $(this.form).attr('action'),
        type: "GET",
        data: valuesToSubmit,
        dataType: "html"
    }).success(function(response){
        that.resultBox.html(response);
        $('#leaderboard-table-test').DataTable( {
            searching: false,
            "iDisplayLength": 3,
            "bLengthChange": false
        });
    }).error(function(){
        var text = I18n.t('leaderboards.index.no_results_found');
        that.resultBox.html('<div class="no-results-found">'+ text +'</div>');
    });
};

Here is an example of a table I am trying:

<table id="table_id" class="display">
    <thead>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Row 1 Data 1</td>
        <td>Row 1 Data 2</td>
    </tr>
    </tbody>
</table>

I can see datatables classes being added to this after the table is loaded. For example, it is wrapped inside a div:

<div id="#table_id_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">

In the application.css, I see the @import statements for my datatables css imports, but the datatables css itself is not included.

if the code isn't appearing in application.css, then it's not being imported properly. try some different paths or formats for the @import statement. — Polyov
– Polyov, Commented Aug 3, 2016 at 22:06
I agree it is not being imported properly, but I can't figure out why. The css files are located in vendor/assets/stylesheets. Any folder directly under assets should be included in the load path by rails, so @import "file_name.css"; should be enough to work. I have tried other path formats and been unsuccessful as well. — Kaitrono
– Kaitrono, Commented Aug 4, 2016 at 0:42

Kaitrono · Accepted Answer · 2016-08-04 00:54:04Z

1

I was able to figure out the problem. The DataTables CSS files were not being imported properly as suspected. The trick was to force them to be interpreted as less files instead of regular css.

I changed my import statement to @import (less) "jquery.dataTables.css"; and it was loaded properly.
Thanks to Polyov for helping me to arrive at this conclusion.

answered Aug 4, 2016 at 0:54

Kaitrono

1752 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

DataTables CSS is not applied to table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related