Clever Geek Handbook

Datatables displays a double order icon in the header

I am creating a simple table using bootstrap data with these 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 its showing on the title of the order icon twice as shown in the image enter image description here

problem only activates Bootstrap css if i use jquery it works

Thanks for the help!

+1


source to share


2 answers


Make sure you don't include the DataTables ( jquery.dataTables.min.css

) CSS file , only dataTables.bootstrap.min.css

.

If you are using Download Builder , select Bootstrap under Styling , If you already have Bootstrap enabled, select Style Library , otherwise select Include Library to include the latest Bootstrap.



See this example for a demonstration of correct usage.

+2


source


Do it...



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


source






More articles:


All Articles