datatables show double order icon on header

Question

I'm creating a simple table using datatables with bootstrap with this instructions

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

The problem is that its show on header the order icon twice as shown on image

the problem is only activating Bootstrap css, if I use jquery its works

Thanks for help!

Bushey

Answer 1

Make sure that you're not including DataTables CSS file (jquery.dataTables.min.css), only dataTables.bootstrap.min.css.

If you're using Download Builder, select Bootstrap in the Styling section. If you already have Bootstrap included, chose No styling library, otherwise chose Include library to include the latest Bootstrap as well.

See this example for demonstration of correct usage.

Obstruction

This not correct the problem. The table element is <table class="table table-striped table-bordered" id="example2">. The datatable package was build using Jquery 2.x+Bootstrap+some extensions – Bushey

@MartinVarta, see this example of your issue, this is very common problem. The issue also occurs when you include jquery.dataTables.min.css in addition to other files as I mentioned in my answer. Please list the files that you include or remove jquery.dataTables.min.css and see if that corrects the problem. – Obstruction

Answer 2

Do this...

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

Inae

Answer 3

How I fixed this issue: Commented the "content" from 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: "↓"; */
}

and included jquery.dataTables.min.css

Revival