jqueryデータ型のソートクラスを無効にするv 1.10

Question

私のデータテーブルの行の背景色を変更しています。これは私が並べ替えたものを除いて、すべてのセルで機能します。

ソートされた列に適用されるsorting_1クラスが原因で、このようになっているようです。この問題を回避するには

、私はこのように私のCSSファイルで自分のsorting_1クラスを作成しました：これは、問題を解決したが、私は助けるが、これを行うには良い方法があると考えることができない

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

。また、私のハックは、私が

$.fn.dataTableExt.oJUIClasses.sSortColumn 

の値を変更しようとしているが、私は明らかにこれをしなかった（私は現在、それを使用しない場合でも）、

をようにsorting_2、sorting_3とを処理しません。正しく誰でもこれを行うためのよりクリーンな方法を知っていますか？

Answer 1

jQueryUIのレンダリングが必要なデータテーブルを伝えることができません。これは、このように行われます。これは$.fn.dataTableExt.oJUIClassesを使用するためのDataTableを

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

指示し、それ以外の場合は $.fn.dataTableExt.oStdClassesが使用されている（それがあなたの主な問題でした）

今のクラスの順序は重要です。あなたには、いくつかの他の色に背景を設定myClassを追加する場合（これはあなたが望むものである）：

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

あなたは完全に

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

はmyClass_1、myClass_2になりますsorting_xをスキップしたい場合はそうです。

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

完全に物事を混乱させます。小さなデモ - >http://jsfiddle.net/f6qLqyao/

は、ここですべてのデフォルトoJUIClassesクラスの完全なリストである：

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" 

Answer 2

はい、これを行うには明確な方法があります。 datatablesサイトのthis docを見てください。 DataTablesは、スタイリングに関して高度にカスタマイズ可能です。特に、好きなスタイルを作成するために使用できるはずのtheme creatorがあります。

ちなみに、DataTablesがソートに使用するCSSクラスは、あなたが持っているのと同じように、sorting_1、sorting_2、およびsorting_3です。だからあなたのものがハックなら、それもそうです。また、シフトキーを押しながら他の列をクリックすることで、複数の列で並べ替えることができます。実際に使用するかどうかは、ユーザーがアプリケーションに利用できるようにするためです。 。