datatable用法（三）

datatable用法（3）
再添加一个功能，对各个列进行过滤。
添加js代码：

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

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

在前面博客中的原来的 sortData()方法中添加js：

  $("tfoot th").each( function ( i ) { 
		        this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) ); 
		        $('select', this).change( function () { 
		            oTable.fnFilter( $(this).val(), i ); 
		        } ); 
		    } ); 

在页面table中添加一个：

	<tfoot>
						<tr>
							<th  width ='10%' align='center'  class='w_01' ></th>
							<th  width ='10%' align='center'  class='w_01' ></th>
							<th  width ='10%' align='center'  class='w_01' ></th>
							<th  width ='10%' align='center'  class='w_01' ></th>
							<th  width ='10%' align='center'  class='w_01' ></th>
							<th  width ='10%' align='center'  class='w_01' ></th>
							<th  width ='10%' align='center'  class='w_01' ></th>
							<th  width ='10%' align='center'  class='w_01' ></th>
						</tr>
					</tfoot>

最后别忘了，引入datatable的js：
jquery.dataTables.js，
jquery.dataTables.css//是他自带css，要是想改式样的，就直接修改里面的css。省省不少使呢。。。。
还有，最好的学习方法是直接看官方文档，不过英文的，很难消化。

以上，完毕。