title: Create datatable using jquery and Ajax
body: <p>I want to process <code>aaData</code> to create data table. but i get error DataTables warning: </p>
  
  <p><code>table id=DataTables_Table_0 - Cannot reinitialise DataTable. table id is correct.1</code></p>
  
  <pre><code>{
     "jsondata":{
        "draw":1,
        "iTotalRecords":100,
        "iTotalDisplayRecords":100,
        "aaData":[
           {
              "email":"admin@admin.com",
              "name":"adminsamju",
              "total_assignmets":24,
              "total_judges":2,
              "progress":8.333333333333332
           },
           {
              "email":"samjad20@gmail.com",
              "name":"samjad2",
              "total_assignmets":12,
              "total_judges":2,
              "progress":16.666666666666664
           }
        ]
     }
  }
  </code></pre>
  
  <p>Jquery code is here</p>
  
  <pre><code>$.ajax({
          type:'GET',
          url:'{{ route("admin.progresses.index") }}?season='+season+'&amp;score_set='+score_set+'&amp;p='+id,
           success:function(data) {
             $(".progress-table tbody").remove()
                  $('.progress-table').DataTable({
                  "searching": true, //this is disabled because I have a custom search.
                  "aaData": [data['jsondata']['aaData']], //here we get the array data from the ajax call.
                  "aoColumns": [
                     { data: 'name', name: 'name' },
                     { data: 'email', name: 'email' },
                     { data: 'progress', name: 'progress' },
                     { data: 'total_judges', name: 'total_judges' },
                     { data: 'total_assignmets', name: 'total_assignmets' }
                  ]
              });
         }
  
  });
  </code></pre>