2级可消耗数据表

Question

我正在研究数据表。现在我正在使用

https://www.datatables.net/examples/api/row_details.html

但问题在这里我们只能花一次，但我想让它耗费2倍。

如何解决这个问题。

提前致谢。

Answer 1

我使用了您提到的链接中的所有代码 - https://www.datatables.net/examples/api/row_details.html并对其进行了修改。希望这会有所帮助...

         <style>
        td.details-control {
            background: url('images/details_open.png') no-repeat center center;
            cursor: pointer;
        }
        tr.shown td.details-control {
            background: url('images/details_close.png') no-repeat center center;
        }

        td.details-control2 {
            background: url('images/details_open.png') no-repeat center center;
            background-position: top;
            cursor: pointer;
        }
        tr.shown td.details-control2 {
            background: url('images/details_close.png') no-repeat center center;
            background-position: top;
        }            

     </style>
    <table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th></th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th></th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>
        /* Formatting function for row details - modify as you need */
    function format ( d ) {
        // `d` is the original data object for the row
        return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
            '<tr>'+
                '<td>Full name:</td>'+
                '<td>'+d.name+'</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Extension number:</td>'+
                '<td>'+d.extn+'</td>'+
            '</tr>'+
            '<tr>'+
                '<td class=details-control2></td>'+
                '<td>Extra Info</td>'+
            '</tr>'+
        '</table>';
    }

    /* Formatting function for row details - modify as you need */
    function format2 ( d ) {
        // `d` is the original data object for the row
        return '<br/><br/><table cellpadding="5" cellspacing="0" border="0" style="padding-left:250px;">'+
            '<tr>'+
                '<td>Start Date:</td>'+
                '<td>'+d.start_date+'</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Position:</td>'+
                '<td>'+d.position+'</td>'+
            '</tr>'+
        '</table>';
    }

    $(document).ready(function() {
        var table = $('#example').DataTable( {
            "ajax": "./ajax/data/objects.txt",
            "columns": [
                {
                    "className":      'details-control',
                    "orderable":      false,
                    "data":           null,
                    "defaultContent": ''
                },
                { "data": "name" },
                { "data": "position" },
                { "data": "office" },
                { "data": "salary" }
            ],
            "order": [[1, 'asc']]
        } );

        // Add event listener for opening and closing details
        $('#example tbody').on('click', 'td.details-control', 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( format(row.data()) ).show();
                tr.addClass('shown');
            }
        } );


        // Add event listener for opening and closing details
        $('#example tbody').on('click', 'td.details-control2', function () {

            var tr1 = $(this).closest('table').closest('tr');

            var trData = tr1.prev();

            var rowData = table.row( trData );    

            if($(this).parent().hasClass( "shown" )) {
                $(this).parent().removeClass('shown');
                $(this).siblings('td').text('Extra Info:');
            }
            else {                  
                $(this).siblings('td').append(format2(rowData.data()));
                $(this).parent().addClass('shown');  
            }

        } );    

    } );