jquery - 複数選択オプション付きのデータテーブル

Question

WordPress に TablePress 拡張機能をインストールしました: 個々の列のフィルタリング (ドロップダウン付き)、非常にうまく機能しています。ドロップダウン フィルター オプションをフッター側からヘッダー側に移動することはできますか?

データテーブルの例

テーブルにフィルター (ドロップダウン) を配置しない限り、すべてのテーブルが表示されます。テーブルが表示されず、フィルターを選択すると、選択に従ってテーブルのみが表示される可能性はありますか?

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

function datatables_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>';
     }

そして、PHPコードは

 <?php
/**
 * Register necessary Plugin Filters
 */
add_filter( 'tablepress_shortcode_table_default_shortcode_atts',      'tablepress_add_shortcode_parameters_multi_filter_select' );
add_filter( 'tablepress_table_render_options', 'tablepress_set_table_foot_option', 10, 2 );
add_filter( 'tablepress_table_js_options',    'tablepress_add_multi_filter_select_js_options', 10, 3 );
add_filter( 'tablepress_datatables_command', 'tablepress_add_multi_filter_select_js_command', 10, 5 );

 /**
 * Add "datatables_multi_filter_select" as a valid parameter to the [table /] Shortcode
 */
 function tablepress_add_shortcode_parameters_multi_filter_select( $default_atts ) {
$default_atts['datatables_multi_filter_select'] = false;
return $default_atts;
 }

/**
    * Make sure that "table_foot" and "datatables_scrollX" are false, if     "datatables_multi_filter_select" is true,
    * as the footer will be appended by the JS. Scrolling will not work with automatically added content
   */
   function tablepress_set_table_foot_option( $render_options, $table ) {
if ( $render_options['datatables_multi_filter_select'] ) {
    $render_options['table_foot'] = false;
    $render_options['datatables_scrollX'] = false;
}
return $render_options;
 }

 /**
 * Pass "datatables_multi_filter_select" from Shortcode parameters to JavaScript arguments
  */
   function tablepress_add_multi_filter_select_js_options( $js_options, $table_id,   $render_options ) {
$js_options['datatables_multi_filter_select'] = $render_options['datatables_multi_filter_select'];

// register the JS
if ( $js_options['datatables_multi_filter_select'] ) {
    $suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
    $js_multi_filter_select_url = plugins_url( "multi-filter-select{$suffix}.js", __FILE__ );
    wp_enqueue_script( 'tablepress-multi_filter_select', $js_multi_filter_select_url, array( 'tablepress-datatables' ), '1.0', true );
}

return $js_options;
   }

    /**
    * Evaluate "datatables_multi_filter_select" parameter and add corresponding  JavaScript code, if needed
    */
    function tablepress_add_multi_filter_select_js_command( $command, $html_id,  $parameters, $table_id, $js_options ) {

if ( ! $js_options['datatables_multi_filter_select'] )
    return $command;

$name = str_replace( '-', '_', $html_id );
$datatables_name = "DT_{$name}";

$command = <<<JS
   var {$name} = $('#{$html_id}'),
{$datatables_name} = {$name}.dataTable({$parameters}),
{$name}_tfoot, {$name}_selects, ths = '<tfoot>';
     {$name}.find('thead th').each( function( i ) {
ths += '<th>' + datatables_fnCreateSelect( {$datatables_name}.fnGetColumnData(i)   )       + '</th>';
   } );
   ths += '</tfoot>';
   {$name}_tfoot = {$name}.append(ths).find('tfoot');
      {$name}_selects = {$name}_tfoot.find('select');
     {$name}_tfoot.on( 'change', 'select', function() {
{$datatables_name}.fnFilter( $(this).val(), {$name}_selects.index(this) );
      } );
    JS;
return $command;
     }