Having trouble with Ajax request for DataTables

Jasonca1

I am wanting to make an Ajax request and the request will return json data that I want loaded into a table. Here is my javascript:

$(document).ready(function () {
    var dataTable = $('#data-table').DataTable({
        ajax: {
            "url":'/',
            "data": JSON.stringify({'location': $('#location option:selected').text()}),
            "dataSrc": "",
            "type": "POST"
        },
        columns: [
            {"data": 'Product 1'},
            {"data": 'Cost Product 1'},
            {"data": 'Product 2'},
            {"data": 'Cost Product 2'},
            {"data": 'Total Product Cost'}
        ]
    });

$("#submit").on("click", function (){
    dataTable.ajax.reload();
});

And here is the html layout for my table:

    <table id="data-table">
        <thead>
        <tr>
            <th>Product 1</th>
            <th>Cost Product 1</th>
            <th>Product 2</th>
            <th>Cost Product 2</th>
            <th>Total Product Cost</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        </tbody>
    </table>

What I want to happen is when I load the page, the table is hidden, but when I click a specific button, the Ajax data is loaded and the table is shown, and then when I make a new selection, click the button, the table is refreshed with the new data. Any advice?