在选择（下拉）更改事件上重新初始化Jquery数据表

我使用的是jQueryUIDataTable，它在

select（下拉菜单）

change

事件中填充。 在

PageLoad

上，它是正常的。当我执行

下拉更改

事件时，

数据表

通过使用

fnDestroy（）

重新初始化，但是

数据表的格式会更改。下面是我的代码

  campusChangeEvent = function () {
        $('#cmbClassCP').on('change', function () {
        $('#ClassRegistredDataTable').dataTable().fnDestroy();
            GetAllClassbyCampus($('#cmbClassCP :selected').val());
        });
    }, 

 GetAllClassbyCampus = function (id) {
        var oTable = $('#ClassRegistredDataTable').dataTable({
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "bServerSide": true,
            "bRetrieve": true,
            "bDestroy": true,
            "sAjaxSource": "/forms/Setup/Setup.aspx/GetAllClassBycampus?CampusId=" + id,
            "fnServerData": function (sSource, aoData, fnCallback) {
                $.ajax({
                    "type": "GET",
                    "dataType": 'json',
                    "contentType": "application/json; charset=utf-8",
                    "url": sSource,
                    "data": aoData,
                    "success": function (data) {
                        fnCallback(data.d);
                    }
                });
            },
            "aoColumns": [
                         {
                             "mDataProp": "RowNo",
                             "bSearchable": false,
                             "bSortable": false,
                             "sWidth": "20"
                         },
                        {
                            "mDataProp": "CampusName",
                            "bSearchable": false,
                            "bSortable": false,

                        },
                        {
                            "mDataProp": "ClassName",
                            "bSearchable": true,
                            "bSortable": false

                        },
                        {
                            "mDataProp": "Section",
                            "bSearchable": false,
                            "bSortable": false
                        },
                        {
                            "mDataProp": "Description",
                            "bSearchable": false,
                            "bSortable": false
                        },
                        {
                            "mData": null,
                            "bSearchable": false,
                            "bSortable": false,
                            "fnRender": function (oObj) {
                                return '<a class="edit" href="">Edit</a>';

                            }
                        }
            ]
        });

CampuChangeEvent=函数（）{
$（'#cmbClassCP'）。on（'change'，function（）{
$（'#ClassRegistredDataTable'）.dataTable（）.fnDestroy（）；
GetAllClassbyCampus（$（'#cmbClassCP:selected'）.val（）；
});
}, 
GetAllClassbyCampus=函数（id）{
var oTable=$（'#ClassRegistredDataTable'）。数据表({
“bJQueryUI”：没错，
“sPaginationType”：“完整编号”，
“bServerSide”：正确，
“bRetrieve”：没错，
是的，
“sAjaxSource”：“/forms/Setup/Setup.aspx/GetAllClassBycampus？CampusId=“+id，
“fnServerData”：函数（sSource、aoData、fnServerData回调）{
$.ajax({
“类型”：“获取”，
“数据类型”：“json”，
“contentType”：“application/json；charset=utf-8”，
“url”：sSource，
“数据”：aoData，
“成功”：功能（数据）{
fn（data.d）；
}
});
},
“aoColumns”：[
{
“mDataProp”：“RowNo”，
“可搜索”：错误，
“可移植”：错误，
“sWidth”：“20”
},
{
“mDataProp”：“CampusName”，
“可搜索”：错误，
“可移植”：错误，
},
{
“mDataProp”：“ClassName”，
“可听”：是的，
“可移植”：false
},
{
“mDataProp”：“节”，
“可搜索”：错误，
“可移植”：false
},
{
“mDataProp”：“说明”，
“可搜索”：错误，
“可移植”：false
},
{
“mData”：空，
“可搜索”：错误，
“可移植”：错误，
“fnRender”：函数（oObj）{
返回“”；
}
}
]
});

我的表单在
页面加载中看起来像


在
下拉列表
更改事件之后，如下所示


任何帮助…
请尝试：

$('#ClassRegistredDataTable').dataTable().fnDraw();

或：

我是用这种方法做的

 $('#ClassRegistredDataTable').dataTable().fnDestroy();

这将覆盖jquery.dataTables.css中dataTable的css

默认情况下，它看起来像

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

把它改成

table.dataTable {
    margin: 0 auto;
    clear: both;
    width: 100% !important;
}

这对我很有效。
即使你需要清理桌子，如下所示：

$('#ClassRegistredDataTable tbody').html('');
$('#ClassRegistredDataTable').dataTable().fnDestroy();

fnDraw（）
和
fndstroy（）
在我的页面上具有相同的效果。如果您删除GetAllClassbyCampus（$（'#cmbClassCP:selected'）.val（），会发生什么情况；在fnDraw之后？我认为在数据表已经初始化之后，您不应该再次尝试初始化它。啊，我明白了。您从下拉列表中选择一个校园，并希望它基于校园绘制一个全新的数据表，对吗？这可能是一个更好的选择：
$('#ClassRegistredDataTable tbody').html('');
$('#ClassRegistredDataTable').dataTable().fnDestroy();