Jquery datatables - 如何计算行数？

Question

我正在使用 Jquery datables 创建一个带有 row details 的表。一切正常只有条目数

当前的逻辑是计算父行 + 子行。我只想计算 4 行的父母行。我的结果应该是显示 4 个条目中的 1 到 10 个。

在我的 Json 文件中，我有 recordsTotal: 16，这是父母 + 孩子的总行数。当我更改为父行数 4 时，表格将只显示第一条记录（票证 id 1 + 它的 3 个子行），因为它被计为 4 个条目。

任何建议请我如何更新？谢谢。

$(document).ready(function() {

function format ( d ) {  

d.Items.sort(function compare(a,b) {
  if (a.Line_No < b.Line_No)
    return -1;
  if (a.Line_No > b.Line_No)
    return 1;
  return 0;
}); 

   var x = '<table class="nowrap table table-bordered table-hover" cellspacing="0" width="100%"><thead><tr><th>Line No</th><th>Line Level Issue</th><th>Created Date</th><th>Created By</th></tr></thead><tbody>' ;
     
$.each(d.Items, function( index, value ) {
  x += '<tr><td>' + d.Items[index].Line_No + '</td><td>' + d.Items[index].Line_Level_Issue + '</td><td>' + d.Items[index].Created_Date + '</td><td>' + d.Items[index].Created_By + '</td></tr>';
});

        x +='</tbody></table>';
        return x; 
}

    var dt = $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "deferRender": true,
        "lengthChange": true,
        "pageLength": 10,
        "language": { "emptyTable": "No matching records found",
        "info": "Showing _START_ to _END_ of _TOTAL_ entries",
        "zeroRecords": "No matching records found" },
        "ajax": "https://api.myjson.com/bins/vwjfc", 
        "columns": [
            {
                "class":          "details-control",
                "data":           "Ticket_id"
                ,render : function(data, type, row) {
              return '&nbsp; &nbsp; &nbsp;' + data;
          }
            },
            { "data": "Order_Level_Issue" },
            { "data": "Geo" },
            { "data": "Region" },
            { "data": "Territory" },
            { "data": "Market" },
            { "data": "Country" },
            { "data": "SoldTo_Number" },
            { "data": "SoldTo_Name" },
            { "data": "Order_Numer" }

        ],
        "order": [[0, 'asc'],[1, 'asc']]
    } );
 
    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();

            detailRows.splice( idx, 1 );
        }
        else {
            tr.addClass( 'details' );
            row.child( format( row.data() ) ).show();

            if ( idx === -1 ) {
                detailRows.push( tr.attr('id') );
            }
        }
    } );
 
    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 left;
    cursor: pointer;
}
tr.details td.details-control {
    background: url('https://datatables.net/examples/resources/details_close.png') no-repeat center left;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>



<table id="example" class="nowrap table table-hover table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>TicketT id</th>
                <th>Order Level Issue</th>
                <th>Geo</th>
                <th>Region</th>
                <th>Territory</th>
                <th>Market</th>
                <th>Country</th>
                <th>SoldTo Number</th>
                <th>SoldTo Name</th>
                <th>Order Numer</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Ticket id</th>
                <th>Order Level Issue</th>
                <th>Geo</th>
                <th>Region</th>
                <th>Territory</th>
                <th>Market</th>
                <th>Country</th>
                <th>SoldTo Number</th>
                <th>SoldTo Name</th>
                <th>Order Numer</th>
            </tr>
        </tfoot>
</table>



<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>

Answer 1

我认为问题根本不是 dataTables，而是您的 ajax 调用，因为您使用的是 serverSide，您的服务器端是发送表格将显示的数据的一方，包括记录总数您的 ajax 响应：

{draw: 1, recordsTotal: 16, recordsFiltered: 16, data: Array(4)}

因此，您只需在服务器端脚本中工作，以反映预期的输出。

希望对你有帮助