dongting3135 2014-03-12 05:31
浏览 50
已采纳

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

I am using fnGetColumnData plugin for data table filtering, it is working all right, but it appears as "Select" titled dropdown, there are total 5 dropdowns, so how can i change the "Select" text and replace that with something custom name?

Here is the Plugin Script:

<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>

and the HTML where select generates:

<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>
  • 写回答

1条回答 默认 最新

  • douguiyan9164 2014-03-12 05:59
    关注

    Modify it a little like this:

    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 );
        });
    });
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 Arcgis相交分析无法绘制一个或多个图形
  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)