Jquery 无法在客户端处理中使用ajax.url.load（）方法重新加载数据表

我是jQuery新手，刚刚开始尝试数据表-客户端处理。我知道，对于数据表的客户端处理，需要立即从服务器获取所有数据，但我仍然需要在事件触发器上获取一些数据，并使用获取的新数据重新加载数据表。我正在做的是通过AJAX调用下拉框的更改事件从服务器端获取JSON数据列表。ajax响应被馈送到一个html表，在填充该表之后，我为其设置了一个dataTable。因此，每次我在下拉列表中选择不同的条目时，我都需要触发这个ajax并重新加载数据表（如果它已经存在）。这就是我到目前为止所尝试的

jQuery：

    $('#selectBoxID').bind('change', function( event ){

    var selectBoxValue =$('#selectBoxID').val();

            jQuery.ajax({
            type: 'POST',        
            url: '/getTableData.spr', 
            cache: false,      
            dataType :"json",
                data: {"mySelect" : selectBoxValue}, //data sent to request page    

            success: function(response) {


                    jQuery.each(response, function(key, value)
                 {

                    oTable = oTable + populateRows(key, value, oRow);               

                }); 


            console.log("@Ajax sucess, oTable HTML content is :" + oTable);
            $('#htmlTableID').append(oTable);


            if ( $.fn.dataTable.isDataTable( '#htmlTableID' ) ) 
            {       
            console.log("dataTable already exist. HTML table content is:" + oTable);
            console.log(" $ datatable obj  :" + oTableJq);
            oTableJq.ajax.url('/getTableData.spr').load();
            console.log("table reloaded" + oTableJq);                   

             }else
            {

            oTableJq= $('#htmlTableID').dataTable({
            "sPaginationType": "full_numbers",
            "bLengthChange":false,
            "bInfo": true,
            "iDisplayLength":10
                }); 
            console.log("html  string :" + oTable);
            oTableJq = $('#htmlTableID').DataTable({ajax:"data.json"});
            console.log("table created first time" + oTableJq);

            }

        }, //end of success block

            error: (function(message)  { alert("Error in fetching the data.");
            alert("error message : " + message); }),     

            }); 
            //   alert(" end of ajax call");

            oTable = ""; oRow = ""; oTableJq = "";              


    }); //alert("end of  bind, dropdown change event") ; 

}); // end of ready function

function populateRows(key, value, oRow)          
    {          
        oRow = oRow + '<tr><td><a class="achor" href='+""+ '>' + key + '</a></td><td>' 
        + value.date+ </td><td>' + value.username + '</td><td>' + value.email + '</td>' +
        '</tr>' ;

        return oRow;

     }

$（'selectBoxID'）.bind（'change'，函数（事件）{
var selectBoxValue=$（'#selectBoxID'）.val（）；
jQuery.ajax({
键入：“POST”，
url:“/getTableData.spr”，
cache:false，
数据类型：“json”，
数据：{“mySelect”：selectBoxValue}，//发送到请求页面的数据
成功：功能（响应）{
每个（响应、函数（键、值）
{
oTable=oTable+populateRows（键、值或箭头）；
}); 
log（@Ajax success，可旋转的HTML内容为：“+oTable”）；
$（'#htmlTableID'）.append（oTable）；
if（$.fn.dataTable.isDataTable（'#htmlTableID'））
{       
log（“dataTable已经存在。HTML表内容为：“+oTable”）；
log（“$datatable obj:+oTableJq”）；
oTableJq.ajax.url（'/getTableData.spr'）.load（）；
log（“重新加载的表”+oTableJq）；
}否则
{
oTableJq=$（'#htmlTableID'）。数据表({
“sPaginationType”：“完整编号”，
“bLengthChange”：false，
“宾福”：没错，
“iDisplayLength”：10
}); 
log（“html字符串：+oTable”）；
oTableJq=$（'#htmlTableID'）.DataTable（{ajax:data.json}）；
log（“第一次创建的表”+oTableJq）；
}
}，//成功块结束
错误：（函数（消息）{alert（“获取数据时出错”）；
警报（“错误消息：+消息）；}），
}); 
//警报（“ajax调用结束”）；
oTable=“”；oRow=“”；oTableJq=“”；
}); //警报（“绑定结束，下拉更改事件”）；
}); // 就绪功能结束
函数populateRows（键、值、oRow）
{          
oRow=oRow+“”
+value.date+'+value.username+'+value.email+''+
'' ;
返回oRow；
}

