在响应模式下，数据表子行未出现在第一列中

Question

我不确定我在做什么错，但是当我单击详细信息控制时。子行已显示，但已推送到数据表末尾的新列。

这是我的代码：

<div class="col-xs-4">
<table id="exp_datatable" class="display ">
    <thead>
        <tr>
            <th>AccountNumber</th>
            <th>AccountCostCentre</th>
            <th>AccountDepartment</th>
            <th>Narrative</th>
            <th>TransactionAnalysisCode</th>
            <th>TaxType</th>
            <th>TaxCode</th>
            <th>Amount</th>
        </tr>
    </thead>
</table>

<script>   

    $(function() {

        $tepTable = $('#exp_datatable').DataTable ( {
            ajax: { // doing it this way allows me to invoke ajax.reload
                url: '../ajax/transactions.php',
                type: 'POST',
                data: {action:'get export preview'},
                dataType: 'json',
                dataFilter: function(data){
                    var jData = JSON.parse(data);
                    var dtData =JSON.stringify( {"data": jData});
                    return dtData;
                }
            },
            responsive: true,
            columns: [
                        { data: "nom_code" },
                        { data: "account_cost_centre" },
                        { data: "account_dept" },
                        { data: "narrative" },
                        { data: "trans_analysis_code" },
                        { data: "tax_type" },
                        { data: "tax_code" },
                        { data: "amount" }
            ]
        });       
    });


</script>

我的桌子看起来像这样：

这是显示子行的地方：

我真的很困，所以非常感谢您的帮助。谢谢

李