Jquery DataTable未在Ajax调用中加载

我需要的是：

• 当用户提交表单时，将加载DataTable

我面临的问题是，当用户post数据附加到div上，但在ajax调用中未加载datatable时

我使用过Ajax代码：

           var oTable; 
            if ($('#teamTable').size() > 0)
            {

            var oTable = $('#teamTable').dataTable({
            "sPaginationType": "bootstrap",
            "bJQueryUI":true,
            "bSort":false,
            "bPaginate":true, // Pagination True 
            stateSave: true,
            "iDisplayLength": 10,
            "bDestroy": true//storing the instance of the dataTable for futher use in the future
            });
            }


        $("#save_team").click(function() {
            alert("click");
        $.ajax({
        type: "POST",
        url: "asana_team.php",
        data: { people_name: $('#e2').val(), team_name:$('#teamname').val() },
        beforeSend : function(){
            $(".team_table").remove();
            $("#team_table_div").append("<center id=\"loading\" style=\"margin-top:25%;margin-bottom:25%\"><img src='../common/images/ajax-loader.gif' /></center>");
        },
        contentType: "application/x-www-form-urlencoded"
        }).done(function(data) {
            $("#loading").remove();
            $('#team_table_div').append(data);


           if ($('.table').size() > 0)
           {
               $('.table').dataTable({
                   "sPaginationType": "bootstrap",
                   "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
                   "oLanguage": {
                       "sLengthMenu": "_MENU_ records per page"
                   }
               });
           }

    });
    });

varotable；
如果（$（'#teamTable'）.size（）>0）
{
变量oTable=$（'#teamTable'）.dataTable({
“sPaginationType”：“引导程序”，
“bJQueryUI”：没错，
“bSort”：错误，
“bPaginate”：true，//分页为true
stateSave：没错，
“iDisplayLength”：10，
“bDestroy”：true//存储数据表的实例以供将来使用
});
}
$（“#保存团队”）。单击（函数（）{
警报（“点击”）；
$.ajax({
类型：“POST”，
url:“asana_team.php”，
数据：{people_name:$（'#e2'）.val（），team_name:$（'#teamname'）.val（）}，
beforeSend:function（）{
$（“.team_table”）.remove（）；
$（“#团队#表#div”）。追加（“”）；
},
contentType:“application/x-www-form-urlencoded”
}).完成（功能（数据）{
$（“#加载”）.remove（）；
$（'team#u table_div'）。追加（数据）；
如果（$（'.table'）.size（）>0）
{
$（'.table'）.dataTable({
“sPaginationType”：“引导程序”，
“sDom”：“t”，
“语言”：{
“sLengthMenu”：“\u MENU\u每页记录”
}
});
}
});
});

Html代码：

<div class="span6" style="padding-right:10px" id="team_table_div">
        <h4>Already Added Teams/Users</h4>
         <br />
        <div id="team_table">
         <!-- Table -->
        <table class="table-condensed table-hover table" id="teamTable">

           <!-- Table heading -->
      <thead>
       <tr>
     <th>Team Name</th>
     <th>People Name</th>
      <th></th>
      </tr>
         ``</thead>
<!-- // Table heading END -->

<!-- Table body -->
<tbody>
<?php
$team_store = mysql_query("select * from ess_teamname ORDER BY Team_Name ASC");
while ($team_store_row = mysql_fetch_assoc($team_store))
{
    //echo "select * from asana_users where User_id = '".$team_store_row['User_id']."' ";
$people_name = mysql_fetch_assoc(mysql_query("select * from asana_users where User_id = '".$team_store_row['User_id']."'"));

?>
<tr class="nofirst">
<td ><?php echo $team_store_row['Team_Name']; ?></td>
<td ><?php echo $people_name['Name']; ?></td>
<td><a href="javascript: return 0;" class="glyphicons remove_2" id="<?php echo "rmTeam".$team_store_row['Table_ID']; ?>" style="top:-6px"><i></i></a></td>
</tr>
<?php   } ?>
</tbody>
<!-- Table body END-->
</table>
</div>
</div>

已添加团队/用户


队名
人名
``

请给出一个包含完整代码的JSFIDLE…我已经更新了我的代码