Title: [Plugin: WP-Table Reloaded] column filtering using select menus
Last modified: August 19, 2016

---

# [Plugin: WP-Table Reloaded] column filtering using select menus

 *  [Peter](https://wordpress.org/support/users/buzzellp/)
 * (@buzzellp)
 * [15 years, 7 months ago](https://wordpress.org/support/topic/plugin-wp-table-reloaded-column-filtering-using-select-menus/)
 * Fantastic plug-in. I’m just having trouble wrapping my head around how to implement
   custom js. I would like to include the following functionality:
 * ‘(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 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>’; }
 * $(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 ); } ); } ); } );’
 * [http://www.datatables.net/examples/api/multi_filter_select.html](http://www.datatables.net/examples/api/multi_filter_select.html)
 * Thanks in advance for any help you can give.

Viewing 1 replies (of 1 total)

 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [15 years, 7 months ago](https://wordpress.org/support/topic/plugin-wp-table-reloaded-column-filtering-using-select-menus/#post-1762712)
 * Hi,
 * if you want to add custom JavaScript functionality through the DataTables API
   or its plugins, it is usually the best, to manually invoke the DataTables call
   on the table.
    That means, that you should disable the usage of the DataTables
   library by WP-Table Reloaded (on the “Edit” screen of the table) and do the entire
   initialisation of the library by yourself (by placing the corresponding code 
   in the footer of the page with the table, e.g. through a page template). Basically
   this would then resemble the demo files from DataTables: WP-Table Reloaded then
   only brings the HTML of the table to your page, while you have entire manual 
   control over the JavaScript features.
 * (As a side note: It is possible to keep using DataTables through WP-Table Reloaded
   and add that custom functionality, however, it is somewhat more complex, as you
   will then need to use plugin hooks to add the extension code in the correct places.
   So, the process described above really is the best way to go.)
 * Best wishes,
    Tobias

Viewing 1 replies (of 1 total)

The topic ‘[Plugin: WP-Table Reloaded] column filtering using select menus’ is closed
to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/wp-table-reloaded_f7dcd3.svg)
 * [WP-Table Reloaded](https://wordpress.org/plugins/wp-table-reloaded/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wp-table-reloaded/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wp-table-reloaded/)
 * [Active Topics](https://wordpress.org/support/plugin/wp-table-reloaded/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wp-table-reloaded/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wp-table-reloaded/reviews/)

 * 1 reply
 * 2 participants
 * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * Last activity: [15 years, 7 months ago](https://wordpress.org/support/topic/plugin-wp-table-reloaded-column-filtering-using-select-menus/#post-1762712)
 * Status: not resolved