Open datatables instance in new window or modal

jagsweb

I am using datatables to display a huge amount of auto part fitment info for a auto part website. I am using serverside processing to populate my dropdowns from a remotely hosted sql database and then it populates the datatable on the same page with results from that same remotely hosted sql db. I am turning the search into a snippet that can put in the footer of the site and I need it to load the results into a blank page or a modal window. I do not know where I need to split my code up or what the best method would be to accomplish this.

http://jsbin.com/totiyaro/1 is where I am at so far, but you will see it pushes the results in the same page. You can see all of the code in the example. I need those results in a new window or a modal. Thanks in advance for your assistance.

  $(document).ready(function () {

        function select_dropdown(id) {
            var data;
            if (id == "make") {
                data = "param=" + id + "&year=" + $("#year").val();
            } else if (id == "model") {
                data = "param=" + id + "&year=" + $("#year").val() + "&make=" + $("#make").val();
            } else if (id == "engine") {
                data = "param=" + id + "&year=" + $("#year").val() + "&make=" + $("#make").val() + "&model=" + $("#model").val();
            } else {
                data = "param=" + id;
            }

            $.ajax({
                "url": "http://performanceconverters.com/catscript5.php",
                "dataType": 'jsonp',
                "data": data,
                "success": function (result) {
                    $("#" + id).html("<option selected='selected' value='-1'>Select " + id.toLowerCase().replace(/\b[a-z]/g, function (letter) {
                        return letter.toUpperCase();
                    }) + " </option>");
                    $.each(result, function (i, elem) {
                        $("#" + id).append("<option value='" + elem + "'>" + elem + "</option>");
                    });
                }
            });
        }

        select_dropdown("year");

        $("#year").change(function () {
            $("#make").html('<option selected="selected" value="-1"> -- Loading -- </option>');
            select_dropdown("make");
            $("#model").html('<option selected="selected" value="-1">Select Model</option>');
            $("#engine").html('<option selected="selected" value="-1">Select Engine</option>');
        });

        $("#make").change(function () {
            $("#model").html('<option selected="selected" value="-1"> -- Loading -- </option>');
            select_dropdown("model");
            $("#engine").html('<option selected="selected" value="-1">Select Engine</option>');
        });

        $("#model").change(function () {
            $("#engine").html('<option selected="selected" value="-1"> -- Loading -- </option>');
            select_dropdown("engine");
        });

        var table;

        function createTable() {
            table = $('#catdata').DataTable({
                "retrieve": true,
                "bFilter": false,
                "processing": true,
                "serverSide": true,
                "sAjaxSource": "http://performanceconverters.com/catscript4.php",
                "fnServerData": function (sSource, aoData, fnCallback) {

                    aoData.push({
                        "name": "year",
                        "value": $("#year").val()
                    }, {
                        "name": "make",
                        "value": $("#make").val()
                    }, {
                        "name": "model",
                        "value": $("#model").val()
                    }, {
                        "name": "engine",
                        "value": $("#engine").val()
                    });

                    $.ajax({
                        "dataType": 'jsonp',
                        "url": sSource,
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                "columns": [{
                    "searchable": true
                }, {
                    "searchable": true
                }, {
                    "searchable": true
                }, {
                    "searchable": true
                }, {
                    "searchable": false
                }, {
                    "searchable": true
                }, {
                    "searchable": false
                }, {
                    "searchable": false
                }],
                "order": [
                    [1, 'asc'],
                    [2, 'asc'],
                    [0, 'asc']
                ],
                "bSort": true,
                "bPaginate": false,
                "deferRender": true,
                "bLengthChange": true,
                "bInfo": false,
                "bAutoWidth": true,
                "iCookieDuration": 60 * 60 * 24, // 1 day
            });
        }

        $("#submit").click(function () {
            if ($.fn.dataTable.isDataTable('#catdata')) {
                table.destroy();
            }
            createTable();
        });
    });