使用 Jquery Datatables 在表内的表上显示数据的问题答案

【问题标题】：Issue displaying data on a table inside a table using Jquery Datatables使用 Jquery Datatables 在表内的表上显示数据的问题
【发布时间】：2019-01-03 12:58:56
【问题描述】：

我正在开发一个 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>

【问题讨论】：

将html 更改为append

标签： javascript jquery laravel datatables

【解决方案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>

【讨论】：