Initialize datatables from off page form

jagsweb

I am using datatables 1.10 and using it with child rows. Datatables rocks and we are utilizing it on both the front and backend. I really appreciate finding this and utilizing datatables.

I need to have a search widget which initializes the table with a global search and then delivers the results to a webpage.

I built a separate js dynamic drop down so users can select the year, make and model of their vehicle http://jsbin.com/risehuzu/1/ On click of the go button, I need it to initialize this datatable http://jsbin.com/fawuzoda/1/ and show the results on search.aspx

I really need help with the table initialization call from the search form. Thanks for any assistance.

My form input htm and the script that calls it:

 var nLists = 3; // number of select lists in the set

function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
var ms = document.getElementById('model');
ms.length=1;
ms.selectedIndex=0;
}
var nCat = categories[currCat];
for (each in nCat) {
var nOption = document.createElement('option'); 
var nData = document.createTextNode(nCat[each]); 
nOption.setAttribute('value',nCat[each]); 
nOption.appendChild(nData); 
currList.appendChild(nOption); 
} 
}

function getValue(L3, L2, L1) {
alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3);
}

function init() {
fillSelect('startList',document.getElementById('year')); 
}  
function setupForm() {
var yearS = document.getElementById('year');
var makeS = document.getElementById('make');
var modelS = document.getElementById('model');
document.getElementById('find').value = yearS.options[yearS.selectedIndex].value +    " " + makeS.options[makeS.selectedIndex].value + " " + modelS.options[modelS.selectedIndex].value; 
}
</script> 

 <div id="featuremodule2">
<table align="center" width="600" border="0" cellspacing="0" cellpadding="15">
<tr>
<td colspan="3" align="left"><h2>Begin your product search here:</h2></td>
</tr>
<tr>
<td  width="100" align="left">
<select class="select" id="year"   onchange="fillSelect(this.value,document.getElementById('make'))">
 <option selected>Select Year</option>
</select></td>
<td align="left" width="150"><select  class="select" id="make" onchange="fillSelect(this.value,document.getElementById('model'))">
<option selected>Select Make</option>
</select></td>
<td  width="300" align="left"><select class="select" id="model">
<option selected>Select Model</option>
</select></td>

<td><form action="search.aspx" name="tripleplay" target="_parent">
<input type="hidden" name="find" id="find" />
<input name="Submit" type="submit" 
onClick="setupForm()" value="Go">

</form></td>

</tr>
</table>

My script for calling the datatable:

 <script type="text/javascript">
 /* Formatting function for row details - modify as you need */
 function format ( d ) {
 // `d` is the original data object for the row
 return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;padding-right:50px;">'+
    '<tr>'+
        '<td>'+d.PN+'</td>'+
        '<td><a href="' + d.PU + '" target="_blank">View Product Page</td>'+    
        '<td rowspan="4"><img src="images/products/Thumb/' + d.Th + '"/></td>'+
    '</tr>'+
    '<tr>'+
        '<td>Category:</td>'+
        '<td>'+d.Cat+'</td>'+
    '</tr>'+
    '<tr>'+
        '<td>Location:</td>'+
        '<td>'+d.L+'</td>'+
    '</tr>'+
    '<tr>'+
        '<td>Notes:</td>'+
        '<td>'+d.N+'</td>'+
    '</tr>'+

'</table>';
}


function filterGlobal () {
$('#example').DataTable().search(
    $('#global_filter').val()
).draw();
}

function filterColumn ( i ) {
$('#example').DataTable().column( i ).search(
    $('#col'+i+'_filter').val()
).draw();
}

$(document).ready(function() {
var table = $('#example').DataTable( {
  "ajax": "http://pacesetterexhaust.com/data/cat-data-mini.txt",
    "columns": [
        {
            "class":          'details-control',
            "orderable":      false,
            "data":           null,
            "defaultContent": ''
        },
        { "data": "Y" },
        { "data": "K" },
        { "data": "D" },
        { "data": "E" },
        { "data": "PN" }
    ],
    "order": [[2,'asc'], [3,'asc'], [4,'asc'], [5,'asc']],
    "bSort": true,
    "bPaginate": true,
    "bLengthChange": true,
    "bInfo": false,
    "bAutoWidth": false,
    "iCookieDuration": 60*60*24, // 1 day 
} );

// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
    var tr = $(this).parents('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row
        row.child( format(row.data()) ).show();
        tr.addClass('shown');
    }
} );

$('input.global_filter').on( 'keyup click', function () {
    filterGlobal();
} );

$('input.column_filter').on( 'keyup click', function () {
    filterColumn( $(this).parents('tr').attr('data-column') );
} );

} );

</script>

jagsweb

I tried doing it with the filtering api, but am unable to figure out how to remove the filters from the table and then have then call it up from just the widget. Maybe this is possible from this api and I am overdoing it above. I don't know, please help.