Как отобразить данные, используя DataTable с источником JSON?

Question

У меня есть данные JSON из базы данных. Он хранится в скрытой текстовой области. Я хотел бы использовать DataTable для его отображения. Это мой текущий сценарий:

$("#btn_find").on('click',function(e){ 
    $('#hidden_textarea').val("");  

    if(is_error > 0){              //This is just an error checking. I skip this part
        alert("There are errors");
        return false;
    }
    else{
        $('.modal').show();
        $('#table_display tbody').remove();
        $('#DataTables_Table_0').empty();
        $('#table_display').DataTable().destroy();

        var par_sent = "some_value";

        $.ajax({
            type     : "POST",
            url      : "<?php echo site_url('Memo/get_memo_by_par'); ?>",           
            dataType : "JSON",
            data     : par_sent,
            success  : function(response){

                if(Object.keys(response).length == 0){
                    alert("There are no data");

                    $('.modal').hide();
                    $('#table_display tbody').remove();
                    $('#DataTables_Table_0').empty();
                    $('#table_display').DataTable().destroy();

                    return false;
                }
                else{

                    $('#hidden_textarea').val(JSON.stringify(response));                    

                    var table = $('.dataTables-example').DataTable({
                                    pageLength  : 15,
                                    responsive  : true,
                                    retrieve    : true,
                                    dom         : '<"html5buttons"B>lTfgitp',
                                    ajax        : function (data, callback, settings){

                                        var jdata   = JSON.parse($('#hidden_textarea').val());
                                        var data    = [];
                                        var i       = 1;

                                        jdata.map((d) => {
                                                            var returned = [i++]
                                                            var values   = Object.values(d)

                                                            returned.push(...values)
                                                            data.push(returned)     

                                        })

                                        setTimeout(function() {                                                 
                                            callback({
                                                    draw            : data.draw,
                                                    data            : data,
                                                    recordsTotal    : data.length,
                                                    recordsFiltered : data.length
                                            });                                                 
                                        }, 50);
                                    },
                                    buttons     : [ {extend: 'copy'},
                                                    {extend: 'csv', title: "Report"},
                                                    {extend: 'excel', title: "Report",},
                                                    {extend: 'pdf', title: "Report"},
                                                    {extend: 'print',
                                                        customize: function (win){
                                                            $(win.document.body).addClass('white-bg');
                                                            $(win.document.body).css('font-size', '10px');
                                                            $(win.document.body).find('table').addClass('compact').css('font-size', 'inherit');
                                                        }
                                                    }
                                    ]                                   
                                });                         
                } //END ELSE                
            },
            complete: function() {

                $('#table_display').on('draw.dt', function(){

                    $("#table_display tbody tr").each(function(c){                      
                        //COLUMN 1
                        $(this).find('td:eq(0)').css('text-align','right');
                        $(this).find('td:eq(0)').css('width','1%');                         
                    });                 
                });

                $('.modal').hide();
            }
        }); 

    }
});

Над скриптом работает , но только для одного поиска. Я должен перезагрузить страницу, чтобы снова использовать эту функцию. Режим загрузки продолжает вращаться, если я использую поиск дважды. Но скрытая текстовая область заполнена правильными данными.

Итак, как мне исправить мой код, чтобы он мог выполнять поиск бесконечно, не обновляя страницу?

Разрешено любое изменение скрипта для его улучшения. Если есть какие-либо вопросы или запросите еще пример, вы можете опубликовать их в комментарии.