Question

我正在使用fnGetColumnData插件进行数据表过滤，它工作正常，但它显示为“选择”标题下拉列表，共有5个下拉菜单，那么如何更改“选择”文本并将其替换为某些内容自定义名称？

这是插件脚本：

<script type="text/javascript" charset="utf-8">
(function($) {
/*
* Function: fnGetColumnData
* Purpose: Return an array of table values from a particular column.
* Returns: array string: 1d data array 
* Inputs: object:oSettings - dataTable settings object. This is always the last argument past to the function
* int:iColumn - the id of the column to extract the data from
* bool:bUnique - optional - if set to false duplicated values are not filtered out
* bool:bFiltered - optional - if set to false all the table data is used (not only the filtered)
* bool:bIgnoreEmpty - optional - if set to false empty values are not filtered from the result array
* Author: Benedikt Forchhammer <b.forchhammer /AT\ mind2.de>
*/
$.fn.dataTableExt.oApi.fnGetColumnData = function ( oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty ) {
// check that we have a column id
if ( typeof iColumn == "undefined" ) return new Array();

// by default we only want unique data
if ( typeof bUnique == "undefined" ) bUnique = true;

// by default we do want to only look at filtered data
if ( typeof bFiltered == "undefined" ) bFiltered = true;

// by default we do not want to include empty values
if ( typeof bIgnoreEmpty == "undefined" ) bIgnoreEmpty = true;

// list of rows which we're going to loop through
var aiRows;

// use only filtered rows
if (bFiltered == true) aiRows = oSettings.aiDisplay; 
// use all rows
else aiRows = oSettings.aiDisplayMaster; // all row numbers

// set up data array    
var asResultData = new Array();

for (var i=0,c=aiRows.length; i<c; i++) {
iRow = aiRows[i];
var aData = this.fnGetData(iRow);
var sValue = aData[iColumn];

// ignore empty values?
if (bIgnoreEmpty == true && sValue.length == 0) continue;

// ignore unique values?
else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue;

// else push the value onto the result data array
else asResultData.push(sValue);
}

return asResultData;
}}(jQuery));


function fnCreateSelect( aData )
{
var r='<select style="width:150px;"><option value="">Select</option>', i, iLen=aData.length;
for ( i=0 ; i<iLen ; i++ )
{
r += '<option value="'+aData[i]+'">'+aData[i]+'</option>';
}
return r+'</select>';
}


$(document).ready(function() {
/* Initialise the DataTable */
var oTable = $('#example').dataTable( {
"oLanguage": {
"sSearch": "Search all columns:"
}
} );

/* Add a select menu for each TH element in the table footer */
$(".tfoot th").each( function ( i ) { 
this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
} );
} );
} );
</script>

和select生成的HTML：

<thead class="tfoot">
        <tr>
            <th style="border:0px;display:none;"></th>
            <th style="border:0px;"></th>
            <th style="border:0px;"></th>
            <th colspan="5" style="border:0px;display:none;"></th>
            <th style="border:0px;display:none;"></th>
            <th style="border:0px;"></th>
            <th style="border:0px;display:none;"></th>
            <th style="border:0px;display:none;"></th>
            <th style="border:0px;display:none;"></th>
            <th style="border:0px;"></th>
            <th style="border:0px;"></th>
        </tr>
    </thead>

Answer 1

稍微修改一下：

function fnCreateSelect( aData, title ) {

    var r='<select style="width:150px;"><option value="">'+title+'</option>', i, iLen=aData.length;
    for ( i=0 ; i<iLen ; i++ ) {
        r += '<option value="'+aData[i]+'">'+aData[i]+'</option>';
    }
    return r+'</select>';
}

// Arrange titles in order
var selectTitles = ['title1', 'title2', 'title3', 'title4', 'title5'];
$(".tfoot th").each( function ( i ) { 

    var SelectTitle;
    if( i < selectTitles.length ) {
       SelectTitle = selectTitles[i];
    }
    else {
       SelectTitle = 'Select';
    }
    this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i), SelectTitle );

    $('select', this).change( function () {
        oTable.fnFilter( $(this).val(), i );
    });
});

更改'select'文本 - JQuery fnGetColumnData插件

1 个答案: