数据表在ajax调用后没有初始化

Question

我正在使用ajax运行查询并将输出返回到：

<form action="" class="form-inline">
<div class="form-group">
<label for="alarm_text">Hub Site: </label>
<select name="Site" onchange="showCustomer(this.value)" class="form-control">
<option value="">Select a site</option>
<cfoutput query="groupCount">
<option value="#HSEN#">#HS#</option>
</cfoutput>
</select>
</div>
</div>
</form>
</div> 
</div>
</div>
</div>

<div class="container" id="txtHint" style="margin-bottom: 50px;" style="border: 1px solid red;">
</div>

<script>
function showCustomer(str) {
                    var xhttp;
                    if (str == "") {
                    document.getElementById("txtHint").innerHTML = "";
                    return;
                    }
                    xhttp = new XMLHttpRequest();
                    xhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("txtHint").innerHTML = this.responseText;
                    }
                    };
                    xhttp.open("GET", "FindAlarmRecords.cfm?q="+str, true);
                    xhttp.send();
                    }

                    $(document).ready(function(){
                    $('#RARData').DataTable(
                    );
                    });
                </script>

结果输出传递到DataTable，但它没有初始化（即显示分页等）：

<script type="text/javascript">
$(document).ready(function(){
$('#RARData').DataTable(
);
});
</script>

我是整个java / ajax世界的新手。谁能告诉我我做错了什么？

谢谢大家。