jquery - 数据表上父行上方的子行

Question

我一直在处理数据表子行，我找到了数据表提供的示例

https://datatables.net/examples/server_side/row_details.html

问题是他们提供了要在父行下方生成的子行，但我的要求是在父行上方生成子行

有没有办法做到这一点。

我已经实现了父行下的子行如下

function format ( d ) {
    return 'Full name: '+d.first_name+' '+d.last_name+'<br>'+
        'Salary: '+d.salary+'<br>'+
        'The child row can contain any data you wish, including links, images, inner tables etc.';
}

$(document).ready(function() {
    var dt = $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "scripts/ids-objects.php",
        "columns": [
            {
                "class":          "details-control",
                "orderable":      false,
                "data":           null,
                "defaultContent": ""
            },
            { "data": "first_name" },
            { "data": "last_name" },
            { "data": "position" },
            { "data": "office" }
        ],
        "order": [[1, 'asc']]
    } );

    // Array to track the ids of the details displayed rows
    var detailRows = [];

    $('#example tbody').on( 'click', 'tr td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = dt.row( tr );
        var idx = $.inArray( tr.attr('id'), detailRows );

        if ( row.child.isShown() ) {
            tr.removeClass( 'details' );
            row.child.hide();

            // Remove from the 'open' array
            detailRows.splice( idx, 1 );
        }
        else {
            tr.addClass( 'details' );
            row.child( format( row.data() ) ).show();

            // Add to the 'open' array
            if ( idx === -1 ) {
                detailRows.push( tr.attr('id') );
            }
        }
    } );

    // On each draw, loop over the `detailRows` array and show any child rows
    dt.on( 'draw', function () {
        $.each( detailRows, function ( i, id ) {
            $('#'+id+' td.details-control').trigger( 'click' );
        } );
    } );
} );

希望有人可以提供帮助。:-)

标签： jquerydatatabledatatables

Answer 1

试试下面的逻辑：在单击 tr 之前添加 tr，class="child"。检查单击的 tr 是否具有类details，并相应地在 tr 之前添加或删除子项。

var tableData = {
  "draw": 1,
  "recordsTotal": 57,
  "recordsFiltered": 57,
  "data": [
    {
      "DT_RowId": "row_5",
      "first_name": "Airi",
      "last_name": "Satou",
      "position": "Accountant",
      "office": "Tokyo",
      "start_date": "28th Nov 08",
      "salary": "$162,700"
    },
    {
      "DT_RowId": "row_25",
      "first_name": "Angelica",
      "last_name": "Ramos",
      "position": "Chief Executive Officer (CEO)",
      "office": "London",
      "start_date": "9th Oct 09",
      "salary": "$1,200,000"
    },
    {
      "DT_RowId": "row_3",
      "first_name": "Ashton",
      "last_name": "Cox",
      "position": "Junior Technical Author",
      "office": "San Francisco",
      "start_date": "12th Jan 09",
      "salary": "$86,000"
    },
    {
      "DT_RowId": "row_19",
      "first_name": "Bradley",
      "last_name": "Greer",
      "position": "Software Engineer",
      "office": "London",
      "start_date": "13th Oct 12",
      "salary": "$132,000"
    },
    {
      "DT_RowId": "row_28",
      "first_name": "Brenden",
      "last_name": "Wagner",
      "position": "Software Engineer",
      "office": "San Francisco",
      "start_date": "7th Jun 11",
      "salary": "$206,850"
    },
    {
      "DT_RowId": "row_6",
      "first_name": "Brielle",
      "last_name": "Williamson",
      "position": "Integration Specialist",
      "office": "New York",
      "start_date": "2nd Dec 12",
      "salary": "$372,000"
    },
    {
      "DT_RowId": "row_43",
      "first_name": "Bruno",
      "last_name": "Nash",
      "position": "Software Engineer",
      "office": "London",
      "start_date": "3rd May 11",
      "salary": "$163,500"
    },
    {
      "DT_RowId": "row_23",
      "first_name": "Caesar",
      "last_name": "Vance",
      "position": "Pre-Sales Support",
      "office": "New York",
      "start_date": "12th Dec 11",
      "salary": "$106,450"
    },
    {
      "DT_RowId": "row_51",
      "first_name": "Cara",
      "last_name": "Stevens",
      "position": "Sales Assistant",
      "office": "New York",
      "start_date": "6th Dec 11",
      "salary": "$145,600"
    },
    {
      "DT_RowId": "row_4",
      "first_name": "Cedric",
      "last_name": "Kelly",
      "position": "Senior Javascript Developer",
      "office": "Edinburgh",
      "start_date": "29th Mar 12",
      "salary": "$433,060"
    }
  ]
}
function format ( d ) {
    return '<tr class="child"><td colspan="5">Full name: '+d.first_name+' '+d.last_name+'<br>'+
        'Salary: '+d.salary+'<br>'+
        'The child row can contain any data you wish, including links, images, inner tables etc.</td></tr>';
}
 
$(document).ready(function() {
    var dt = $('#example').DataTable( {
        "columns": [
            {
                "class":          "details-control",
                "orderable":      false,
                "data":           null,
                "defaultContent": ""
            },
            { "data": "first_name" },
            { "data": "last_name" },
            { "data": "position" },
            { "data": "office" }
        ],
        "order": [[1, 'asc']]
    } );
 dt.clear();
 dt.rows.add(tableData.data);
 dt.draw();
    // Array to track the ids of the details displayed rows
    var detailRows = [];
 
    $('#example tbody').on( 'click', 'tr td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = dt.row( tr );
        var idx = $.inArray( tr.attr('id'), detailRows );
 
        if ( tr.hasClass('details') ) {
            tr.removeClass( 'details' );
            tr.prev('tr.child').remove();
        }
        else {
            tr.addClass( 'details' );
            tr.before(format( row.data())).show();
        }
    } );
 
    // On each draw, loop over the `detailRows` array and show any child rows
    dt.on( 'draw', function () {
        $.each( detailRows, function ( i, id ) {
            $('#'+id+' td.details-control').trigger( 'click' );
        } );
    } );
} );

td.details-control {
    background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.details td.details-control {
    background: url('https://datatables.net/examples/resources/details_close.png') no-repeat center center;
}

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th></th>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th></th>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
            </tr>
        </tfoot>
    </table>