Question

我正在使用数据表ColumnFilterWidget，我希望小部件不对选择框中显示的值进行排序。我已经尝试了“bSort”：ColumnFilterWidget的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();
    }
}
...

但是我可以在哪里覆盖或定义此函数，以便它不会对过滤器选项框中的元素进行排序？

Answer 1

bSort参数设置为＆＃34; true＆＃34;默认情况下

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();
};

Datatable ColumnFilterWidget禁用筛选器选项排序

1 个答案: