CODEWITHSUNDEEP
jquerycssdatatables
Somaiah Kumbera
Somaiah Kumbera

Reputation: 7489

Disable sorting class in jquery datatables v 1.10

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?

Upvotes: 2

Views: 2742

Answers (2)

davidkonrad
davidkonrad

Reputation: 85518

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"

Upvotes: 2

BobRodes
BobRodes

Reputation: 6165

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.

Upvotes: 1

Related Questions