title: Reinitialize Jquery DataTable on Select(DropDown) change event
body: <p>i am using Jquery UI DataTable, which is filled on <code>select(DropDown)</code> <code>change</code> event.
  On <code>PageLoad</code> its ok. When i perform <code>dropdown change</code> event, <code>DataTable</code> is <code>Reinitialized</code> by using <code>fnDestroy()</code>, but the format of <code>DataTable</code> changes. Below is my code..</p>
  
  <pre><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 '&lt;a class="edit" href=""&gt;Edit&lt;/a&gt;';
  
                              }
                          }
              ]
          });
  </code></pre>
  
  <p>My form looks on <code>Page Load</code> like..</p>
  
  <p><img src="https://i.stack.imgur.com/7rdAy.png" alt="enter image description here"></p>
  
  <p>After <code>DropDown</code> change event, looks like below..</p>
  
  <p><img src="https://i.stack.imgur.com/byE4G.png" alt="enter image description here"></p>
  
  <p>Any Help....</p>