HTML:

日期
用户名
电子邮件

在这段代码中，在第一次加载datatables之前，我收到datatables.net/tn/3警告消息说dataTable无法重新初始化。同样，在通过在下拉列表中选择另一个值触发第二个ajax调用之后，我从datatables.net/tn/7获得ajax错误消息。在这个错误之后，我得到了原始html格式的新数据显示，dataTable将不会初始化。即使销毁DT也可以将数据重新加载到dataTable中，但我也无法做到这一点。我做错了什么

谢谢。

尝试添加

 "bDestroy" :true 

添加到数据表中，以便它知道如何在重新创建中销毁现有的数据表

如果这不适用于您，那么您也可以从表中清除数据并读取新数组

oTableJq.empty();
oTableJq.fnAddData(yourArray);

---

我清空了与html表所在的DIV相关联的整个dom元素，然后在ajax回调之后添加了dom结构和新数据，并再次初始化了dataTable，之后就可以实现这一点。这是jQuery代码

    $('#selectBoxID').bind('change', function( event ){

    oDivContent = '<table id="htmlTableID">' +
                    '<thead>' + 
             // table header in query string.

                    ' </thead> ' +

                        '<tbody id="TbodyId"></tbody>' +
               ' </table> ' ;



var selectBoxValue =$('#selectBoxID').val();

        jQuery.ajax({
        type: 'POST',        
        url: '/getTableData.spr', 
        cache: false,      
        dataType :"json",
        data: {"mySelect" : selectBoxValue}, //data sent to request page    
        success: function(response) {
             jQuery.each(response, function(key, value){

                oTable = oTable + populateRows(key, value, oRow);               
            }); 


        console.log("@Ajax sucess, oTable HTML content is :" + oTable);
        $('#htmlTableID').append(oTable);


        if ( $.fn.dataTable.isDataTable( '#htmlTableID' ) ) 
        {       
        //console.log("dataTable already exist. HTML table content is:" + oTable);
    //console.log(" $ datatable obj  :" + oTableJq);

    oTableJq.fcDestroy();
    oTableJq.empty();

    $('#container1').empty(); //the div inside whcih table structure lies
    $('#container1').append(oDivContent);   //addign the table 

    $('#htmlTableID').append(oTable); 

    //   console.log("html table text(): "          +$('#htmlTableID').text());                                     
        oTableQ = $('#htmlTableID').dataTable({
            "sPaginationType": "full_numbers",
            "bLengthChange":false,
            "bInfo": true,
            "iDisplayLength":10             
        });             


         }else
        {

        oTableJq= $('#htmlTableID').dataTable({
        "sPaginationType": "full_numbers",
        "bLengthChange":false,
        "bInfo": true,
        "iDisplayLength":10
            }); 

        }

    }, //end of success block

        error: (function(message)  { alert("Error in fetching the data.");
        alert("error message : " + message); }),     

        }); 
        //   alert(" end of ajax call");

        oTable = ""; oRow = ""; oTableJq = "";              


}); //alert("end of  bind, dropdown change event") ; 

    }); // end of ready function

    function populateRows(key, value, oRow)          
   {          
    oRow = oRow + '<tr><td><a class="achor" href='+""+ '>' + key + '</a></td><td>' 
    + value.date+ </td><td>' + value.username + '</td><td>' + value.email + '</td>' +
    '</tr>' ;

    return oRow;

  }

