Need to get Column Data after applying filters to the table

Matthec

Hi, I am using DataTables to render a table from our internal SharePoint 2013 farm and it works great! Thank you for such a COOL tool! Now I need to take the information from a column of this table after our users have applied various filters too and use it to get data from another list. So, I need to get the filtered records into an array that I can work with. Everything that I have tried to do gets me either the entire list or an error, not the filtered results that I am after. I am using the yadcf plugin for my external filters and I am not sure if that is causing an issue or not. I have tried the following without success:

var plainArray = $('#Table').dataTable().api().column(3).data().toArray();

but this method does not refresh after filters are applied. I just get the same number of records regardless of what filtering is done.

This Method gives me the following error "Uncaught TypeError: oTable.column is not a function".

       
        var array = [];
            oTable.column(3, { search:'applied' } ).data().each(function(value, index) {
        array.push(value);
        });
        console.log(array);

Here is a snip-it of the code that I am using:

<td style="vertical-align: top;">
        <table cellpadding="0" cellspacing="0"  border="2px" class="cell-border" id="Table">
            <thead>
                <tr>
                        <th class="Title">Title</th>
                        ...More Fields here...
                    </tr>                   
            </thead>
        </table>
</td>
 
 $(document).ready(function() { 
// 'use strict'; 
   var RestUrl = "SharePoint Site URL/_api/Web/Lists/GetByTitle('Table')/items?$select=Title,...(more fields)...&$Top=5000";  
   $.ajax({  
     url: RestUrl,  
     method: "GET",  
     headers: {  
       "accept": "application/json;odata=verbose",  
     },  
     success: function(data) {
       if (data.d.results.length > 0) {  
 
         //construct HTML Table from the JSON Data  

         //Bind the HTML data with Jquery DataTable  
         var oTable = $('#Table').dataTable({ 
         initComplete: function() {  
            //Apply Text Filteres Here

            var VECColumn = this.api().columns(24);  
            $("#txtVEC").on('keyup change', function() {    
             if (VECColumn.search() !== this.value) {    
              VECColumn.search(this.value).draw();    
             }    
            });
            
             }, 
                "bProcessing": true,
                "orderClasses": false,
                "scrollCollapse": false,
                "colReorder": false,
                "fixedHeader": true,
                "responsive": true,
                "bJQueryUI": true,
                "keys": true,
                "bStateSave": false,
                "bDestroy": true,
                "autoresize":true,
                "iDisplayLength": 30,  
                "aLengthMenu": [  
                    [5, 10, 30, 50],  
                    [5, 10, 30, 50]  
                                ],  
                "sPaginationType": "full_numbers",
                "aaData": data.d.results,
                "aoColumns": [
                //apply mData information here
                                { "mData": "Title" , "sName":"TitleDropDown", "bVisible":true, "bSearchable":true},
                                ...More Fields....
                              ]
         }).yadcf([
            //Apply Filters Here // 
            {column_number : 0, sort_as: 'alphaNum',  filter_default_label: " ", filter_container_id:"ProgramNameDropDown",filter_reset_button_text: 'x' },
            ...More Filters...
          ],{cumulative_filtering: true}
          );   
   
        var array = [];
            oTable.column(3, { search:'applied' } ).data().each(function(value, index) {
        array.push(value);
        });
        console.log(array);
        
        $('input.toggle-vis').on( 'click', function (e) {
        // Get the column API object
        var column = $('#Table').dataTable().api().column($(this).attr('data-column'));
         // Toggle the visibility
        column.visible( ! column.visible() );
        } ); 
        
        var plainArray = $('#Table').dataTable().api().column(3).data().toArray();      
        console.log(plainArray);

I am sure that there is something that I am missing here, but I can't put my finger on it... Any assistance would be most appreciated. Thank you for your time.