0

私は datatables ColumnFilterWidget を使用していますが、選択ボックスに表示される値をウィジェットでソートしないようにしたいと考えています。ColumnFilterWidget の "bSort": false オプションを試しましたが、選択ボックスの要素の並べ替えには影響しないようです。

$('#mytable').dataTable(
    {
        "bServerSide": true,
        "sAjaxSource": "/ajaxAction.htm",
        "bProcessing": true,
        "sDom": 'W<"clear">lrtip',
        "bPaginate": true,
        "bLengthChange": false,
        "iDisplayLength": 20,
        "sPaginationType": "full_numbers",
        "bInfo": false,
        "oColumnFilterWidgets": {
            "bSort": false,                       
        }
)};

ColumnFilterWidget.js のコードを確認したところ、「fnSort」関数を使用して選択ボックスの値を並べ替えているようです。

/* (Inside fnDraw function) */
...
// Build the menu
widget.$Select.empty().append( $( '<option></option>' ).attr( 'value', '' ).text( widget.oColumn.sTitle ) );
if ( widget.bSort ) { 
    if ( widget.hasOwnProperty( 'fnSort' ) ) {
        aDistinctOptions.sort( widget.fnSort );
    } else {
        aDistinctOptions.sort();
    }
}
...

しかし、フィルター オプション ボックスの要素を並べ替えないように、この関数をどこでオーバーライドまたは定義できますか?

4

1 に答える 1

0

パラメータは、bSortデフォルトで「true」に設定されています

var ColumnFilterWidget = function( $Container, oDataTableSettings, i, widgets ) {
   ...
}

設定"bsort": falseは評価されないため、無視されます。適用するには、上記の関数を変更して追加する必要があります。

if ( 'bSort' in oDataTableSettings.oInit.oColumnFilterWidgets ) {
    widget.bSort = oDataTableSettings.oInit.oColumnFilterWidgets.bSort;
}

直後の

if ( 'oColumnFilterWidgets' in oDataTableSettings.oInit ) {

最終的な関数は次のようになります。

var ColumnFilterWidget = function( $Container, oDataTableSettings, i, widgets ) {
    var widget = this, sTargetList;
    widget.iColumn = i;
    widget.oColumn = oDataTableSettings.aoColumns[i];
    widget.$Container = $Container;
    widget.oDataTable = oDataTableSettings.oInstance;
    widget.asFilters = [];
    widget.sSeparator = '';
    widget.bSort = true;
    widget.iMaxSelections = -1;
    if ( 'oColumnFilterWidgets' in oDataTableSettings.oInit ) {
        if ( 'bSort' in oDataTableSettings.oInit.oColumnFilterWidgets ) {
            widget.bSort = oDataTableSettings.oInit.oColumnFilterWidgets.bSort;
        }
        if ( 'sSeparator' in oDataTableSettings.oInit.oColumnFilterWidgets ) {
            widget.sSeparator = oDataTableSettings.oInit.oColumnFilterWidgets.sSeparator;
        }
        if ( 'iMaxSelections' in oDataTableSettings.oInit.oColumnFilterWidgets ) {
            widget.iMaxSelections = oDataTableSettings.oInit.oColumnFilterWidgets.iMaxSelections;
        }
        if ( 'aoColumnDefs' in oDataTableSettings.oInit.oColumnFilterWidgets ) {
            $.each( oDataTableSettings.oInit.oColumnFilterWidgets.aoColumnDefs, function( iIndex, oColumnDef ) {
                var sTargetList = '|' + oColumnDef.aiTargets.join( '|' ) + '|';
                if ( sTargetList.indexOf( '|' + i + '|' ) >= 0 ) {
                    $.each( oColumnDef, function( sDef, oDef ) {
                        widget[sDef] = oDef;
                    } );
                }
            } );
        }
    }
    widget.$Select = $( '<select></select>' ).change( function() {
        var sSelected = widget.$Select.val(), sText, $TermLink, $SelectedOption; 
        if ( '' === sSelected ) {
            // The blank option is a default, not a filter, and is re-selected after filtering
            return;
        }
        sText = $( '<div>' + sSelected + '</div>' ).text();
        $TermLink = $( '<a class="filter-term" href="#"></a>' )
            .addClass( 'filter-term-' + sText.toLowerCase().replace( /\W/g, '' ) )
            .text( sText )
            .click( function() {
                // Remove from current filters array
                widget.asFilters = $.grep( widget.asFilters, function( sFilter ) {
                    return sFilter != sSelected;
                } );
                $TermLink.remove();
                if ( widgets.$TermContainer && 0 === widgets.$TermContainer.find( '.filter-term' ).length ) {
                    widgets.$TermContainer.hide();
                }
                // Add it back to the select
                widget.$Select.append( $( '<option></option>' ).attr( 'value', sSelected ).text( sText ) );
                if ( widget.iMaxSelections > 0 && widget.iMaxSelections > widget.asFilters.length ) {
                    widget.$Select.attr( 'disabled', false );
                }
                widget.fnFilter();
                return false;
            } );
        widget.asFilters.push( sSelected );
        if ( widgets.$TermContainer ) {
            widgets.$TermContainer.show();
            widgets.$TermContainer.prepend( $TermLink );
        } else {
            widget.$Select.after( $TermLink );
        }
        $SelectedOption = widget.$Select.children( 'option:selected' );
        widget.$Select.val( '' );
        $SelectedOption.remove();
        if ( widget.iMaxSelections > 0 && widget.iMaxSelections <= widget.asFilters.length ) {
            widget.$Select.attr( 'disabled', true );
        }
        widget.fnFilter();
    } );
    widget.$Container.append( widget.$Select );
    widget.fnDraw();
};
于 2013-12-19T10:57:18.187 に答える