ajax输出没有样式

I have an index file which has a search form. the result of the search is a table. my original table in index.php uses datatables and both style and functionality works perfect. here is part of my index.php file that shows the result taken from the result of searchDate.php file: From: To:

            <select name="dateOption" id="dateOption">
                <option value="order"> Order </option>
                <option value="inventory"> Inventory </option>
                <option value="po"> PO# </option>
            </select>
            <input type="text" name="searchinput" id="searchinput" />
            <input type="button" value="SUBMIT" onclick="getDate();" />
        </form>

and here is the getDate() function:

function getDate() {
                $.post('searchDate.php' , {   dateKey: $("#searchinput").val(), 
                                              selected: $("#dateOption").val(),
                                              from: $("#date").val(),
                                              to: $("#date2").val()
                                              },
                    function(output) {
                        $('#mainTable').empty();
                        $('#orderSearch').empty();
                        $('#newOrder').empty();
                        $(".line").hide();
                        $("#loadNewInvoice").hide();
                        $('#searchResult').append(output);
                        $('#searchResult').css('display','block');
                        $('#searchResult').show("blind");

                });
            }

the result is a table with the same id and class as my original working table. however, the result is not functional and has no style. Thank you in advance. Edit: here is the css and my datatable configuration just in case:

table.display {
margin: 0 auto;
clear: both;
width: 100%;


}

table.display thead th {
padding: 3px 18px 3px 10px;
border-bottom: 1px solid black;
font-weight: bold;
cursor: pointer;
* cursor: hand;

}

table.display tfoot th {
padding: 3px 18px 3px 10px;
border-top: 1px solid black;
font-weight: bold;
}

table.display tr.heading2 td {
border-bottom: 1px solid #aaa;
}

table.display td {
padding: 3px 10px;
}

table.display td.center {
text-align: center;
 }

datatable:

$(document).ready( function () {
var oTable = $('#theTable').dataTable({
"bPaginate": true,
"bScrollCollapse": true,
"iDisplayLength": 15,
"oLanguage": {
        "sSearch": "Search all columns:"
    },
"aoColumnDefs": [
  { "asSorting": [ "desc" ], "aTargets": [ 0 ] }
    ]

} );

I have had the same problem some times ago. Jquery require that all yours ids are unique in the page. If this rule isn't respected, it simply does not work!

So, if you change the id of the table your code should work as expected.