DataTables CSS未应用于表

DataTables CSS is not applied to table

本文关键字：应用于 CSS DataTables      更新时间：2023-09-26

该表具有通过数据表进行分页和排序的功能，但没有应用css。我使用的是轨道4.2。

我已经将我所有的css和image文件分别加载到vendor/assets/stylesheets和images中。

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

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

表数据由ajax加载，数据表在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本身并不包括在内。

我解决了这个问题。DataTables CSS文件没有像怀疑的那样正确导入。诀窍是强制将它们解释为较少的文件，而不是常规的css。

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

相关文章：