数据表在标题上显示双重订单图标答案

【问题标题】：datatables show double order icon on header数据表在标题上显示双重订单图标
【发布时间】：2016-04-18 20:24:39
【问题描述】：

我正在使用带有此说明的引导程序的数据表创建一个简单的表

var bTable = $('#example2').DataTable( {
        language: {  url: 'assets/plugins/datatables/i18n/Spanish.json'     },
        processing: true,
        fixedHeader: true,
        serverSide: true,
        responsive:true,
        ajax: "modulos/estados.data.php",
        columns: [
            { data: "id561" },
            { data: "des561" },
            { data: "accion561" },
            { data: "res561" }
        ],
        order: [[ 1, "asc" ]],
        columnDefs: [
            {
                targets : 0,
                searchable: false,
                render: function ( data, type, row ) 
                { return row.id561 }
            },
            {
                targets : 1,
                searchable: true,
                render: function ( data, type, row ) 
                { return data }
            },
            {
                targets : 2,
                searchable: false,
                render: function ( data, type, row ) 
                { return data }
            },
            {
                targets : 3,
                orderable: false,
                searchable: false,
                render: function ( data, type, row ) 
                { return data }
            }
        ]
    } );

问题是它在标题上显示订单图标两次，如图所示

问题只是激活 Bootstrap css，如果我使用 jquery 它的作品

感谢您的帮助！

【问题讨论】：

标签： twitter-bootstrap-3 datatables-1.10

【解决方案1】：

确保您不包含 DataTables CSS 文件 (jquery.dataTables.min.css)，仅包含 dataTables.bootstrap.min.css。

如果您使用的是Download Builder，请在样式部分中选择Bootstrap。如果您已经包含 Bootstrap，请选择 No style library，否则选择 Include library 以包含最新的 Bootstrap。

请参阅this example 以了解正确用法。

【讨论】：

这不能解决问题。表格元素是。数据表包是使用 Jquery 2.x+Bootstrap+一些扩展构建的

@MartinVarta，请参阅您的问题的this example，这是非常常见的问题。除了我在回答中提到的其他文件之外，当您包含 jquery.dataTables.min.css 时也会出现此问题。请列出您包含或删除的文件jquery.dataTables.min.css，看看是否可以解决问题。

【解决方案2】：

这样做...

table.dataTable thead .sorting_asc, .sorting_desc, .sorting {
    background-image: none !important;
}

【讨论】：

【解决方案3】：

我如何解决此问题：注释了 app.css 中的“内容”

table.dataTable > thead .sorting:before,
table.dataTable > thead .sorting_asc:before,
table.dataTable > thead .sorting_desc:before,
table.dataTable > thead .sorting_asc_disabled:before,
table.dataTable > thead .sorting_desc_disabled:before {
  right: 1em;
  /* content: "↑"; */
}
table.dataTable > thead .sorting:after,
table.dataTable > thead .sorting_asc:after,
table.dataTable > thead .sorting_desc:after,
table.dataTable > thead .sorting_asc_disabled:after,
table.dataTable > thead .sorting_desc_disabled:after {
  right: 0.5em;
  /* content: "↓"; */
}

并包含 jquery.dataTables.min.css

【讨论】：