Question

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

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

我使用较少的样式表。我在application.less

中导入datatables css

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

表数据由ajax加载，datatables在ajax成功时初始化。

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本身。

Answer 1

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

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

DataTables CSS未应用于表

1 个答案: