Reinicjalizuj Jquery DataTable w przypadku zmiany Wybierz (DropDown)

Question

Używam Jquery UI DataTable, która jest wypełniona select(DropDown)change zdarzenia. Na PageLoad jest ok. Kiedy wykonuję zdarzenie dropdown change, DataTable jest Reinitialized przy użyciu fnDestroy(), ale zmienia się format DataTable. Poniżej jest mój kod ..

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>'; 

          } 
         } 
      ] 
     }); 

Moja forma wygląda na Page Load jak ..

Po DropDown przypadku zmian, wygląda jak poniżej ..

Any Pomoc ....

Answer 1

mam zrobić to za pomocą tej metody ..

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

ten zastąpi css z dataTable w jQuery. dataTables.css

domyślnie wygląda

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

go zmienić ..

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

on pracował dla mnie ..

Answer 2

try:

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

czyli

//if you don't want the table reorder/resorted 
$('#ClassRegistredDataTable').dataTable().fnDraw(false); 

Answer 3

Nawet można wymagać, aby wyczyścić stół, tak:

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