Not sure why 2 sort arrow groups are showing up

alexandervj

Not sure why there are 2 sort arrow groups showing up in my table. Looks like maybe bootstrap is applying one set and datatable sis applying another?

Also is there a way to remove the sorting/arrows on the first few columns (icons)? Thanks

http://apps.trilumina-temp.com/apps/database/lots

bigzee

Hi,

From the looks of it there's two seperate css files adding them on:

Line 252 of sb-admin-2.css:

table.dataTable thead .sorting:after {
    content: "\f0dc";
    float: right;
    font-family: fontawesome;
    color: rgba(50,50,50,.5);
}

the content property within that css tag is adding one set of arrows on.

Line 49 of jquery.dataTables.css:

table.dataTable thead .sorting {
  background-image: url("../images/sort_both.png");
}
table.dataTable thead .sorting_asc {
  background-image: url("../images/sort_asc.png");
}
table.dataTable thead .sorting_desc {
  background-image: url("../images/sort_desc.png");
}
table.dataTable thead .sorting_asc_disabled {
  background-image: url("../images/sort_asc_disabled.png");
}
table.dataTable thead .sorting_desc_disabled {
  background-image: url("../images/sort_desc_disabled.png");
}

the background-image within that css tag is adding the second set of arrows on.

Also question, how you get those textboxes at the bottom to sort each column individually?

alexandervj

Thanks bigzee, that fixed it! Do you know how I can remove the arrows/sorting from those icon columns?

The filtering textboxes at the bottom are from this example

https://www.datatables.net/examples/api/multi_filter.html

and then, with the help of Allan in another thread, I had to modify the code to appy only to the columns after the first 4 columns, so that those icons wouldnt have textboxes at the bottom. Here is my code

$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#example tfoot th:gt(4)').each( function () {
var title = $('#example thead th').eq( $(this).index() ).text();
$(this).html( '<input style="width:90px;" type="text" placeholder="Search '+title+'" />' );
} );

    // DataTable
    var table = $('#example').DataTable();

    // Apply the search
    table.columns( ':gt(4)' ).every( function () {
        var that = this;

        $( 'input', this.footer() ).on( 'keyup change', function () {
            that
                .search( this.value )
                .draw();
        } );
    } );
} );

what is different than the example is the

$('#example tfoot th:gt(4)').each( function () {

and the

table.columns( ':gt(4)' ).every( function () {

CharlyPoppins

Hi, do you managed to solve this issue ?