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>

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

1 个答案: