使用ajax下拉时数据表更改

Question

我是ajax php的新人。所以我的问题是，如何在下拉列表中刷新datatable

这是我的代码

数据库中的数据

PHP

<?php
  include "../Utility/Connection.php";
  $conn = Connection::getConnection();
  $conn->beginTransaction();

  $Month = $_POST['id'];

  $sql = $conn->prepare('SELECT * From Transaction where MONTH(Dt_Created) = ?');
  $sql->bindParam(1, $Month);
  $sql->execute();
  $return = [];
  foreach ($sql as $row) {
    $return[] = [ 
        'notrans' => $row['NoTrans'],
        'Credit'  => $row['CreditStatus'],
        'Debit'   => $row['DebitStatus']
    ];
  }
  $dbh = null;
  echo json_encode($return);
?>

我的观点 HTML

<div class="row">
  <div class="col-md-4"> 
    <label>Select Month</label>
    <select class="form-control select2 select2-hidden-accessible" id="example" onchange="getchange2(this)" name="cmb_month">
      <option value="1">January</option>       
      <option value="2">February</option>       
      <option value="3">March</option>       
      <option value="4">April</option>       
      <option value="5">May</option>       
      <option value="6">June</option>       
      <option value="7">July</option>       
      <option value="88">August</option>       
      <option value="9">September</option>       
      <option value="10">October</option>       
      <option value="11">November</option>       
      <option value="12">December</option>       
    </select>
  </div> <!-- end div col-6 -->
</div>
<div style="height: 20px"></div>
<div class="row">
  <div class="col-md-12">            
    <div class="box box-primary">
      <div class="box-header">
        <h3 class="box-title">Data Table Transaction</h3>
      </div>
      <!-- /.box-header -->
      <div class="box-body">
        <div class="table-responsive no-padding">
          <table id="example" class="table table-bordered table-striped">
            <thead>
              <tr>
                <th>notrans</th>
                <th>Debit</th>
                <th>Credit</th>
              </tr>
            </thead>
          </table>
        </div> <!--table responsive-->
      </div> <!--box body-->
    </div> <!-- end div col-6 -->
  </div>
  <!-- /row -->
  <script src="http://code.jquery.com/jquery.js"></script>
  <script type="text/javascript">

    function getchange2(value) {
      var tmp = $('select[name=cmb_month]').val();
      var naon = $.ajax({
        url: "view/ajaxtransaction.php",
        type: "POST",
        dataType: "json",
        async: false,
        cache: false,
        data: "id=" + tmp,
        complete: function (data) {
          // var temp = data.responseText;
          console.log(data);
          // $('#totalhours').val(temp.split('"').join(""));
        }
      });
      var obj = JSON.parse(naon.responseText);
      $('#example').DataTable({
        columns: [
          {data: obj.notrans},
          {data: obj.Debit},
          {data: obj.Credit}
        ]
      });
    }

  </script>

并且它不起作用。

它始终生成以下错误

  

未捕获的TypeError ：无法读取属性＆＃39; nTable＆＃39;为null