时间戳

首页 > 解决方案 > 为什么不能显示数据表上的子行？

jquery - 为什么不能显示数据表上的子行？

问题描述

我有一个这样的数据表： 在此处输入图像描述

我想要的是，如果单击每一行，它会自行扩展，显示更多详细信息（称为子行）。我尝试按照该链接上的教程进行操作，这是我的代码：

<!DOCTYPE html>
<html lang="en">
<style>
.elementID {
    color: #dc3545;
    /* text-shadow: 1px 1px 1px #ccc; */
    font-size: 1.5em;
}

td.details-control {
    background: url('../public/img/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.details td.details-control {
    background: url('../public/img/details_close.png') no-repeat center center;
}

</style>
<body class="hold-transition sidebar-mini" id="Identity-check">
<div class="wrapper">


                    <div class ="row">
                      <div class="col-md-12">
                        <section class="content">
                          <div class="container-fluid">
                            <div class="row">
                              <div class="col-12">

                                <div class="card">
                                    <div class="card-header bg-danger back-ops-okp2p">
                                        <h3 class="card-title"><b>History Log</b></h3>
                                    </div>
                                    <div class="card-body">

                                        <hr style="margin-top:20px;">
                                        <table id="history_log" class="display table table-hover table-striped table-bordered" data-toggle="collapse" data-target="#collapsible-detail" aria-expanded="true" aria-controls="collapsible-detail" style="width:100%">
                                            <thead>
                                                <tr>
                                                    <th>CRON DATE</th>
                                                    <th>CREATED AT</th>
                                                    <th>UPDATED AT</th>

                                                </tr>
                                                
                                            </thead>
                                            <tbody>                                           
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

</body>
</html>

<script type="text/javascript">

function showDetail( d ) {
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Full name:</td>'+
            '<td>Steve Johnson</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extension number:</td>'+
            '<td>123456</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>And any further details here (images etc)...</td>'+
        '</tr>'+
    '</table>';
}

$(document.ready).ready(function(){
  var dTable = $('#history_log').DataTable({
            lengthChange: true,
            fixedHeader: true,
            searching: true,
            ordering: true,
            serverSide: true,
            processing: true,
            ajax: {
                url: "{{ route('get_all_log') }}",
                data: ''
            },
            paging: true,
            info: true,
            autoWidth: true,
            scrollY: 300,
            scrollX: true,
            columns: 
            [
              /*
            {
                className:      'details-control',
                orderable:      false,
                defaultContent: '<i class = "glyphicon glyphicon-plus-sign"> </ i>',
            },*/
            { data: "date_cron" },
            {data: "created_at" },
            {data: "updated_at" }]
  });


  $('#history_log tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            row.child(showDetail()).show();
            tr.addClass('shown');
        }
    } );
});


 

</script>

请注意评论部分。如果我取消注释，我会收到此错误：

未捕获的类型错误：无法读取未定义的属性“样式”

哪个指向 var dTable = $('#history_log').DataTable({。当然，没有用于显示 +/- 图标的附加列。

如何解决这个问题？

标签： jquerydatatables

解决方案

以下是关于我所做更改的一些说明。进行这些更改后，显示/隐藏逻辑将起作用。

1 示例 JSON 不是有效的 JSON。它在几个地方缺少双引号和逗号。

这是清理后的 JSON：

{
    "draw": 1,
    "recordsTotal": 2,
    "recordsFiltered": 2,
    "data": [
    {
        "date_cron": "20210318",
        "created_at": "2021-03-18 17:08:31",
        "updated_at": "2021-03-18 17:08:31",
        "detail_1": "aaaaa",
        "detail_2": "bbbbb",
        "detail_3": "ccccc",
        "detail_4": "ddddd"
    },
    {
        "date_cron": "20210319",
        "created_at": "2021-03-19 00:00:09",
        "updated_at": "2021-03-19 00:00:09",
        "detail_1": "eeeee",
        "detail_2": "fffff",
        "detail_3": "ggggg",
        "detail_4": "hhhhh"
    }
    ]
}

2 DataTable 被分配给一个变量dTable，但在代码中，它没有被使用。代码指的是table：

var row = table.row( tr );

我改变了这些以保持一致。

3 您的 DataTable 预计 HTML 表中有 4 列：屏幕截图中的 3 列，再加上折叠/展开列中的 1 列。您的 HTML 表只明确定义了 3 列，所以我又添加了 1 列：

<thead>
    <tr>
        <th></th>
        <th>CRON DATE</th>
        <th>CREATED AT</th>
        <th>UPDATED AT</th>
    </tr>
</thead>

现在，您的注释掉的逻辑可以在某个地方放置其输出。

推荐阅读