Disable sorting class in jquery datatables v 1.10

Question

I am changing the background color on the rows of my datatables. This works on all the cells, except the ones I sort on.

It seems like this happens because of the sorting_1 class that is applied to the sorted columns.

To get around this, I created my own sorting_1 class in my css file like this:

.sorting_1 {
    background-color: inherit !important;
}

This solved the problem, but I can't help but think there is a better way to do this. Also, my hack will not handle sorting_2, sorting_3 and so on, (even if I don't currently use that)

I have tried changing the value of

$.fn.dataTableExt.oJUIClasses.sSortColumn

but I obviously did not do this correctly. Anyone know of a cleaner way to do this?

Yes I want the sorting functionality to stay. I just dont want the sorting_* class to hide the background color of the row that I am setting — Somaiah Kumbera
– Somaiah Kumbera, Commented Aug 1, 2016 at 12:18

davidkonrad · Accepted Answer · 2016-08-01 11:00:05Z

You lack to tell dataTables that you want jQueryUI rendering. This is done this way :

var table = $('#example').dataTable({
  bJQueryUI: true
})

This instruct dataTables to use $.fn.dataTableExt.oJUIClasses, otherwise $.fn.dataTableExt.oStdClasses is used (that was your main problem)

Now the order of classes is important. If you want to add a myClass setting the background to some other color (this is what you want) :

$.fn.dataTableExt.oJUIClasses.sSortColumn = 'myClass sorting_';

if you want to skip sorting_x completely

$.fn.dataTableExt.oJUIClasses.sSortColumn = 'myClass';

will result in myClass_1, myClass_2 and so on.

$.fn.dataTableExt.oJUIClasses.sSortColumn = 'sorting_ myClass';

will mess things up utterly. Small demo -> http://jsfiddle.net/f6qLqyao/

Here is a complete list of all default oJUIClasses classes :

sFilter: "dataTables_filter"
sFilterInput: ""
sFooterTH: "ui-state-default"
sHeaderTH: "ui-state-default"
sInfo: "dataTables_info"
sJUIFooter: "fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-bl ui-corner-br"
sJUIHeader: "fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-tl ui-corner-tr"
sLength: "dataTables_length"
sLengthSelect: ""
sNoFooter: "no-footer"
sPageButton: "fg-button ui-button ui-state-default"
sPageButtonActive: "ui-state-disabled"
sPageButtonDisabled: "ui-state-disabled"
sPaging: "dataTables_paginate fg-buttonset ui-buttonset fg-buttonset-multi ui-buttonset-multi paging_"
sProcessing: "dataTables_processing"
sRowEmpty: "dataTables_empty"
sScrollBody: "dataTables_scrollBody"
sScrollFoot: "dataTables_scrollFoot ui-state-default"
sScrollFootInner: "dataTables_scrollFootInner"
sScrollHead: "dataTables_scrollHead ui-state-default"
sScrollHeadInner: "dataTables_scrollHeadInner"
sScrollWrapper: "dataTables_scroll"
sSortAsc: "ui-state-default sorting_asc"
sSortColumn: "sorting_"
sSortDesc: "ui-state-default sorting_desc"
sSortIcon: "DataTables_sort_icon"
sSortJUI: "css_right ui-icon ui-icon-carat-2-n-s"
sSortJUIAsc: "css_right ui-icon ui-icon-triangle-1-n"
sSortJUIAscAllowed: "css_right ui-icon ui-icon-carat-1-n"
sSortJUIDesc: "css_right ui-icon ui-icon-triangle-1-s"
sSortJUIDescAllowed: "css_right ui-icon ui-icon-carat-1-s"
sSortJUIWrapper: "DataTables_sort_wrapper"
sSortable: "ui-state-default sorting myClass"
sSortableAsc: "ui-state-default sorting_asc_disabled"
sSortableDesc: "ui-state-default sorting_desc_disabled"
sSortableNone: "ui-state-default sorting_disabled"
sStripeEven: "even"
sStripeOdd: "odd"
sTable: "dataTable"
sWrapper: "dataTables_wrapper"

Elegant solution, and detailed well explained answer. Thank you.

BobRodes · Accepted Answer · 2016-08-01 09:27:22Z

1

Yes, there definitely is a cleaner way to do this. Have a look at this doc from the datatables site. DataTables is highly customizable with respect to styling. In particular, there is a theme creator that you should be able to use to create whatever styling you want.

By the way, the CSS classes that DataTables uses for sorting are sorting_1, sorting_2 and sorting_3, just as you have them. So if yours is a hack then so is theirs. Also, a user can sort by multiple columns by holding down the shift key and clicking on one column after the other, so perhaps you'll want to support that, since your app makes it available to a user whether you actually use it or not.

edited Aug 1, 2016 at 9:27

answered Aug 1, 2016 at 9:21

BobRodes

6,1852 gold badges28 silver badges29 bronze badges

2 Comments

Somaiah Kumbera Over a year ago

I only +1'ed this answer because you pointed out (rightly) that sorting_2, sorting_3 etc could mess up the styles. But davidkonrad had a working solution, so I accepted his answer. Thanks for the feedback. FYI - the theme creator does not handle sorting/filtering/ordering styles

BobRodes Over a year ago

Yes, I noticed that, doesn't handle it directly. However, I did research my answer before posting it. I suggest that you look at the generated CSS, which as Allan mentions you can change any way you like. You'll see all of the sorting styles in there. davidkonrad's answer is definitely more detailed than mine, so I would have accepted it as an answer too. But I would still get familiar with the DataTables tool if I were using this. I recently wrote my first jQuery UI plus DataTables app, and jumped in rolling my own CSS, and have a pretty long file now because of it.

Collectives™ on Stack Overflow

Disable sorting class in jquery datatables v 1.10

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related