DataTables_sort_wrapper being added to columns with bSortable = false;

bluefoxreg

First of all thanks for making this wonderful tool available!

While working with jQuery Themed table, I noticed that even when specifying bSortable = false in the column, DataTables_sort_wrapper is still being added to the header element. This creates an unnecessary spacing in the header.

The fix is pretty simple, simply skip the column that has bSortable = false
[code]
/* Add the extra markup needed by jQuery UI's themes */
if ( oSettings.bJUI )
{
for ( i=0, iLen=oSettings.aoColumns.length ; i

giorgioponza

You are right!
I notice this problem expecially when i add columns with width 16px. I think this is a bug because when a column is not sortable is unnecessary to have the empty div DataTables_sort_wrapper.
The fix is to add
if (!oSettings.aoColumns[i].bSortable) continue;
in the piece of code you specified (i optimized your code :D )
The 'bug' is present in both 1.8.2 and 1.9.
I hope Allan will include this workaround in the next release.
A great tool anyway :)

allan

Hmm - an interesting one :-). I'll have a think about this one - I can certainly see why it would be good to just remove it, but equally the sort wrapper could be used for styling. I wonder if a better way is to indicate with a class on the cell what the sorting state is, and allow the CSS selectors to decide if the padding is required or not...

Allan

martinmanyhats

Many thanks for the excellent software :)

I'm hitting the same issue with wanting to save column header space. I have numerous columns which are narrow, so width is valuable.

It would definitely be useful to style a disabled sort wrapper to give us the choice. I can understand why removing it completely would give less choice overall.

Thanks, Martin

quixadhal

Actually, I've found it's not just a cosmetic issue.

I'm a noob, so I may be doing stuff wrong, but I'm using a server-side script to obtain data from a PostgreSQL database, and when I set a column to bSortable false, it still lets you click on the column header to "sort". What this actually does, is DESELECT the default sort column and return the data without any order by clause at all. Toggling the column from ascending to descending has no effect, however it does resubmit the query, thus wasting server bandwidth.

What I was hoping would happen was that the column header would become just a label, with no events attached to it at all.

Thank you for the nice and flexible software package though! I'm slowly using this to drag one of my little projects away from the 100% hand-written PHP cruft I made a few years ago, and grumbling aside, it's much cleaner and easier to work with. :)

allan

> when I set a column to bSortable false, it still lets you click on the column header to "sort"

There should be no event handler on bSortable: false columns. For example: http://live.datatables.net/evopuh/edit#javascript,html - the last two columns are no event handlers so clicking on them should have no effect.

Allan

quixadhal

AHA! I was passing "false" instead of false... string type is still true. Oops!

Thanks for the example! I never would have spotted it otherwise. :)

zadradesign

I ran into this issue today also. The first column in my table should be 13px wide, but due to a 20px padding on the DataTables_sort_wrapper DIV element in the column header, my column is expanding to 33px wide.

Instead of worrying about removing the DataTables_sort_wrapper div, it was relatively trivial to add a class to my heading for that column and then add a few lines to my CSS file to address the padding issues in that element. Here is what my css looks like:

[code]
.dataTable .notSortable{
padding-right: 10px
}

.dataTable .notSortable .DataTables_sort_wrapper{
padding: 0
}
[/code]

With this, I just add the class "notStortable" to the column heading (TH element) for any non-sortable column. The padding values will need to be adjusted to fit your specific theme.