Réinitialiser Jquery Datatables sur Select(liste Déroulante) événement de changement de

je suis à l'aide de Jquery UI DataTable, qui est rempli sur select(DropDown) change événement.
Sur PageLoad son ok. Lorsque j'effectue dropdown change événement, DataTable est Reinitialized en utilisant fnDestroy(), mais le format de DataTable changements. Ci-dessous mon code..

  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>';
}
}
]
});

Mon apparence de la forme sur Page Load comme..

Réinitialiser Jquery Datatables sur Select(liste Déroulante) événement de changement de

Après DropDown événement de changement, se présente comme ci-dessous..

Réinitialiser Jquery Datatables sur Select(liste Déroulante) événement de changement de

De L'Aide....

OriginalL'auteur Shahid Iqbal | 2013-09-07