使用Jquery Datatables在表内的表上显示数据时出现问题

Question

Am working on an Laravel application whereby am fetching data from the backend, on the frontend am displaying it dynamically on a table using Javascript which works fine. But when I check on the browser all the data appears on a horizontal manner. Since the data is large, I would like to display it in a vertical manner inside Jquery datatables (so that the user can choose how many inputs he wants displayed per page).

Javascript code

<script>
<?php if(isset($ag)){ ?>
       var data;
        $( document ).ready(function() {
            data = {!! json_encode($ag) !!};
        });
        $(document).on("mouseenter", "a", function() {
            var policies = '';
            var agentId = $(this).attr('id');
            for(var i = 0; i < data.length; i++) {
                if(agentId == data[i]['agent_no']) {
                    for(var j = 0; j < data[i]['policies'].length; j++){
                        policies += '<td>' + data[i]['policies'][j] + '</td>' + '<br>';
                    }
                }
            }
            //console.log(policies);
            $('#summary-table tbody tr').html(policies);
        });
    <?php } ?>
</script>

Table that am displaying the data dynamically

<table class="table table-hover mg-b-0 tx-11" id="summary-table">
    <thead>
    <tr>
        <th>POLICIES</th>
    </tr>
    </thead>
    <tbody>
        <tr> <!-- Add policies dynamically via AJAX --></tr> 
    </tbody>
</table>

Answer 1

Your table has only one column, so either you set the Table head to the number of column you will be displaying, or you adjust the colspan attribute.

<script>
<?php if(isset($ag)){ ?>
    var data;
    $( document ).ready(function() {
        data = {!! json_encode($ag) !!};
    });
    $(document).on("mouseenter", "a", function() {
        var policies = '';
        var agentId = $(this).attr('id');
        for(var i = 0; i < data.length; i++) {
            if(agentId == data[i]['agent_no']) {
                for(var j = 0; j < data[i]['policies'].length; j++){
                    policies += '<td>' + data[i]['policies'][j] + '</td>' + '<br>';
                }
            }
        }
        //console.log(policies);
        $('#summaru-table thead th').attr('colspan', data.length); //adjust the colspan
        $('#summary-table tbody tr').html(policies);
    });
<?php } ?>
</script>