Home » Jquery » javascript – Jquery datatables – How count numbers of rows?-Exceptionshub

javascript – Jquery datatables – How count numbers of rows?-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

I am using to Jquery datables to create a table with row details . Everything working fine Only the number of entries
enter image description here

The current logic is counting the parents row + child rows. I want to count only parents rows which are 4. My result should be Showing 1 to 10 of 4 entries.

In my Json file, I have recordsTotal: 16 which is the total rows parents + child. When I change to 4 which is number of parents rows the table will show me only first record (Ticket id 1 + its 3 child rows ) as it’s counted as 4 entries.

Any suggestions please how can I update ? Thank you.

$(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>
How to&Answer:

I assume the problem was not dataTables at all but your ajax call, since you are using serverSide your server side is the one who sends the data the table will display including the total of records so in your ajax response you have:

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

So all you have to do is work in your server side script in order the reflect the expected output.

Hope it helps