Ошибка отображения данных в таблице внутри таблицы с использованием Jquery Datatables

Question

Я работаю над приложением Laravel, в котором извлекаю данные из бэкэнда, а во внешнем интерфейсе динамически отображаю их в таблице, используя Javascript, который работает нормально. Но когда я проверяю в браузере все данные появляются по горизонтали. Поскольку данные велики, я хотел бы отображать их вертикально в таблицах данных Jquery (чтобы пользователь мог выбрать, сколько входных данных он хочет отобразить на странице).

Javascript код

<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 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

Ваша таблица имеет только один столбец, поэтому либо вы устанавливаете Table head в качестве номера столбца, который вы будете отображать, либо настраиваете атрибут colspan.

<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>