Jquery datatables - Как считать количество строк?

Question

Я использую для Jquery datables , чтобы создать таблицу с деталями строки . Все работает нормально Только количество записей

Текущий лог c рассчитывает родительскую строку + дочерние строки. Я хочу сосчитать только родительские строки, которые равны 4. Мой результат должен быть Отображение от 1 до 10 из 4 записей .

В моем файле Json у меня есть recordsTotal: 16, то есть общее количество строк родители + ребенок. Когда я изменяю на 4, то есть количество родительских строк, в таблице будет отображаться только первая запись (идентификатор билета 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)}

Итак, все, что вам нужно сделать, это работать над сценарием на стороне сервера, чтобы отразить ожидаемый результат.

Надеюсь, это поможет