Load Datatable after ajax call

I've looked for some kind of similar answer in the site but I haven't been able to make do it right. I need to load the dataTable and all its properties after an onClick event to get the data. The table load fine but the export, sort and search options from the dataTable don't load.

Here is my onClick, at the end I'm inserting the result into a div called tableList

            $('#getData').on('click', (event) => {
                var tmp =
                    JSON.stringify({
                        "campaign": '',
                        "function": "getServiceExpertReport",
                        "beginDate": document.getElementById("startDate").value,
                        "endDate": document.getElementById("endDate").value
                    })
                $.ajax({
                    type: 'POST',
                    url: 'development_functions.php',
                    headers: 'Content-Type", "application/json;charset=UTF-8',
                    data: tmp,
                    body: tmp,
                    success: function(result) {
                        $("#tableList").after(result)
                    },
                })
            });

And this is the dataTable that I was trying to load after the post call is loaded.

            $(document).load(function() {
                $('#agentList').DataTable({
                    paging: true,
                    search: {
                        searching: true,
                        caseInsensitive: true
                    },
                    dom: 'lBfrtip',
                    buttons: true,
                    buttons: [{
                        extend: 'collection',
                        text: 'Export',
                        buttons: [
                            'copy',
                            'excel',
                            'csv',
                            'print'
                        ]
                    }]
                });
            });