$（'selectBoxID'）.bind（'change'，函数（事件）{
oDivContent=“”+
'' + 
//查询字符串中的表标题。
'  ' +
'' +
'  ' ;
var selectBoxValue=$（'#selectBoxID'）.val（）；
jQuery.ajax({
键入：“POST”，
url:“/getTableData.spr”，
cache:false，
数据类型：“json”，
数据：{“mySelect”：selectBoxValue}，//发送到请求页面的数据
成功：功能（响应）{
每个（响应、函数（键、值）{
oTable=oTable+populateRows（键、值或箭头）；
}); 
log（@Ajax success，可旋转的HTML内容为：“+oTable”）；
$（'#htmlTableID'）.append（oTable）；
if（$.fn.dataTable.isDataTable（'#htmlTableID'））
{       
//log（“dataTable已经存在。HTML表内容为：“+oTable”）；
//log（“$datatable obj:+oTableJq”）；
oTableJq.fcDestroy（）；
oTableJq.empty（）；
$（'#container1'）.empty（）；//whcih表结构中的div位于
$（'#container1'）.append（oDivContent）；//添加表
$（'#htmlTableID'）.append（oTable）；
//log（“html table text（）：”+$（'#htmlTableID'）.text（）；
oTableQ=$（'#htmlTableID'）。数据表({
“sPaginationType”：“完整编号”，
“bLengthChange”：false，
“宾福”：没错，
“iDisplayLength”：10
});             
}否则
    $('#selectBoxID').bind('change', function( event ){

    oDivContent = '<table id="htmlTableID">' +
                    '<thead>' + 
             // table header in query string.

                    ' </thead> ' +

                        '<tbody id="TbodyId"></tbody>' +
               ' </table> ' ;



var selectBoxValue =$('#selectBoxID').val();

        jQuery.ajax({
        type: 'POST',        
        url: '/getTableData.spr', 
        cache: false,      
        dataType :"json",
        data: {"mySelect" : selectBoxValue}, //data sent to request page    
        success: function(response) {
             jQuery.each(response, function(key, value){

                oTable = oTable + populateRows(key, value, oRow);               
            }); 


        console.log("@Ajax sucess, oTable HTML content is :" + oTable);
        $('#htmlTableID').append(oTable);


        if ( $.fn.dataTable.isDataTable( '#htmlTableID' ) ) 
        {       
        //console.log("dataTable already exist. HTML table content is:" + oTable);
    //console.log(" $ datatable obj  :" + oTableJq);

    oTableJq.fcDestroy();
    oTableJq.empty();

    $('#container1').empty(); //the div inside whcih table structure lies
    $('#container1').append(oDivContent);   //addign the table 

    $('#htmlTableID').append(oTable); 

    //   console.log("html table text(): "          +$('#htmlTableID').text());                                     
        oTableQ = $('#htmlTableID').dataTable({
            "sPaginationType": "full_numbers",
            "bLengthChange":false,
            "bInfo": true,
            "iDisplayLength":10             
        });             


         }else
        {

        oTableJq= $('#htmlTableID').dataTable({
        "sPaginationType": "full_numbers",
        "bLengthChange":false,
        "bInfo": true,
        "iDisplayLength":10
            }); 

        }

    }, //end of success block

        error: (function(message)  { alert("Error in fetching the data.");
        alert("error message : " + message); }),     

        }); 
        //   alert(" end of ajax call");

        oTable = ""; oRow = ""; oTableJq = "";              


}); //alert("end of  bind, dropdown change event") ; 

    }); // end of ready function

    function populateRows(key, value, oRow)          
   {          
    oRow = oRow + '<tr><td><a class="achor" href='+""+ '>' + key + '</a></td><td>' 
    + value.date+ </td><td>' + value.username + '</td><td>' + value.email + '</td>' +
    '</tr>' ;

    return oRow;

  }