DataTables CSS 不适用于表格答案

【问题标题】：DataTables CSS is not applied to tableDataTables CSS 不适用于表格
【发布时间】：2016-08-03 20:33:59
【问题描述】：

该表通过数据表具有分页和排序功能，但未应用 css。我正在使用 Rails 4.2。

我已将所有 css 和图像文件分别加载到供应商/资产/样式表和图像中。

我在样式表中使用较少。我在 application.less 中导入数据表 css

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

通过ajax加载表格数据，并在ajax成功时初始化datatables。

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>');
    });
};

这是我正在尝试的表格示例：

<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>

我可以看到加载表后将数据表类添加到此。例如，它被包裹在一个 div 中：

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

在 application.css 中，我看到了用于导入数据表 css 的 @import 语句，但不包括数据表 css 本身。

【问题讨论】：

你看到你编译的main.css中的数据表代码了吗？
@Polyov 我添加了更多信息来解决您的评论。
如果代码没有出现在application.css 中，那么它没有被正确导入。为@import statement 尝试一些不同的路径或格式。
我同意它没有正确导入，但我不知道为什么。 css 文件位于vendor/assets/stylesheets。任何直接在 assets 下的文件夹都应该通过 rails 包含在加载路径中，因此 @import "file_name.css"; 应该足以工作。我尝试了其他路径格式，也没有成功。

标签： javascript ruby-on-rails datatables

【解决方案1】：

我能够找出问题所在。可疑的 DataTables CSS 文件未正确导入。诀窍是强制它们被解释为更少的文件而不是常规的 css。

我将导入语句更改为@import (less) "jquery.dataTables.css";，并且它已正确加载。
感谢 Polyov 帮助我得出这个结论。

【讨论】：