JQuery Datatables：如何添加子行？ [英] JQuery Datatables: How to add child row?

问题描述

Datatables是否使用css标记定义子行？我有一个包含子行的HTML表。我想将它们设置为Datatables中的子行，以便在排序时与父行保持一致。我找不到一个css类的引用，它将行标记为子行。

Does Datatables define the child row with a css marker? I have an HTML table that includes child rows. I would like to set these as child rows in Datatables so they stay with the parent row when sorted. I could not find a reference to a css class that marks a row as a child row.

我可以找到的是JQuery row.child（）函数，您可以在行中添加子行，但我对JQuery不太了解，无法弄清楚在这里添加行。

All I could find was the JQuery row.child() function where you add child rows to the row but I am not good with JQuery and can't figure out how to add the row here.

请参阅此 JSFiddle （单击程序排序，列表图标展开/折叠子行）。

Please see this JSFiddle. (Click "Program" to sort and the list icon to expand/collapse the child rows).

<table id="tprogram" class="table table-striped table-hover ">
<thead>
    <tr>
        <th class='icon_colunm no-sort'></th>
        <th>Program</th>

    </tr>
</thead>
<tbody>
    <tr>
        <td class="text-right"> <i class="btn btn-xs fa fa-list-ul" data-toggle="collapse" data-target=".collapsed1"></i>
        </td>
        <td class='name'>A</td>
    </tr>
    <tr class="collapse collapsed1">
        <td class="text-right"> <i class="fa fa-minus"></i></td>
        <td class='name'>a</td></tr>
    <tr>
        <td class="text-right"> <i class="btn btn-xs fa fa-list-ul" data-toggle="collapse" data-target=".collapsed2"></i>
        </td>
        <td class='name'>B</td></tr>
    <tr class="collapse collapsed2">
        <td class="text-right"> <i class="fa fa-minus"></i>
        </td>
        <td class='name'>a</td></tr>
    <tr class="collapse collapsed2">
        <td class="text-right"> <i class="fa fa-minus"></i>
        </td>
        <td class='name'>b</td></tr>
    <tr class="collapse collapsed2">
        <td class="text-right"> <i class="fa fa-minus"></i>
        </td>
        <td class='name'>c</td>
    </tr>
</tbody>

 $(document).ready(function() {
    $('#tprogram').dataTable({
        "bPaginate":    true,
        "bSort":        true,
        "bInfo":        false,
        "bFilter":      true,
        "bAutoWidth":   false,
        "LengthChange": false,
        "iDisplayLength": 50,
    });

    $('#tprogram').on('click', '.fa-list-ul', function () {
        var tr = $(this).closest('tr');

        var row = table.row(tr);

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        } else {
            // Open this row
            row.child(*?*).show();
            tr.addClass('shown');
        }
    });

});

推荐答案

我决定将自己的类插入父行并使用row.add（）函数用一些JQuery手动添加子行。

I decided to insert my own class to the parent row and use the row.add() function to add the child rows manually with some JQuery.

    $('.parentrow').closest('tr').each(function(){
        var row = table.row(this);
        childrows = $(this).closest('tr').nextUntil('.parentrow');
        row.child(childrows).show();
    });

这篇关于JQuery Datatables：如何添加子行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！