• 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

    Thanks in advance for any help you can give.

Viewing 1 replies (of 1 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    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.