Создание данных с использованием jquery и Ajax

Question

Я хочу обработать aaData для создания таблицы данных. но я получаю сообщение об ошибке DataTables предупреждение:

table id=DataTables_Table_0 - Cannot reinitialise DataTable. table id is correct.1

{
   "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
         }
      ]
   }
}

Jquery код здесь

$.ajax({
        type:'GET',
        url:'{{ route("admin.progresses.index") }}?season='+season+'&score_set='+score_set+'&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' }
                ]
            });
       }

});

Answer 1

Вы пытаетесь повторно инициализировать таблицу данных, которая уже была создана один раз. Пожалуйста, используйте опцию destroy: true внутри вашего $('.progress-table').DataTable() Пожалуйста, проверьте эту ссылку для более подробной информации о destroy

$(".progress-table tbody").remove()
    $('.progress-table').DataTable({
    "destroy": true, //used to destroy the original datatable and re-initialize
    "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' }
    ]
});