Select（DropDown）変更イベントでJquery DataTableを再初期化する

Question

Jquery UI DataTableを使用していますが、これはselect(DropDown)changeイベントに格納されています。 にPageLoadそのok。 dropdown changeイベントを実行する場合、はfnDestroy()を使用してReinitializedですが、DataTableの形式が変更されます。以下は、以下のようになります。

DropDown変更イベントの後に私のコード..

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

          } 
         } 
      ] 
     }); 

私のフォームのようなPage Loadに見えます..

いずれかがありますヘルプ....

Answer 1

私はこの方法でそれを行っている。..

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

これはjqueryの中のdataTableのCSSを上書きします。 dataTables.css

デフォルトでは

それはへ

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

変更のように見えます。..

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

それも、あなたはこのように、あなたのテーブルをクリアする必要が...私のため

Answer 2

試し：

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

か：

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

Answer 3

を働いた：

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