Jquery 數據表 - 如何計算行數？

Question

我正在使用 Jquery數據來創建一個包含行詳細信息的表。 一切正常 只有條目數

當前的邏輯是計算父行 + 子行。 我只想計算 4 行的父行。我的結果應該是Showing 1 to 10 of 4 entries 。

在我的 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)}

所以你所要做的就是在你的服務器端腳本中工作，以反映預期的輸出。

希望能幫助到你