Mis tablas de datos no pueden cambiar los datos cuando se produce una solicitud ajax.

Al volver a cargar la página, los datos realmente se muestran, pero cuando se activa el cambio de datos al seleccionar la opción de selección y hacer clic en el botón Enviar, los datos no se muestran. ¿Hay algo mal en mi código de tablas de datos?

Este es mi código:

 <script> let base_url = "{{ $base_url }}"; </script> <script type="text/javascript"> $(document).ready(function() { var myBranch = branch_code; var dateStart = ''; var dateEnd = ''; getData(myBranch, dateStart, dateEnd); $('#submit').on('click', function() { var dateRange = $('#daterange').val(); var dateSplit = dateRange.split(" - "); dateStart = dateSplit[0]; dateEnd = dateSplit[1]; getData(myBranch, dateStart, dateEnd); }); function getData(myBranch, dateStart, dateEnd) { $.ajax({ type: "POST", url: base_url+'/api/json/report/sale-branch', data: { branch: myBranch, date_start: dateStart, date_end: dateEnd, }, dataType: "json", beforeSend: function () { $("#overlay").fadeIn(5000); }, success: function(row) { $("#overlay").fadeOut(300); console.log(row); $('#title_branch').text(row.data.title_branch); $('#title_date').text(row.data.title_date); new Morris.Bar({ barGap:1, barSizeRatio:0.5, element: 'chartCountTrx', data: row.data.chart_count_transaction, xkey: 'day', ykeys: ['value','nominal'], labels: ['Transaction','Amount'], barColors: ['RoyalBlue'], }); $('#datatable').DataTable({ processing: true, data: row.data.product, columns: [ { data: null,'sortable': true, render: function (data, type, row, meta) { return meta.row + meta.settings._iDisplayStart + 1; } }, { data: 'name' }, { data: 'category' }, { data: 'qty' }, { data: 'nominal' }, ] }); } }) return false; } }); </script>