Problem with destroy

hercross

Hi, I have a datatable linking with ajax procedure to take the values.. and I hace a button to change the period time of the seraching..

In the first case, all waorks fine, but when I press the filter button, to select a period time, I see the result, but when I click in a row I get "Uncaught TypeError: Cannot read properties of undefined (reading '_aData')".

I have a function to initial generation:

var obtener = function(records_inicio, records_fin){
table = $('#db_records').DataTable({
      "destroy":true,
      "autoWidth": false,
      "responsive":true,
      "ajax":{
        "method":"POST",
        "url":"../include/sql_records.php",
        "data":{
          "records_inicio":records_inicio,
          "records_fin":records_fin
        }
      },

      "select":{
      "style":"multi"
      },

      "order":[
        [2, "asc"]
      ],

      "columns":[
        {"data":"id"},
        {"data":"ruta"},
        {"data":"fecha_hora"},
        {"data":"origen"},
        {"data":"destino"},
        {"data":"duracion"},
        {"data":"disposicion"},
        {"defaultContent":"<a class='show_records glyphicon glyphicon-play-circle' data-toggle='tooltip' href='javascript:void(0)' title='Audio grabación'</a> <a class='eliminar_records glyphicon glyphicon-remove' data-toggle='tooltip' $
      ],

      "columnDefs":[
        {
          responsivePriority: 1, targets: 0
        },
        {
          responsivePriority: 2, targets: -1
        },
        {
          "targets": [0,1],
          "visible": false,
          "searchable": false
        },
        {
          className: "text-center",
          "targets": [0,1,2,3,4,5,6,7]
        },
        {
          type: 'date',
          'targets': [2]
        },
        {
          targets: 6,
          render: function(data, type, row){
          var color = "GREEN";
          if(data == "SALIENTE"){
            color = "BLUE";
          }
              return '<span style="color:' + color + '">' + data + '</span>';
          }
        }
      ],

      "language": idioma_spanish,

      "dom": 'Bfrtilp',
      "buttons":[
        {
          "extend":'excelHtml5',
          "text":'<i class="fa fa-file-excel-o"></i>',
          "titleAttr":'Exportar a excel',
          "className":'btn btn-default'
        },
        {
          "extend":'pdfHtml5',
          "text":'<i class="fa fa-file-pdf-o"></i>',
          "titleAttr":'Exportar a PDF',
          "className":'btn btn-default'
        },
        {
          "extend":'print',
          "text":'<i class="fa fa-print"></i>',
          "titleAttr":'Imprimir',
          "className":'btn btn-default'
        }
      ]
    });

And when press filter button:

$('#record_buscar').click(function(){
    $('#db_records').DataTable().destroy();
    obtener($('#record_inicio').find("input").val(),$('#record_fin').find("input").val());
  });

When press filter button, datatable is destroyed and generate a new one with new values, but when I click in a row, I get the fails..

Anything that I doing wrong?

Thanks

colin

That looks OK in the code, are you able to link to a test case please so we can debug it. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Colin