title: DataTables with different number of columns
body: <p>I am loading data using ajax and generating column names dynamically in my DataTable. My DataTable has different number of columns, depending on the selection by user.(There is a drop-down list).</p>
  
  <p>For example, there are 2 options in drop-down list as <strong>Southern Province</strong> and <strong>Northern Province</strong>. <strong>Southern Province</strong> table has 4 columns and <strong>Northern Province</strong> table has 6 columns. </p>
  
  <p><strong>Scenario 1</strong></p>
  
  <p>First user select <strong>Southern Province</strong> which has 4 columns. Then it generates table without no errors, But after that if user select <strong>Northern Province</strong> which has 6 columns, table not generate and js console print error as below. </p>
  
  <p><code>Uncaught TypeError: Cannot read property 'style' of undefined jquery.dataTables.js:3828</code></p>
  
  <p><strong>Scenario 2</strong></p>
  
  <p>First user select <strong>Northern Province</strong> which has 6 columns. Then it generates table without no errors, But after that if user select <strong>Southern Province</strong> which has 4 columns, table not generate and js console print error as below.</p>
  
  <p><code>Uncaught TypeError: Cannot read property 'mData' of undefined jquery.dataTables.js:6122</code></p>
  
  <p>But if both table has same number of columns, both tables generate without errors.</p>
  
  <p>How can I solve this ?</p>
  
  <p><strong>Here is the JS Code</strong></p>
  
  <pre><code>jQuery(document)
  .ready(
  function() {
      $('#province-list').change(
              function() {
                  var prov = $(this).val();
                  if (prov == "sp") {
                      make_SP();
                  } else if (prov == "np") {
                      make_NP();
                  }
              });
      function make_SP() {
      $("#dataTables-res_item")
      .dataTable(
      {
          "bDestroy" : true,
          "bProcessing" : false,
          "bServerSide" : true,
          "sAjaxSource" : "/province_list_view?p_name=sp",
          "aoColumns" : [
                  {
                      "mData" : "result_date",
                      "sTitle" : "Result Date"
                  },
                  {
                      "mData" : "result_day",
                      "sTitle" : "Result Day"
                  },
                  {
                      "mData" : "draw_number",
                      "sTitle" : "Draw Number"
                  },
                  {
                      "mData" : "draw_time",
                      "sTitle" : "Draw Time"
                  } ],
          "order" : [ [ 0, "desc" ] ]
          });
      };                  
      function make_NP() {
          $("#dataTables-res_item")
          .dataTable(
          {
              "bDestroy" : true,
              "bProcessing" : false,
              "bServerSide" : true,
              "sAjaxSource" : "/province_list_view?p_name=np",
              "aoColumns" : [
                      {
                          "mData" : "result_date",
                          "sTitle" : "Result Date"
                      },
                      {
                          "mData" : "result_day",
                          "sTitle" : "Result Day"
                      },
                      {
                          "mData" : "draw_number",
                          "sTitle" : "Draw Number"
                      },
                      {
                          "mData" : "draw_time",
                          "sTitle" : "Draw Time"
                      },
                      {
                          "mData" : "draw_place",
                          "sTitle" : "Draw Place"
                      },
                      {
                          "mData" : "draw_person",
                          "sTitle" : "Agent"
                      } ],
              "order" : [ [ 0, "desc" ] ]
          });
      };
  });
  </code></pre>