How to leave column sorting enabled but remove the sorting icons

Bill_VA2

With the latest version of DataTables, there doesn't seem to be a good way to disable the sorting icons. I tried the css method some added in 2015:
th.sorting_asc, th.sorting_desc { background-image: none !important; }
That does nothing.

I was able to remove the icons with this CSS:
th.sorting_asc::after, th.sorting_desc::after { content:"" !important; }
But the column header still maintains the padding to accommodate the icons and causes headings that wouldn't normally wrap to wrap.

Sure would be nice if there was a setting to do this.

kthorngren

You can use columns.orderable with targets: "_all" to disable end user ordering for all columns.

EDIT: Mis-read the original question :-)

Kevin

jr42.gordon

why do you wish to not show the sorting icons? is it because of the wrapping? If so, just add class name to each <th> in your header with associated styling

.dt_nowrap_col { white-space: nowrap; }

apply to all cells in column
{ "targets" : 'dt_nowrap_col', "className" : "dt_nowrap_col" }

jr42.gordon

n

Bill_VA2

jr42.gordon, Thanks for the advice, but unfortunately, that just blows up the table. It removes any soft returns of text in the header and make them too wide, and it causes the headers to be of different widths than the td cells.

I don't mind if the text in the headers wrap, but they wrap excessively because DataTables is reserving a 30px padded area in the headers for the sorting icons that I have hidden.

Again, sure would be nice to have a setting that allows sorting but removes the icon.

jr42.gordon

Try the following

table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
  background: none;
  padding: 4px 5px;
}

Bill_VA2

Sorry man, that had no effect. However, I did find that using the following hid the icons and closed up the gap.

table.dataTable thead>tr>th.sorting_asc, 
table.dataTable thead>tr>th.sorting_desc, 
table.dataTable thead>tr>th.sorting, 
table.dataTable thead>tr>td.sorting_asc,
table.dataTable thead>tr>td.sorting_desc, 
table.dataTable thead>tr>td.sorting {
    padding-right: 8px;
}

th.sorting_asc::after, 
th.sorting_desc::after {
   content:"" !important;
}