如何使用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();
            }
        }); 

    }
});

上面的脚本正在起作用，但仅用于一次搜索。我必须重新加载页面才能重新使用该功能。如果我使用搜索两次，加载模式将继续旋转。但是，隐藏的文本区域将填充正确的数据。

那么，我该如何修复我的代码，使其能够无限搜索而不刷新页面？

允许任何脚本修改来增强它。如果有任何疑问或要求更多示例，您可以在评论中发布。