I am working on a task: a table would be displayed after a button clicked, here is my code:

<button id="search-button">SEARCH</button>

 <div class="flex flex-col bg-white overflow-hidden sm:rounded-lg p-2 shadow-md">
                        <div>
                            <table width="100%" id="all-products" style="display:none;">
                                <x-thead :headers="Constants::TABLE_TITLE"></x-thead>
                            </table>
                        </div>
                    </div>

script code:

<script>
 $(document).ready(function() {
         $('#search-button').on('click', function() {  
                    $('#all-products').show();  
                      });  

        $('#all-products').DataTable({
            language: {},
            ajax:{
                url:"xxxx",
                type:"POST",
                dataType:"JSON",
            },
            columns:[{}, {}],
            columnDefs:[],
            order: [],
            searching: true,
            // responsive: true,
            serverSide:true,
            processing:true,
            lengthMenu: [ 10, 15, 50, 100],
            pageLength: 15,
            scrollX: true
        });
        $("input[type=search]").width("250px");

    });

</script>

now before search button clicked, table is not displayed (expected), after search button clicked, the table is displayed but the table title missed, and i also tried put the style="display:none;" outside of the it still didn’t work, can u please help me to figure it out? MANY THANKS!

i tried the code shown above